元气智驾官网前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

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