| @@ -1,5 +1,5 @@ | |||||
| <template> | <template> | ||||
| <div> | |||||
| <div class="aigc"> | |||||
| <div id="top"> | <div id="top"> | ||||
| <el-carousel > | <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})` }"> | ||||
| @@ -44,9 +44,11 @@ | |||||
| <el-button round>制作数字人</el-button> | <el-button round>制作数字人</el-button> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="gg"> | |||||
| <img :src="gg1" alt=""> | |||||
| </div> | |||||
| <div id="daliay"> | <div id="daliay"> | ||||
| <div class="content"> | <div class="content"> | ||||
| <div class="top"> | <div class="top"> | ||||
| @@ -73,8 +75,10 @@ | |||||
| </template> | </template> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/> | |||||
| </div> | </div> | ||||
| <div class="gg"> | |||||
| <img :src="gg2" alt=""> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| @@ -142,6 +146,12 @@ export default { | |||||
| content: '新车选购', | content: '新车选购', | ||||
| flag: 'image' | flag: 'image' | ||||
| }, | }, | ||||
| { | |||||
| img: '/aigc_img3.png', | |||||
| name: '丰田锋兰达值得买吗?', | |||||
| content: '年底购车多少钱能落地价?', | |||||
| flag: 'video' | |||||
| }, | |||||
| { | { | ||||
| img: '/aigc_img3.png', | img: '/aigc_img3.png', | ||||
| name: '丰田锋兰达值得买吗?', | name: '丰田锋兰达值得买吗?', | ||||
| @@ -239,6 +249,9 @@ export default { | |||||
| } | } | ||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .aigc{ | |||||
| background: #E3E5EA; | |||||
| } | |||||
| .el-carousel__container { | .el-carousel__container { | ||||
| height: 590px; | height: 590px; | ||||
| } | } | ||||
| @@ -373,7 +386,6 @@ export default { | |||||
| padding-top: 30px; | padding-top: 30px; | ||||
| .content { | .content { | ||||
| width: 1200px; | width: 1200px; | ||||
| height: 90%; | |||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| @@ -381,14 +393,14 @@ export default { | |||||
| width: 100%; | width: 100%; | ||||
| } | } | ||||
| .top { | .top { | ||||
| margin-bottom: 30px; | |||||
| background-color: #FFFFFF; | background-color: #FFFFFF; | ||||
| display: flex; | display: flex; | ||||
| align-items: center; | |||||
| justify-content: space-around; | justify-content: space-around; | ||||
| padding: 20px 0; | |||||
| padding: 26px 0; | |||||
| position: relative; | |||||
| .ai { | .ai { | ||||
| position: relative; | position: relative; | ||||
| width: 240px; | |||||
| a { | a { | ||||
| bottom: 0; | bottom: 0; | ||||
| left: 0; | left: 0; | ||||
| @@ -398,16 +410,18 @@ export default { | |||||
| color: #1C679F; | color: #1C679F; | ||||
| line-height: 48px; | line-height: 48px; | ||||
| width: 100%; | width: 100%; | ||||
| margin-bottom: 15px; | |||||
| } | } | ||||
| } | } | ||||
| .aitxt { | .aitxt { | ||||
| width: 250px; | |||||
| width: 344px; | |||||
| height: 85%; | height: 85%; | ||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| align-items: center; | align-items: center; | ||||
| justify-content: space-around; | justify-content: space-around; | ||||
| margin-right: 10px; | |||||
| .title { | .title { | ||||
| font-size: 24px; | font-size: 24px; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| @@ -416,19 +430,21 @@ export default { | |||||
| } | } | ||||
| .content { | .content { | ||||
| width: 100%; | width: 100%; | ||||
| min-width: 100px; | |||||
| text-align: left; | text-align: left; | ||||
| font-size: 18px; | font-size: 18px; | ||||
| font-family: Microsoft YaHei; | font-family: Microsoft YaHei; | ||||
| font-weight: 400; | font-weight: 400; | ||||
| color: #00161C; | color: #00161C; | ||||
| line-height: 30px; | line-height: 30px; | ||||
| margin-top: 30px; | |||||
| } | } | ||||
| .el-button { | .el-button { | ||||
| border: none; | border: none; | ||||
| background-color: #07CAAF; | background-color: #07CAAF; | ||||
| font-size: 14px; | font-size: 14px; | ||||
| color: #FFFFFF; | color: #FFFFFF; | ||||
| position: absolute; | |||||
| bottom: 46px; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -436,7 +452,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; | |||||
| margin: 30px 0; | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| @@ -470,28 +486,32 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| #zb { | #zb { | ||||
| margin-top: 40px; | |||||
| display: flex; | |||||
| .imagezb { | .imagezb { | ||||
| width: 220px; | width: 220px; | ||||
| height: 400px; | |||||
| float: left; | float: left; | ||||
| margin-right: 20px; | margin-right: 20px; | ||||
| position: relative; | position: relative; | ||||
| flex: 1; | |||||
| img { | img { | ||||
| width: 220px; | width: 220px; | ||||
| height: 370px; | height: 370px; | ||||
| } | } | ||||
| .el-button { | .el-button { | ||||
| position: absolute; | position: absolute; | ||||
| bottom: 60px; | |||||
| left: 50px; | |||||
| bottom: 82px; | |||||
| left: 50%; | |||||
| margin-left: -73px; | |||||
| border: none; | border: none; | ||||
| background: #07CAAF; | background: #07CAAF; | ||||
| font-size: 18px; | font-size: 18px; | ||||
| font-weight: bold; | font-weight: bold; | ||||
| color: #FFFFFF; | color: #FFFFFF; | ||||
| line-height: 48px; | |||||
| padding-top: 0px; | padding-top: 0px; | ||||
| padding-bottom: 0px; | padding-bottom: 0px; | ||||
| width: 146px; | |||||
| height: 44px; | |||||
| } | } | ||||
| .textzb { | .textzb { | ||||
| font-size: 18px; | font-size: 18px; | ||||
| @@ -502,23 +522,26 @@ export default { | |||||
| flex-direction: column; | flex-direction: column; | ||||
| align-items: center; | align-items: center; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| height: 40px; | |||||
| margin-top: 18px; | |||||
| a { | a { | ||||
| display: inline-block; | display: inline-block; | ||||
| text-align: left; | text-align: left; | ||||
| width: 130px; | width: 130px; | ||||
| } | } | ||||
| .contentzb{ | |||||
| margin-top: 10px; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| .videozb { | .videozb { | ||||
| 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; | ||||
| } | } | ||||
| .textzb { | .textzb { | ||||
| @@ -535,16 +558,21 @@ export default { | |||||
| display: inline-block; | display: inline-block; | ||||
| text-align: left; | text-align: left; | ||||
| } | } | ||||
| .contentzb{ | |||||
| margin-top: 10px; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| .videozb::after { | .videozb::after { | ||||
| content: ''; | content: ''; | ||||
| z-index: 99; | z-index: 99; | ||||
| width: 67px; | |||||
| height: 67px; | |||||
| width: 55px; | |||||
| height: 55px; | |||||
| position: absolute; | position: absolute; | ||||
| background-image: url('../../assets/play.png'); | background-image: url('../../assets/play.png'); | ||||
| left: 40%; | |||||
| background-size: 100%; | |||||
| left: 50%; | |||||
| margin-left: -27.5px; | |||||
| top: 40%; | top: 40%; | ||||
| z-index: 99; | z-index: 99; | ||||
| background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
| @@ -553,4 +581,12 @@ export default { | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .gg { | |||||
| margin: 30px auto; | |||||
| width: 1200px; | |||||
| img { | |||||
| width: 100%; | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||