|
- <template>
- <div class="aigc">
- <div id="top">
- <Swiper :banner-array="carouselList" />
- <el-form ref="form" :model="form" label-width="0px">
- <el-form-item>
- <el-button type="primary" class="createai" @click="loginFn">{{ isLogin ? '制作数字人' : '登录'}}</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.image">
- <a> {{ item.title }}</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" v-if="gg1.image">
- <a :href="gg1.link" @click="bannerCk(gg1)">
- <img :src="gg1.image" alt="">
- </a>
- </div>
- <div id="daliay" v-show="aigczb.length > 0">
- <div class="content">
- <div class="top">
- <div id="szr">
- <a>正在直播</a>
- </div>
- <SwiperHor :banner-array="aigczb" type="image"/>
- </div>
- </div>
- <div class="gg gg2" v-if="gg2.image">
- <a :href="gg2.link" @click="bannerCk(gg2)">
- <img :src="gg2.image" alt="">
- </a>
- </div>
- </div>
- <div id="daliay2" v-show="aigcsp.length > 0">
- <div class="content">
- <div class="top">
- <div id="szr">
- <a>数字人短视频</a>
- </div>
- <SwiperHor :banner-array="aigcsp" type="video" />
- </div>
- </div>
- </div>
- <login v-if="loginFlag" />
- </div>
- </template>
- <script>
- /* eslint-disable */
- import Swiper from '@/components/swiper'
- import SwiperHor from '@/components/swiperHor'
- import { mapState } from 'vuex'
- import login from '@/components/login'
- import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js'
- export default {
- name: 'aigc',
- data () {
- return {
- carouselList: [],
- rules: {
- verifycode: [{
- required: true,
- trigger: 'blur',
- validator: this.validateVerifycode
- }]
- },
- form: {
- phone: '',
- code: '',
- password: ''
- },
- ailist: [],
- aitxt: {},
- aigczb: [],
- aigcsp: [],
- gg1: {},
- gg2: {},
- loginFlag: false
- }
- },
- components: {
- Swiper,
- SwiperHor,
- login
- },
- computed: {
- ...mapState({
- isLogin: state => state.user.isLogin
- })
- },
- mounted () {
- this.getguanggao()
- this.getshuzirenremark()
- this.getshuzirenList()
- this.getshuzirenZhiBoList()
- this.getvideoList()
- this.getlunboList()
- },
- methods: {
- loginFn() {
- if (this.isLogin) {
- window.open('https://neuver.meta-autotv.com/')
- } else {
- this.loginFlag = true
- }
- },
- async getlunboList () {
- const { data: { code, data } } = await lunboList()
- if (code === 200) {
- this.carouselList = data.list
- }
- },
- async getguanggao () {
- const { data: { code: ggm1, data: gg1 } } = await guanggao(1)
- const { data: { code: ggm2, data: gg2 } } = await guanggao(2)
- if (ggm1 === 200 && ggm2 === 200) {
- this.gg1 = gg1
- this.gg2 = gg2
- }
- },
- bannerCk (item) {
- item.newOpen === 1 ? window.open(item.link) : window.location.href = item.link
- },
- async getshuzirenremark () {
- const { data: { code, data } } = await shuzirenremark()
- if (code === 200) {
- this.aitxt.title = data.title
- this.aitxt.content = data.remark
- this.aitxt.link = data.link
- }
- },
- async getshuzirenList () {
- const { data: { code, data } } = await shuzirenList()
- if (code === 200) {
- this.ailist = data.list
- }
- },
- async getshuzirenZhiBoList () {
- const { data: { code, data } } = await shuzirenZhiBoList()
- if (code === 200) {
- this.aigczb = data.list
- }
- },
- async getvideoList () {
- const { data: { code, data } } = await videoList()
- if (code === 200) {
- this.aigcsp = data.list
- }
- },
- changenews (item) {
- this.informationitem = item
- },
- changedepth (item) {
- this.depthitem = item
- },
- randomNum (min, max) {
- return Math.floor(Math.random() * (max - min) + min)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .aigc{
- background: #E3E5EA;
- }
- .code {
- width: 138px;
- height: 40px;
- margin-left: 15px;
- }
- .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, #daliay2 {
- 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;
- }
- img{
- width: 100%;
- border-radius: 10px;
- }
- }
-
- .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, #daliay2 {
- 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: 30px;
- }
-
- #daliay2 {
- padding-bottom: 50px;
- }
- </style>
|