|
|
@@ -1,10 +1,14 @@ |
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div id="top">
|
|
|
|
<div class="txt">
|
|
|
|
<a>META</a>
|
|
|
|
<a>AUTO</a>
|
|
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<a class="subtitle">{{ item.subtitle }}</a>
|
|
|
|
</div>
|
|
|
|
</el-carousel-item>
|
|
|
|
</el-carousel>
|
|
|
|
<el-form ref="form" :model="form" label-width="0px">
|
|
|
|
<el-form-item>
|
|
|
|
<el-input v-model="form.name" placeholder="手机号"></el-input>
|
|
|
@@ -76,11 +80,12 @@ |
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import SIdentify from '@/components/identify'
|
|
|
|
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList } from '@/api/aigc.js'
|
|
|
|
import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js'
|
|
|
|
export default {
|
|
|
|
name: 'aigc',
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
carouselList: [],
|
|
|
|
identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
|
|
|
|
identifyCode: '',
|
|
|
|
rules: {
|
|
|
@@ -159,8 +164,21 @@ export default { |
|
|
|
this.getshuzirenList()
|
|
|
|
this.getshuzirenZhiBoList()
|
|
|
|
this.getvideoList()
|
|
|
|
this.getlunboList()
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
async getlunboList () {
|
|
|
|
const { data: { message, data } } = await lunboList()
|
|
|
|
if (message === 'success') {
|
|
|
|
for (const iter of data.list) {
|
|
|
|
this.carouselList.push({
|
|
|
|
src: iter.image
|
|
|
|
// title: iter.link,
|
|
|
|
// subtitle: iter.link
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async getguanggao () {
|
|
|
|
const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
|
|
|
|
const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
|
|
|
@@ -221,31 +239,54 @@ export default { |
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#top {
|
|
|
|
.el-carousel__container {
|
|
|
|
height: 590px;
|
|
|
|
width: 100%;
|
|
|
|
background-image: url('../../assets/aigctop.png');
|
|
|
|
background-size: 100.5% 100%;
|
|
|
|
position: relative;
|
|
|
|
.txt {
|
|
|
|
top: 85%;
|
|
|
|
left: 25%;
|
|
|
|
position: absolute;
|
|
|
|
width: 500px;
|
|
|
|
}
|
|
|
|
.el-carousel__item{
|
|
|
|
background-size: 100%;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: flex-end;
|
|
|
|
::deep .el-carousel__container {
|
|
|
|
background-color: #00000000 !important;
|
|
|
|
height: 590px !important;
|
|
|
|
}
|
|
|
|
#txt {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
a {
|
|
|
|
line-height: 15px;
|
|
|
|
font-size: 18px;
|
|
|
|
flex-direction: column;
|
|
|
|
margin-bottom: 50px;
|
|
|
|
color: #FFFFFF;
|
|
|
|
.title {
|
|
|
|
font-size: 36px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #FFFFFF;
|
|
|
|
letter-spacing: 40px;
|
|
|
|
text-align: center;
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
|
|
|
}
|
|
|
|
.subtitle {
|
|
|
|
font-size: 16px;
|
|
|
|
font-weight: 400;
|
|
|
|
opacity: 0.5;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.lunbo {
|
|
|
|
background-size: auto;
|
|
|
|
background-position: center;
|
|
|
|
}
|
|
|
|
#top {
|
|
|
|
height: 590px;
|
|
|
|
width: 100%;
|
|
|
|
// background-image: url('../../assets/aigctop.png');
|
|
|
|
background-size: 100.5% 100%;
|
|
|
|
position: relative;
|
|
|
|
.el-form {
|
|
|
|
position: absolute;
|
|
|
|
top: 40%;
|
|
|
|
left: 55%;
|
|
|
|
z-index: 99;
|
|
|
|
.el-form-item {
|
|
|
|
width: 350px;
|
|
|
|
}
|
|
|
@@ -274,6 +315,52 @@ export default { |
|
|
|
width: 240px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.el-carousel__item {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
flex-direction: column;
|
|
|
|
width: 100%;
|
|
|
|
padding: 0 40px;
|
|
|
|
.txtcontent {
|
|
|
|
height: 50% !important;
|
|
|
|
width:100%;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
height: 26px;
|
|
|
|
font-size: 26px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #FFFFFF;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
img {
|
|
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
p {
|
|
|
|
text-align: left;
|
|
|
|
width: 85%;
|
|
|
|
font-size: 16px;
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: 30px;
|
|
|
|
color: #ffffff83;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.btn {
|
|
|
|
height: 20%;
|
|
|
|
width:100%;
|
|
|
|
position: relative;
|
|
|
|
.more {
|
|
|
|
position: absolute;
|
|
|
|
left: 0px;
|
|
|
|
background: none !important;
|
|
|
|
border: 1px solid #00F6BD;
|
|
|
|
opacity: 0.8;
|
|
|
|
border-radius: 4px;
|
|
|
|
color: #00F6BD;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#hot, #daliay {
|
|
|
|