|
- <template>
- <div>
- <div id="top">
- <div class="txt">
- <a>META</a>
- <a>AUTO</a>
- </div>
- <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>
- <el-button round>制作数字人</el-button>
- </div>
- </div>
- <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/>
- </div>
- </div>
- <div id="daliay">
- <div class="content">
- <div class="top">
- <div id="szr">
- <a>数字人视频</a>
- </div>
- <div id="zb">
- <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>
- </div>
- <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/>
- </div>
- </div>
- </div>
- </template>
- <script>
- import SIdentify from '@/components/identify'
- import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList } from '@/api/aigc.js'
- export default {
- name: 'aigc',
- data () {
- return {
- identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
- identifyCode: '',
- rules: {
- verifycode: [{
- required: true,
- trigger: 'blur',
- validator: this.validateVerifycode
- }]
- },
- form: {
- name: '',
- region: '',
- date1: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: ''
- },
- ailist: [
- {
- img: '/ai1.png',
- label: 'XWOM 002'
- },
- {
- img: '/ai2.png',
- label: '数字人ACER'
- },
- {
- img: '/ai3.png',
- label: '车助手002'
- }
- ],
- aitxt: {
- title: 'ACER助力车企新势力',
- content: '作为国产豪华大皮卡山海炮的越野版本,山海炮性能版被称为“国产皮卡扛把子”。新车基于长城坦克平台开发,搭载国内最强的自研3.0T'
- },
- aigczb: [
- {
- img: '/aigc_img5.png',
- name: '主播名',
- content: '新车选购',
- flag: 'image'
- },
- {
- img: '/aigc_img1.png',
- name: '主播名',
- content: '新车选购',
- flag: 'image'
- },
- {
- img: '/aigc_img2.png',
- name: '主播名',
- content: '新车选购',
- flag: 'image'
- },
- {
- img: '/aigc_img3.png',
- name: '丰田锋兰达值得买吗?',
- content: '年底购车多少钱能落地价?',
- flag: 'video'
- }
- ],
- gg1: '',
- gg2: ''
- }
- },
- components: {
- SIdentify
- },
- mounted () {
- this.identifyCode = ''
- this.makeCode(this.identifyCodes, 4)
- this.getguanggao()
- this.getshuzirenremark()
- this.getshuzirenList()
- this.getshuzirenZhiBoList()
- this.getvideoList()
- },
- methods: {
- 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 = gg1.image
- this.gg2 = gg2.image
- }
- },
- async getshuzirenremark () {
- const { data: { message, data } } = await shuzirenremark()
- if (message === 'success') {
- this.aitxt.title = data.title
- this.aitxt.content = data.remark
- }
- },
- async getshuzirenList () {
- const { data: { message, data } } = await shuzirenList()
- if (message === 'success') {
- console.log(data)
- }
- },
- async getshuzirenZhiBoList () {
- const { data: { message, data } } = await shuzirenZhiBoList()
- if (message === 'success') {
- console.log(data)
- }
- },
- async getvideoList () {
- const { data: { message, data } } = await videoList()
- if (message === 'success') {
- console.log(data)
- }
- },
- 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)
- ]
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- #top {
- 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;
- display: flex;
- justify-content: space-between;
- a {
- line-height: 15px;
- font-size: 18px;
- font-weight: bold;
- color: #FFFFFF;
- letter-spacing: 40px;
- }
- }
- .el-form {
- position: absolute;
- top: 40%;
- left: 55%;
- .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;
- }
- }
- }
-
- #hot, #daliay {
- width: 100%;
- background: #E3E5EA;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- padding-top: 30px;
- .content {
- width: 1200px;
- height: 90%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .top, .bottom {
- width: 100%;
- }
- .top {
- margin-bottom: 30px;
- background-color: #FFFFFF;
- display: flex;
- align-items: center;
- justify-content: space-around;
- padding: 20px 0;
- .ai {
- position: relative;
- a {
- bottom: 0;
- left: 0;
- position: absolute;
- font-size: 18px;
- font-weight: bold;
- color: #1C679F;
- line-height: 48px;
- width: 100%;
- }
- }
-
- .aitxt {
- width: 250px;
- height: 85%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- .title {
- font-size: 24px;
- font-weight: bold;
- color: #00161C;
- line-height: 48px;
- }
- .content {
- width: 100%;
- min-width: 100px;
- text-align: left;
- font-size: 18px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #00161C;
- line-height: 30px;
- }
- .el-button {
- border: none;
- background-color: #07CAAF;
- font-size: 14px;
- color: #FFFFFF;
- }
- }
- }
- .bottom {
- min-height: 120px;
- background-image: url('../../assets/bottom.png');
- background-size: 100% 100%;
- margin-bottom: 30px;
- }
- }
- }
- #daliay {
- padding-top: 0;
- .content {
- .top {
- background-color: #ffffff00;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- #szr {
- 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 {
- .imagezb {
- width: 220px;
- height: 400px;
- float: left;
- margin-right: 20px;
- position: relative;
- img {
- width: 220px;
- height: 370px;
- }
- .el-button {
- position: absolute;
- bottom: 60px;
- left: 50px;
- border: none;
- background: #07CAAF;
- font-size: 18px;
- font-weight: bold;
- color: #FFFFFF;
- line-height: 48px;
- padding-top: 0px;
- padding-bottom: 0px;
- }
- .textzb {
- font-size: 18px;
- font-weight: bold;
- color: #030303;
- line-height: 16px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- height: 40px;
- a {
- display: inline-block;
- text-align: left;
- width: 130px;
- }
- }
-
- }
- .videozb {
- width: 240px;
- height: 400px;
- float: left;
- margin-right: 60px;
- position: relative;
- img {
- width: 240px;
- 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;
- }
- }
- }
- .videozb::after {
- content: '';
- z-index: 99;
- width: 67px;
- height: 67px;
- position: absolute;
- background-image: url('../../assets/play.png');
- left: 40%;
- top: 40%;
- z-index: 99;
- background-repeat: no-repeat;
- }
- }
- }
- }
- }
- </style>
|