元气智驾官网前端
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

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