元气智驾官网前端
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.
 
 
 
 

470 lines
12 KiB

  1. <template>
  2. <div>
  3. <div id="top">
  4. <div class="txt">
  5. <a>META</a>
  6. <a>AUTO</a>
  7. </div>
  8. <el-form ref="form" :model="form" label-width="0px">
  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 v-model="form.name" placeholder="登陆密码"></el-input>
  14. </el-form-item>
  15. <el-form-item>
  16. <el-input class="identify" v-model="form.name" placeholder="验证码"></el-input>
  17. <s-identify :identifyCode="identifyCode"></s-identify>
  18. </el-form-item>
  19. <el-form-item class="nomargin">
  20. <el-button type="primary" >登陆</el-button>
  21. </el-form-item>
  22. <el-form-item class="nomargin">
  23. <a>使用短信登陆</a>
  24. </el-form-item>
  25. <el-form-item>
  26. <el-button type="primary" class="createai">制作数字人</el-button>
  27. </el-form-item>
  28. </el-form>
  29. </div>
  30. <div id="hot">
  31. <div class="content">
  32. <div class="top">
  33. <div class="ai" v-for="(item, key) in ailist" :key="key">
  34. <img :src="item.img">
  35. <a> {{ item.label }}</a>
  36. </div>
  37. <div class="aitxt">
  38. <a class="title">{{ aitxt.title }}</a>
  39. <a class="content">{{ aitxt.content }}</a>
  40. <el-button round>制作数字人</el-button>
  41. </div>
  42. </div>
  43. <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/>
  44. </div>
  45. </div>
  46. <div id="daliay">
  47. <div class="content">
  48. <div class="top">
  49. <div id="szr">
  50. <a>数字人视频</a>
  51. </div>
  52. <div id="zb">
  53. <template v-for="(item, index) in aigczb" >
  54. <div v-if="item.flag === 'image'" :key="index" class="imagezb">
  55. <img :src="item.img">
  56. <el-button>进入直播间</el-button>
  57. <div class="textzb">
  58. <a class="titlezb">主播: {{ item.name }}</a>
  59. <a class="contentzb">内容: {{ item.content }}</a>
  60. </div>
  61. </div>
  62. <div v-else class="videozb" :key="index">
  63. <img :src="item.img">
  64. <div class="textzb">
  65. <a class="titlezb">主播: {{ item.name }}</a>
  66. <a class="contentzb">内容: {{ item.content }}</a>
  67. </div>
  68. </div>
  69. </template>
  70. </div>
  71. </div>
  72. <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/>
  73. </div>
  74. </div>
  75. </div>
  76. </template>
  77. <script>
  78. import SIdentify from '@/components/identify'
  79. import { guanggao, shuzirenremark, shuzirenList, shuzirenZhiBoList, videoList } from '@/api/aigc.js'
  80. export default {
  81. name: 'aigc',
  82. data () {
  83. return {
  84. identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
  85. identifyCode: '',
  86. rules: {
  87. verifycode: [{
  88. required: true,
  89. trigger: 'blur',
  90. validator: this.validateVerifycode
  91. }]
  92. },
  93. form: {
  94. name: '',
  95. region: '',
  96. date1: '',
  97. date2: '',
  98. delivery: false,
  99. type: [],
  100. resource: '',
  101. desc: ''
  102. },
  103. ailist: [
  104. {
  105. img: '/ai1.png',
  106. label: 'XWOM 002'
  107. },
  108. {
  109. img: '/ai2.png',
  110. label: '数字人ACER'
  111. },
  112. {
  113. img: '/ai3.png',
  114. label: '车助手002'
  115. }
  116. ],
  117. aitxt: {
  118. title: 'ACER助力车企新势力',
  119. content: '作为国产豪华大皮卡山海炮的越野版本,山海炮性能版被称为“国产皮卡扛把子”。新车基于长城坦克平台开发,搭载国内最强的自研3.0T'
  120. },
  121. aigczb: [
  122. {
  123. img: '/aigc_img5.png',
  124. name: '主播名',
  125. content: '新车选购',
  126. flag: 'image'
  127. },
  128. {
  129. img: '/aigc_img1.png',
  130. name: '主播名',
  131. content: '新车选购',
  132. flag: 'image'
  133. },
  134. {
  135. img: '/aigc_img2.png',
  136. name: '主播名',
  137. content: '新车选购',
  138. flag: 'image'
  139. },
  140. {
  141. img: '/aigc_img3.png',
  142. name: '丰田锋兰达值得买吗?',
  143. content: '年底购车多少钱能落地价?',
  144. flag: 'video'
  145. }
  146. ],
  147. gg1: '',
  148. gg2: ''
  149. }
  150. },
  151. components: {
  152. SIdentify
  153. },
  154. mounted () {
  155. this.identifyCode = ''
  156. this.makeCode(this.identifyCodes, 4)
  157. this.getguanggao()
  158. this.getshuzirenremark()
  159. this.getshuzirenList()
  160. this.getshuzirenZhiBoList()
  161. this.getvideoList()
  162. },
  163. methods: {
  164. async getguanggao () {
  165. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  166. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  167. if (ggm1 === 'success' && ggm2 === 'success') {
  168. this.gg1 = gg1.image
  169. this.gg2 = gg2.image
  170. }
  171. },
  172. async getshuzirenremark () {
  173. const { data: { message, data } } = await shuzirenremark()
  174. if (message === 'success') {
  175. this.aitxt.title = data.title
  176. this.aitxt.content = data.remark
  177. }
  178. },
  179. async getshuzirenList () {
  180. const { data: { message, data } } = await shuzirenList()
  181. if (message === 'success') {
  182. console.log(data)
  183. }
  184. },
  185. async getshuzirenZhiBoList () {
  186. const { data: { message, data } } = await shuzirenZhiBoList()
  187. if (message === 'success') {
  188. console.log(data)
  189. }
  190. },
  191. async getvideoList () {
  192. const { data: { message, data } } = await videoList()
  193. if (message === 'success') {
  194. console.log(data)
  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. }
  220. }
  221. </script>
  222. <style lang="scss" scoped>
  223. #top {
  224. height: 590px;
  225. width: 100%;
  226. background-image: url('../../assets/aigctop.png');
  227. background-size: 100.5% 100%;
  228. position: relative;
  229. .txt {
  230. top: 85%;
  231. left: 25%;
  232. position: absolute;
  233. width: 500px;
  234. display: flex;
  235. justify-content: space-between;
  236. a {
  237. line-height: 15px;
  238. font-size: 18px;
  239. font-weight: bold;
  240. color: #FFFFFF;
  241. letter-spacing: 40px;
  242. }
  243. }
  244. .el-form {
  245. position: absolute;
  246. top: 40%;
  247. left: 55%;
  248. .el-form-item {
  249. width: 350px;
  250. }
  251. .el-form-item:nth-child(3) {
  252. :deep .el-form-item__content {
  253. display: flex;
  254. justify-content: space-between;
  255. align-items: center;
  256. }
  257. }
  258. .el-button {
  259. width: 100%;
  260. background-color: rgba(0, 0, 0, 0.384);
  261. border: 0px;
  262. }
  263. .createai {
  264. background-color:#07CAAF
  265. }
  266. a {
  267. color: #FFFFFF;
  268. }
  269. .nomargin {
  270. margin-bottom: 0px !important;
  271. }
  272. .identify {
  273. width: 240px;
  274. }
  275. }
  276. }
  277. #hot, #daliay {
  278. width: 100%;
  279. background: #E3E5EA;
  280. display: flex;
  281. align-items: center;
  282. flex-direction: column;
  283. justify-content: center;
  284. padding-top: 30px;
  285. .content {
  286. width: 1200px;
  287. height: 90%;
  288. display: flex;
  289. flex-direction: column;
  290. justify-content: space-between;
  291. .top, .bottom {
  292. width: 100%;
  293. }
  294. .top {
  295. margin-bottom: 30px;
  296. background-color: #FFFFFF;
  297. display: flex;
  298. align-items: center;
  299. justify-content: space-around;
  300. padding: 20px 0;
  301. .ai {
  302. position: relative;
  303. a {
  304. bottom: 0;
  305. left: 0;
  306. position: absolute;
  307. font-size: 18px;
  308. font-weight: bold;
  309. color: #1C679F;
  310. line-height: 48px;
  311. width: 100%;
  312. }
  313. }
  314. .aitxt {
  315. width: 250px;
  316. height: 85%;
  317. display: flex;
  318. flex-direction: column;
  319. align-items: center;
  320. justify-content: space-around;
  321. .title {
  322. font-size: 24px;
  323. font-weight: bold;
  324. color: #00161C;
  325. line-height: 48px;
  326. }
  327. .content {
  328. width: 100%;
  329. min-width: 100px;
  330. text-align: left;
  331. font-size: 18px;
  332. font-family: Microsoft YaHei;
  333. font-weight: 400;
  334. color: #00161C;
  335. line-height: 30px;
  336. }
  337. .el-button {
  338. border: none;
  339. background-color: #07CAAF;
  340. font-size: 14px;
  341. color: #FFFFFF;
  342. }
  343. }
  344. }
  345. .bottom {
  346. min-height: 120px;
  347. background-image: url('../../assets/bottom.png');
  348. background-size: 100% 100%;
  349. margin-bottom: 30px;
  350. }
  351. }
  352. }
  353. #daliay {
  354. padding-top: 0;
  355. .content {
  356. .top {
  357. background-color: #ffffff00;
  358. display: flex;
  359. flex-direction: column;
  360. justify-content: space-between;
  361. #szr {
  362. a {
  363. font-size: 30px;
  364. font-weight: bold;
  365. color: #00161C;
  366. line-height: 48px;
  367. display: inline-block;
  368. position: relative;
  369. z-index: 9;
  370. }
  371. a::after {
  372. content: '';
  373. position: absolute;
  374. left: 15%;
  375. bottom: 10px;
  376. width: 70%;
  377. height: 6px; /* 横线高度为文字高度的一半 */
  378. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  379. z-index: -1;
  380. }
  381. }
  382. #zb {
  383. .imagezb {
  384. width: 220px;
  385. height: 400px;
  386. float: left;
  387. margin-right: 20px;
  388. position: relative;
  389. img {
  390. width: 220px;
  391. height: 370px;
  392. }
  393. .el-button {
  394. position: absolute;
  395. bottom: 60px;
  396. left: 50px;
  397. border: none;
  398. background: #07CAAF;
  399. font-size: 18px;
  400. font-weight: bold;
  401. color: #FFFFFF;
  402. line-height: 48px;
  403. padding-top: 0px;
  404. padding-bottom: 0px;
  405. }
  406. .textzb {
  407. font-size: 18px;
  408. font-weight: bold;
  409. color: #030303;
  410. line-height: 16px;
  411. display: flex;
  412. flex-direction: column;
  413. align-items: center;
  414. justify-content: space-between;
  415. height: 40px;
  416. a {
  417. display: inline-block;
  418. text-align: left;
  419. width: 130px;
  420. }
  421. }
  422. }
  423. .videozb {
  424. width: 240px;
  425. height: 400px;
  426. float: left;
  427. margin-right: 60px;
  428. position: relative;
  429. img {
  430. width: 240px;
  431. height: 370px;
  432. }
  433. .textzb {
  434. margin-top: 10px;
  435. line-height: 16px;
  436. display: flex;
  437. flex-direction: column;
  438. align-items: center;
  439. justify-content: space-between;
  440. height: 40px;
  441. width: 100%;
  442. a {
  443. width: 100%;
  444. display: inline-block;
  445. text-align: left;
  446. }
  447. }
  448. }
  449. .videozb::after {
  450. content: '';
  451. z-index: 99;
  452. width: 67px;
  453. height: 67px;
  454. position: absolute;
  455. background-image: url('../../assets/play.png');
  456. left: 40%;
  457. top: 40%;
  458. z-index: 99;
  459. background-repeat: no-repeat;
  460. }
  461. }
  462. }
  463. }
  464. }
  465. </style>