元气智驾官网前端
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

551 行
13 KiB

  1. <template>
  2. <div class="aigc">
  3. <div id="top">
  4. <Swiper :banner-array="carouselList" />
  5. <el-form ref="form" :model="form" label-width="0px">
  6. <el-form-item>
  7. <el-button type="primary" class="createai" @click="loginFn">{{ isLogin ? '制作数字人' : '登录'}}</el-button>
  8. </el-form-item>
  9. </el-form>
  10. </div>
  11. <div id="hot">
  12. <div class="content">
  13. <div class="top">
  14. <div class="ai" v-for="(item, key) in ailist" :key="key">
  15. <img :src="item.image">
  16. <a> {{ item.title }}</a>
  17. </div>
  18. <div class="aitxt">
  19. <a class="title">{{ aitxt.title }}</a>
  20. <a class="content">{{ aitxt.content }}</a>
  21. <a :href="aitxt.link" targrt="_blank" class="atarget">
  22. <el-button round>制作数字人</el-button>
  23. </a>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="gg" v-if="gg1.image">
  29. <a :href="gg1.link" @click="bannerCk(gg1)">
  30. <img :src="gg1.image" alt="">
  31. </a>
  32. </div>
  33. <div id="daliay" v-show="aigczb.length > 0">
  34. <div class="content">
  35. <div class="top">
  36. <div id="szr">
  37. <a>正在直播</a>
  38. </div>
  39. <SwiperHor :banner-array="aigczb" type="image"/>
  40. </div>
  41. </div>
  42. <div class="gg gg2" v-if="gg2.image">
  43. <a :href="gg2.link" @click="bannerCk(gg2)">
  44. <img :src="gg2.image" alt="">
  45. </a>
  46. </div>
  47. </div>
  48. <div id="daliay2" v-show="aigcsp.length > 0">
  49. <div class="content">
  50. <div class="top">
  51. <div id="szr">
  52. <a>数字人短视频</a>
  53. </div>
  54. <SwiperHor :banner-array="aigcsp" type="video" />
  55. </div>
  56. </div>
  57. </div>
  58. <login v-if="loginFlag" />
  59. </div>
  60. </template>
  61. <script>
  62. /* eslint-disable */
  63. import Swiper from '@/components/swiper'
  64. import SwiperHor from '@/components/swiperHor'
  65. import { mapState } from 'vuex'
  66. import login from '@/components/login'
  67. import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList, lunboList } from '@/api/aigc.js'
  68. export default {
  69. name: 'aigc',
  70. data () {
  71. return {
  72. carouselList: [],
  73. rules: {
  74. verifycode: [{
  75. required: true,
  76. trigger: 'blur',
  77. validator: this.validateVerifycode
  78. }]
  79. },
  80. form: {
  81. phone: '',
  82. code: '',
  83. password: ''
  84. },
  85. ailist: [],
  86. aitxt: {},
  87. aigczb: [],
  88. aigcsp: [],
  89. gg1: {},
  90. gg2: {},
  91. loginFlag: false
  92. }
  93. },
  94. components: {
  95. Swiper,
  96. SwiperHor,
  97. login
  98. },
  99. computed: {
  100. ...mapState({
  101. isLogin: state => state.user.isLogin
  102. })
  103. },
  104. mounted () {
  105. this.getguanggao()
  106. this.getshuzirenremark()
  107. this.getshuzirenList()
  108. this.getshuzirenZhiBoList()
  109. this.getvideoList()
  110. this.getlunboList()
  111. },
  112. methods: {
  113. loginFn() {
  114. if (this.isLogin) {
  115. window.open('https://neuver.meta-autotv.com/')
  116. } else {
  117. this.loginFlag = true
  118. }
  119. },
  120. async getlunboList () {
  121. const { data: { code, data } } = await lunboList()
  122. if (code === 200) {
  123. this.carouselList = data.list
  124. }
  125. },
  126. async getguanggao () {
  127. const { data: { code: ggm1, data: gg1 } } = await guanggao(1)
  128. const { data: { code: ggm2, data: gg2 } } = await guanggao(2)
  129. if (ggm1 === 200 && ggm2 === 200) {
  130. this.gg1 = gg1
  131. this.gg2 = gg2
  132. }
  133. },
  134. bannerCk (item) {
  135. item.newOpen === 1 ? window.open(item.link) : window.location.href = item.link
  136. },
  137. async getshuzirenremark () {
  138. const { data: { code, data } } = await shuzirenremark()
  139. if (code === 200) {
  140. this.aitxt.title = data.title
  141. this.aitxt.content = data.remark
  142. this.aitxt.link = data.link
  143. }
  144. },
  145. async getshuzirenList () {
  146. const { data: { code, data } } = await shuzirenList()
  147. if (code === 200) {
  148. this.ailist = data.list
  149. }
  150. },
  151. async getshuzirenZhiBoList () {
  152. const { data: { code, data } } = await shuzirenZhiBoList()
  153. if (code === 200) {
  154. this.aigczb = data.list
  155. }
  156. },
  157. async getvideoList () {
  158. const { data: { code, data } } = await videoList()
  159. if (code === 200) {
  160. this.aigcsp = data.list
  161. }
  162. },
  163. changenews (item) {
  164. this.informationitem = item
  165. },
  166. changedepth (item) {
  167. this.depthitem = item
  168. },
  169. randomNum (min, max) {
  170. return Math.floor(Math.random() * (max - min) + min)
  171. }
  172. }
  173. }
  174. </script>
  175. <style lang="scss" scoped>
  176. .aigc{
  177. background: #E3E5EA;
  178. }
  179. .code {
  180. width: 138px;
  181. height: 40px;
  182. margin-left: 15px;
  183. }
  184. .el-carousel__container {
  185. height: 590px;
  186. }
  187. .el-carousel__item{
  188. background-size: 100%;
  189. background-repeat: no-repeat;
  190. display: flex;
  191. justify-content: center;
  192. align-items: flex-end;
  193. ::deep .el-carousel__container {
  194. background-color: #00000000 !important;
  195. height: 590px !important;
  196. }
  197. #txt {
  198. display: flex;
  199. flex-direction: column;
  200. margin-bottom: 50px;
  201. color: #FFFFFF;
  202. .title {
  203. font-size: 36px;
  204. font-weight: bold;
  205. text-align: center;
  206. margin-bottom: 15px;
  207. }
  208. .subtitle {
  209. font-size: 16px;
  210. font-weight: 400;
  211. opacity: 0.5;
  212. text-align: center;
  213. }
  214. }
  215. }
  216. #top {
  217. height: 590px;
  218. width: 100%;
  219. // background-image: url('../../assets/aigctop.png');
  220. background-size: 100.5% 100%;
  221. position: relative;
  222. .el-form {
  223. position: absolute;
  224. top: 40%;
  225. left: 55%;
  226. // z-index: 99;
  227. .el-form-item {
  228. width: 350px;
  229. }
  230. .el-form-item:nth-child(3) {
  231. :deep .el-form-item__content {
  232. display: flex;
  233. justify-content: space-between;
  234. align-items: center;
  235. }
  236. }
  237. .el-button {
  238. width: 100%;
  239. background-color: rgba(0, 0, 0, 0.384);
  240. border: 0px;
  241. }
  242. .createai {
  243. background-color:#07CAAF
  244. }
  245. a {
  246. color: #FFFFFF;
  247. }
  248. .nomargin {
  249. margin-bottom: 0px !important;
  250. }
  251. .identify {
  252. width: 240px;
  253. }
  254. }
  255. .el-carousel__item {
  256. display: flex;
  257. align-items: center;
  258. flex-direction: column;
  259. width: 100%;
  260. padding: 0 40px;
  261. .txtcontent {
  262. height: 50% !important;
  263. width:100%;
  264. .title {
  265. height: 26px;
  266. font-size: 26px;
  267. font-weight: bold;
  268. color: #FFFFFF;
  269. width: 100%;
  270. display: flex;
  271. align-items: center;
  272. img {
  273. margin-right: 10px;
  274. }
  275. }
  276. p {
  277. text-align: left;
  278. width: 85%;
  279. font-size: 16px;
  280. font-weight: 400;
  281. line-height: 30px;
  282. color: #ffffff83;
  283. }
  284. }
  285. .btn {
  286. height: 20%;
  287. width:100%;
  288. position: relative;
  289. .more {
  290. position: absolute;
  291. left: 0px;
  292. background: none !important;
  293. border: 1px solid #00F6BD;
  294. opacity: 0.8;
  295. border-radius: 4px;
  296. color: #00F6BD;
  297. }
  298. }
  299. }
  300. }
  301. #hot, #daliay, #daliay2 {
  302. width: 100%;
  303. background: #E3E5EA;
  304. display: flex;
  305. align-items: center;
  306. flex-direction: column;
  307. justify-content: center;
  308. padding-top: 30px;
  309. .content {
  310. width: 1200px;
  311. display: flex;
  312. flex-direction: column;
  313. justify-content: space-between;
  314. .top, .bottom {
  315. width: 100%;
  316. }
  317. .top {
  318. background-color: #FFFFFF;
  319. display: flex;
  320. justify-content: space-around;
  321. padding: 26px 0;
  322. position: relative;
  323. .ai {
  324. position: relative;
  325. width: 240px;
  326. a {
  327. bottom: 0;
  328. left: 0;
  329. position: absolute;
  330. font-size: 18px;
  331. font-weight: bold;
  332. color: #1C679F;
  333. line-height: 48px;
  334. width: 100%;
  335. margin-bottom: 15px;
  336. }
  337. img{
  338. width: 100%;
  339. border-radius: 10px;
  340. }
  341. }
  342. .aitxt {
  343. width: 344px;
  344. height: 85%;
  345. display: flex;
  346. flex-direction: column;
  347. align-items: center;
  348. justify-content: space-around;
  349. margin-right: 10px;
  350. .title {
  351. font-size: 24px;
  352. font-weight: bold;
  353. color: #00161C;
  354. line-height: 48px;
  355. }
  356. .content {
  357. width: 100%;
  358. text-align: left;
  359. font-size: 18px;
  360. font-family: Microsoft YaHei;
  361. font-weight: 400;
  362. color: #00161C;
  363. line-height: 30px;
  364. margin-top: 30px;
  365. }
  366. .el-button {
  367. border: none;
  368. background-color: #07CAAF;
  369. font-size: 14px;
  370. color: #FFFFFF;
  371. position: absolute;
  372. bottom: 46px;
  373. }
  374. .atarget {
  375. width: 100%;
  376. display: flex;
  377. justify-content: center;
  378. }
  379. }
  380. }
  381. .bottom {
  382. min-height: 120px;
  383. background-image: url('../../assets/bottom.png');
  384. background-size: 100% 100%;
  385. margin: 30px 0;
  386. }
  387. }
  388. }
  389. #daliay, #daliay2 {
  390. padding-top: 0;
  391. .content {
  392. .top {
  393. background-color: #ffffff00;
  394. display: flex;
  395. flex-direction: column;
  396. justify-content: space-between;
  397. #szr {
  398. margin-bottom: 30px;
  399. a {
  400. font-size: 30px;
  401. font-weight: bold;
  402. color: #00161C;
  403. line-height: 48px;
  404. display: inline-block;
  405. position: relative;
  406. z-index: 9;
  407. }
  408. a::after {
  409. content: '';
  410. position: absolute;
  411. left: 15%;
  412. bottom: 10px;
  413. width: 70%;
  414. height: 6px; /* 横线高度为文字高度的一半 */
  415. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  416. z-index: -1;
  417. }
  418. }
  419. #zb {
  420. margin-top: 40px;
  421. display: flex;
  422. width: 100%;
  423. height: 100%;
  424. align-items: center;
  425. img {
  426. height: 60px;
  427. width: 60px;
  428. }
  429. #zbitem::-webkit-scrollbar{
  430. display: none;
  431. }
  432. #zbitem {
  433. width: 100%;
  434. height: 100%;
  435. display: flex;
  436. overflow-x: auto;
  437. .imagezb {
  438. width: 220px;
  439. float: left;
  440. margin-right: 20px;
  441. position: relative;
  442. flex: 1;
  443. img {
  444. width: 220px;
  445. height: 370px;
  446. }
  447. .el-button {
  448. position: absolute;
  449. bottom: 82px;
  450. left: 50%;
  451. margin-left: -73px;
  452. border: none;
  453. background: #07CAAF;
  454. font-size: 18px;
  455. font-weight: bold;
  456. color: #FFFFFF;
  457. padding-top: 0px;
  458. padding-bottom: 0px;
  459. width: 146px;
  460. height: 44px;
  461. }
  462. .textzb {
  463. font-size: 18px;
  464. font-weight: bold;
  465. color: #030303;
  466. line-height: 16px;
  467. display: flex;
  468. flex-direction: column;
  469. align-items: center;
  470. justify-content: space-between;
  471. margin-top: 18px;
  472. a {
  473. display: inline-block;
  474. text-align: left;
  475. width: 130px;
  476. }
  477. .contentzb{
  478. margin-top: 10px;
  479. }
  480. }
  481. }
  482. .videozb {
  483. width: 220px;
  484. height: 400px;
  485. float: left;
  486. margin-right: 20px;
  487. position: relative;
  488. img {
  489. width: 220px;
  490. height: 370px;
  491. }
  492. .textzb {
  493. margin-top: 10px;
  494. line-height: 16px;
  495. display: flex;
  496. flex-direction: column;
  497. align-items: center;
  498. justify-content: space-between;
  499. height: 40px;
  500. width: 100%;
  501. a {
  502. width: 100%;
  503. display: inline-block;
  504. text-align: left;
  505. }
  506. .contentzb{
  507. margin-top: 10px;
  508. }
  509. }
  510. }
  511. .videozb::after {
  512. content: '';
  513. // z-index: 99;
  514. width: 55px;
  515. height: 55px;
  516. position: absolute;
  517. background-image: url('../../assets/play.png');
  518. background-size: 100%;
  519. left: 50%;
  520. margin-left: -27.5px;
  521. top: 40%;
  522. // z-index: 99;
  523. background-repeat: no-repeat;
  524. }
  525. }
  526. }
  527. }
  528. }
  529. }
  530. .gg {
  531. margin: 30px auto;
  532. width: 1200px;
  533. img {
  534. width: 100%;
  535. }
  536. }
  537. .gg2{
  538. margin-bottom: 30px;
  539. }
  540. #daliay2 {
  541. padding-bottom: 50px;
  542. }
  543. </style>