|
- <template>
- <div class="aigc">
- <div id="top">
- <Swiper :banner-array="carouselList" />
- <el-form ref="form" :model="form" label-width="0px">
- <el-form-item>
- <el-input v-model="form.name" placeholder="手机号"></el-input>
- </el-form-item>
- <el-form-item>
- <el-input v-model="form.name" placeholder="登陆密码"></el-input>
- </el-form-item>
- <el-form-item>
- <el-input class="identify" v-model="form.name" placeholder="验证码"></el-input>
- <s-identify :identifyCode="identifyCode"></s-identify>
- </el-form-item>
- <el-form-item class="nomargin">
- <el-button type="primary" >登陆</el-button>
- </el-form-item>
- <el-form-item class="nomargin">
- <a>使用短信登陆</a>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" class="createai">制作数字人</el-button>
- </el-form-item>
- </el-form>
- </div>
- <div id="hot">
- <div class="content">
- <div class="top">
- <div class="ai" v-for="(item, key) in ailist" :key="key">
- <img :src="item.img">
- <a> {{ item.label }}</a>
- </div>
- <div class="aitxt">
- <a class="title">{{ aitxt.title }}</a>
- <a class="content">{{ aitxt.content }}</a>
- <a :href="aitxt.link" targrt="_blank" class="atarget">
- <el-button round>制作数字人</el-button>
- </a>
- </div>
- </div>
- </div>
- </div>
- <div class="gg">
- <a :href="gg1.link" target="_blank">
- <img :src="gg1.img" alt="">
- </a>
- </div>
- <div id="daliay">
- <div class="content">
- <div class="top">
- <div id="szr">
- <a>数字人视频</a>
- </div>
- <SwiperHor :banner-array="aigczb" />
- <!-- <div id="zb">
- <img src="@/assets/left.png">
- <div id="zbitem">
- <template v-for="(item, index) in aigczb" >
- <div v-if="item.flag === 'image'" :key="index" class="imagezb">
- <img :src="item.img">
- <el-button>进入直播间</el-button>
- <div class="textzb">
- <a class="titlezb">主播: {{ item.name }}</a>
- <a class="contentzb">内容: {{ item.content }}</a>
- </div>
- </div>
- <div v-else class="videozb" :key="index">
- <img :src="item.img">
- <div class="textzb">
- <a class="titlezb">主播: {{ item.name }}</a>
- <a class="contentzb">内容: {{ item.content }}</a>
- </div>
- </div>
- </template>
- </div>
- <img src="@/assets/right.png">
- </div> -->
- </div>
- </div>
- <div class="gg gg2">
- <a :href="gg2.link" target="_blank">
- <img :src="gg2.img" alt="">
- </a>
- </div>
- </div>
- </div>
- </template>
- <script>
- import Swiper from '@/components/swiper'
- import SwiperHor from '@/components/swiperHor'
- import SIdentify from '@/components/identify'
- import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js'
- export default {
- name: 'aigc',
- data () {
- return {
- carouselList: [],
- identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
- identifyCode: '',
- rules: {
- verifycode: [{
- required: true,
- trigger: 'blur',
- validator: this.validateVerifycode
- }]
- },
- form: {
- name: '',
- region: '',
- date1: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: ''
- },
- ailist: [],
- aitxt: {},
- aigczb: [],
- gg1: {},
- gg2: {}
- }
- },
- components: {
- SIdentify,
- Swiper,
- SwiperHor
- },
- mounted () {
- this.identifyCode = ''
- this.makeCode(this.identifyCodes, 4)
- this.getguanggao()
- this.getshuzirenremark()
- this.getshuzirenList()
- this.getshuzirenZhiBoList()
- this.getvideoList()
- this.getlunboList()
- this.yidong()
- },
- methods: {
- async getlunboList () {
- const { data: { message, data } } = await lunboList()
- if (message === 'success') {
- this.carouselList = data.list
- }
- },
- async getguanggao () {
- const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
- const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
- if (ggm1 === 'success' && ggm2 === 'success') {
- this.gg1 = {
- img: gg1.image,
- link: gg1.link
- }
- this.gg2 = {
- img: gg2.image,
- link: gg2.link
- }
- }
- },
- async getshuzirenremark () {
- const { data: { message, data } } = await shuzirenremark()
- if (message === 'success') {
- this.aitxt.title = data.title
- this.aitxt.content = data.remark
- this.aitxt.link = data.link
- }
- },
- async getshuzirenList () {
- const { data: { message, data } } = await shuzirenList()
- if (message === 'success') {
- for (const iter of data.list) {
- this.ailist.push({
- img: iter.image,
- label: iter.title
- })
- }
- }
- },
- async getshuzirenZhiBoList () {
- const { data: { message, data } } = await shuzirenZhiBoList()
- if (message === 'success') {
- for (const iter of data.list) {
- this.aigczb.push({
- img: iter.image.split('?')[0],
- name: iter.title,
- content: iter.subTitle,
- flag: 'image'
- })
- }
- }
- },
- async getvideoList () {
- const { data: { message, data } } = await videoList()
- if (message === 'success') {
- for (const iter of data.list) {
- this.aigczb.push({
- img: iter.image.split('?')[0],
- name: iter.subTitle ? iter.subTitle : '主播名',
- content: iter.title,
- flag: 'video'
- })
- }
- }
- },
- changenews (item) {
- this.informationitem = item
- },
- changedepth (item) {
- this.depthitem = item
- },
- randomNum (min, max) {
- return Math.floor(Math.random() * (max - min) + min)
- },
- // 切换验证码
- refreshCode () {
- this.identifyCode = ''
- this.makeCode(this.identifyCodes, 4)
- },
- // 生成随机验证码
- makeCode (o, l) {
- for (let i = 0; i < l; i++) {
- this.identifyCode += this.identifyCodes[
- Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
- ]
- }
- },
- yidong () {
- const contentBox = document.getElementById('zbitem')
- const scrollBox = document.getElementById('zb')
- const imgWidth = 220
- this.scroll(contentBox, scrollBox, imgWidth)
- },
- scroll (contentBox, scrollBox, imgWidth) {
- setInterval(() => {
- scrollBox.scrollLeft++
- // 当一张图片恰好滚动至可视区域外
- if (scrollBox.scrollLeft % imgWidth === 0) {
- var el = contentBox.firstElementChild // 获取处于前面的图片
- contentBox.appendChild(el) // appendChild()具备剪切功能,无需手动删除旧节点
- }
- }, 2000)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .aigc{
- background: #E3E5EA;
- }
- .el-carousel__container {
- height: 590px;
- }
- .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;
- flex-direction: column;
- margin-bottom: 50px;
- color: #FFFFFF;
- .title {
- font-size: 36px;
- font-weight: bold;
- text-align: center;
- margin-bottom: 15px;
-
- }
- .subtitle {
- font-size: 16px;
- font-weight: 400;
- opacity: 0.5;
- text-align: 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;
- }
- .el-form-item:nth-child(3) {
- :deep .el-form-item__content {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- }
- .el-button {
- width: 100%;
- background-color: rgba(0, 0, 0, 0.384);
- border: 0px;
- }
- .createai {
- background-color:#07CAAF
- }
- a {
- color: #FFFFFF;
- }
- .nomargin {
- margin-bottom: 0px !important;
- }
- .identify {
- 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 {
- width: 100%;
- background: #E3E5EA;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- padding-top: 30px;
- .content {
- width: 1200px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .top, .bottom {
- width: 100%;
- }
- .top {
- background-color: #FFFFFF;
- display: flex;
- justify-content: space-around;
- padding: 26px 0;
- position: relative;
- .ai {
- position: relative;
- width: 240px;
- a {
- bottom: 0;
- left: 0;
- position: absolute;
- font-size: 18px;
- font-weight: bold;
- color: #1C679F;
- line-height: 48px;
- width: 100%;
- margin-bottom: 15px;
- }
- }
-
- .aitxt {
- 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;
- color: #00161C;
- line-height: 48px;
- }
- .content {
- width: 100%;
- 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;
- }
- .atarget {
- width: 100%;
- display: flex;
- justify-content: center;
- }
- }
- }
- .bottom {
- min-height: 120px;
- background-image: url('../../assets/bottom.png');
- background-size: 100% 100%;
- margin: 30px 0;
- }
- }
- }
- #daliay {
- padding-top: 0;
- .content {
- .top {
- background-color: #ffffff00;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- #szr {
- margin-bottom: 30px;
- a {
- font-size: 30px;
- font-weight: bold;
- color: #00161C;
- line-height: 48px;
- display: inline-block;
- position: relative;
- z-index: 9;
- }
- a::after {
- content: '';
- position: absolute;
- left: 15%;
- bottom: 10px;
- width: 70%;
- height: 6px; /* 横线高度为文字高度的一半 */
- background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
- z-index: -1;
- }
- }
- #zb {
- margin-top: 40px;
- display: flex;
- width: 100%;
- height: 100%;
- align-items: center;
- img {
- height: 60px;
- width: 60px;
- }
- #zbitem::-webkit-scrollbar{
- display: none;
- }
- #zbitem {
- width: 100%;
- height: 100%;
- display: flex;
- overflow-x: auto;
- .imagezb {
- width: 220px;
- float: left;
- margin-right: 20px;
- position: relative;
- flex: 1;
- img {
- width: 220px;
- height: 370px;
- }
- .el-button {
- position: absolute;
- bottom: 82px;
- left: 50%;
- margin-left: -73px;
- border: none;
- background: #07CAAF;
- font-size: 18px;
- font-weight: bold;
- color: #FFFFFF;
- padding-top: 0px;
- padding-bottom: 0px;
- width: 146px;
- height: 44px;
- }
- .textzb {
- font-size: 18px;
- font-weight: bold;
- color: #030303;
- line-height: 16px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- margin-top: 18px;
- a {
- display: inline-block;
- text-align: left;
- width: 130px;
- }
- .contentzb{
- margin-top: 10px;
- }
- }
-
- }
- .videozb {
- width: 220px;
- height: 400px;
- float: left;
- margin-right: 20px;
- position: relative;
- img {
- width: 220px;
- height: 370px;
- }
- .textzb {
- margin-top: 10px;
- line-height: 16px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- height: 40px;
- width: 100%;
- a {
- width: 100%;
- display: inline-block;
- text-align: left;
- }
- .contentzb{
- margin-top: 10px;
- }
- }
- }
- .videozb::after {
- content: '';
- z-index: 99;
- width: 55px;
- height: 55px;
- position: absolute;
- background-image: url('../../assets/play.png');
- background-size: 100%;
- left: 50%;
- margin-left: -27.5px;
- top: 40%;
- z-index: 99;
- background-repeat: no-repeat;
- }
- }
- }
- }
- }
- }
-
- .gg {
- margin: 30px auto;
- width: 1200px;
- img {
- width: 100%;
- }
- }
- .gg2{
- margin-bottom: 200px;
- }
- </style>
|