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