Confronta commit

...

67 Commit

Autore SHA1 Messaggio Data
  chutingting 894e0b73f4 edit video 1 anno fa
  HolyKnightIX a53c1fde5c upload 1 anno fa
  HolyKnightIX d5e5019189 upload 1 anno fa
  congzc 274144f94d 1 1 anno fa
  congzc 1adb25dc21 1 1 anno fa
  congzc 02699e9ba6 Merge branch 'YWQ' of https://git.malls.iformall.com/suimang/home_pc into YWQ 1 anno fa
  congzc 445fd8cd42 跳转到照片说话 1 anno fa
  congzc 0cbcf1b565 1 1 anno fa
  congzc 3b7b4af0d6 1 1 anno fa
  congzc f806f8b928 1 1 anno fa
  congzc 7da58ce307 1 1 anno fa
  congzc 39af4e3769 1 1 anno fa
  congzc 1fab466807 1 1 anno fa
  congzc 2f0f8754ed 1 1 anno fa
  congzc f31731df81 首页更换视频 1 anno fa
  congzc d51445f51f 轮播图 1 anno fa
  congzc 75b9344781 文案改版 1 anno fa
  HolyKnightIX 6f0ed1e198 upload 1 anno fa
  HolyKnightIX 761530540c upload 1 anno fa
  HolyKnightIX 9a2ab10ce0 upload 1 anno fa
  HolyKnightIX 63ca69d374 upload 1 anno fa
  HolyKnightIX 6a401f7b17 upload 1 anno fa
  HolyKnightIX 18a07d0eaa final push 1 anno fa
  HolyKnightIX ac5049eb5b upload 1 anno fa
  HolyKnightIX 74ee2c48cb upload 1 anno fa
  HolyKnightIX 5dd7a35be3 upload 1 anno fa
  congzc 458e8dffd9 2 1 anno fa
  HolyKnightIX eadc394716 upload 1 anno fa
  HolyKnightIX 25c97f740e uplaod 1 anno fa
  HolyKnightIX afb2b1c56e upload 1 anno fa
  congzc edddd7a327 1 1 anno fa
  congzc 456071af4d 1 1 anno fa
  congzc a608f22e63 1 1 anno fa
  congzc df30289cad 1 1 anno fa
  HolyKnightIX ad91859452 upload 1 anno fa
  HolyKnightIX b9601edbbd upload 1 anno fa
  HolyKnightIX f8b79d2776 upload 1 anno fa
  congzc 87af8b6903 1 1 anno fa
  congzc 5ac88ba082 2 1 anno fa
  congzc dd84270e6c 首行缩进 1 anno fa
  congzc 8718bf091c 抖音二维码 1 anno fa
  congzc 9d26207060 图片间距调整 1 anno fa
  congzc c571fe0c1e 大事件轮播 1 anno fa
  congzc 39deacb5b4 底部表单校验优化 1 anno fa
  congzc 309685118d 处理三张图片文字和表单接口 1 anno fa
  congzc d34fbdec30 表单验证 1 anno fa
  congzc c567304b23 英文翻译和合作伙伴 1 anno fa
  congzc 287949fc32 node-sass改版 1 anno fa
  congzc a960dd4795 官网底部备案号修改 1 anno fa
  HolyKnightIX c566c5c3ba upload 2 anni fa
  HolyKnightIX 62072a7142 upload 2 anni fa
  HolyKnightIX df7c540a04 upload 2 anni fa
  HolyKnightIX ef8b2345c3 update 2 anni fa
  HolyKnightIX 2500090d8a upload 2 anni fa
  HolyKnightIX f3cf15a77f 4pagesChanges 2 anni fa
  HolyKnightIX 10195e0b9d upload 2 anni fa
  HolyKnightIX fdb95c7041 upload 2 anni fa
  HolyKnightIX 1d70842c83 Pages * 4 ,finished 2 anni fa
  HolyKnightIX 9293288a01 upload 2 anni fa
  HolyKnightIX 6c75430042 upload 2 anni fa
  HolyKnightIX 4e5868de65 push 2 anni fa
  HolyKnightIX dace27be49 new pages *4 2 anni fa
  HolyKnightIX 3823200da6 Merge branch 'YWQ' of https://git.malls.iformall.com/suimang/home_pc into YWQ 2 anni fa
  HolyKnightIX e6e00ce12e change 2 anni fa
  HolyKnightIX 34c1224f86 deBug 2 anni fa
  HolyKnightIX 92065f58b8 half 2 anni fa
  HolyKnightIX 9343f32702 upload 2 anni fa
84 ha cambiato i file con 14983 aggiunte e 13190 eliminazioni
  1. +2
    -1
      .gitignore
  2. +6
    -0
      README.md
  3. +0
    -11229
      package-lock.json
  4. +31
    -31
      package.json
  5. +19
    -17
      src/App.vue
  6. BIN
      src/assets/icon/input.png
  7. BIN
      src/assets/icon/voice.png
  8. BIN
      src/assets/img/BG (2).png
  9. BIN
      src/assets/img/BG@2x.png
  10. BIN
      src/assets/img/LiLei.png
  11. BIN
      src/assets/img/LiLei@2x.png
  12. BIN
      src/assets/img/demo.png
  13. BIN
      src/assets/img/dy.jpg
  14. BIN
      src/assets/img/dy.png
  15. BIN
      src/assets/img/dy_en.png
  16. BIN
      src/assets/img/earth.png
  17. BIN
      src/assets/img/metavatar_generate/model2-IMG@2x.png
  18. BIN
      src/assets/img/metavatar_generate/model3-IMG@2x.png
  19. BIN
      src/assets/img/metavatar_generate/model4-IMG@2x.png
  20. BIN
      src/assets/img/metavatar_generate/suiMang_generate@2x.png
  21. BIN
      src/assets/img/metavatar_generate/组 41(1).png
  22. BIN
      src/assets/img/metavatar_generate/组 41(2).png
  23. BIN
      src/assets/img/metavatar_generate/组 41.png
  24. BIN
      src/assets/img/metavatar_generate/组 41@2x(1).png
  25. BIN
      src/assets/img/metavatar_generate/组 41@2x(2).png
  26. BIN
      src/assets/img/metavatar_generate/组 52 拷贝.png
  27. BIN
      src/assets/img/metavatar_generate/组 55.png
  28. BIN
      src/assets/img/metavatar_generate/组 55@2x(1).png
  29. BIN
      src/assets/img/metavatar_live/001.png
  30. BIN
      src/assets/img/metavatar_live/001@2x.png
  31. BIN
      src/assets/img/metavatar_live/002.png
  32. BIN
      src/assets/img/metavatar_live/002@2x.png
  33. BIN
      src/assets/img/metavatar_live/003.png
  34. BIN
      src/assets/img/metavatar_live/003@2x.png
  35. BIN
      src/assets/img/metavatar_live/004.png
  36. BIN
      src/assets/img/metavatar_live/004@2x.png
  37. BIN
      src/assets/img/metavatar_live/3.png
  38. BIN
      src/assets/img/metavatar_live/3@2x.png
  39. BIN
      src/assets/img/metavatar_live/picInside@2x.png
  40. BIN
      src/assets/img/metavatar_live/suiMang_live2@2x.png
  41. BIN
      src/assets/img/metavatar_live/suiMang_live@2x.png
  42. BIN
      src/assets/img/metavatar_live/组 3545 拷贝.png
  43. BIN
      src/assets/img/metavatar_live/组 41(1).png
  44. BIN
      src/assets/img/metavatar_live/组 41.png
  45. BIN
      src/assets/img/metavatar_live/组 41@2x(1).png
  46. BIN
      src/assets/img/metavatar_shadow/imgList1@2x.png
  47. BIN
      src/assets/img/metavatar_shadow/imgList1@2xEnglish.png
  48. BIN
      src/assets/img/metavatar_shadow/imgList2@2x.png
  49. BIN
      src/assets/img/metavatar_shadow/imgList2@2xEnglish.png
  50. BIN
      src/assets/img/metavatar_shadow/imgList3@2x.png
  51. BIN
      src/assets/img/metavatar_shadow/imgList3@2xEnglish.png
  52. BIN
      src/assets/img/metavatar_shadow/scriptDrive@2x.png
  53. BIN
      src/assets/img/metavatar_shadow/suiMang_shadow@2x.png
  54. BIN
      src/assets/img/metavatar_shadow/组 3544(1).png
  55. BIN
      src/assets/img/metavatar_shadow/组 3544(2).png
  56. BIN
      src/assets/img/metavatar_shadow/组 3544.png
  57. BIN
      src/assets/img/metavatar_shadow/组 41.png
  58. BIN
      src/assets/img/metavatar_shadow/组 45 拷贝.png
  59. BIN
      src/assets/img/module_5_bg_cut.png
  60. BIN
      src/assets/img/parter7.png
  61. BIN
      src/assets/img/partner6.png
  62. BIN
      src/assets/img/pause.png
  63. BIN
      src/assets/img/play.png
  64. BIN
      src/assets/img/vx.jpg
  65. BIN
      src/assets/img/vx_en.png
  66. BIN
      src/assets/img/zhongzhiren.jpg
  67. BIN
      src/assets/img/zhongzhiren.png
  68. BIN
      src/assets/video/P1 横版_x264.mp4
  69. BIN
      src/assets/video/video2.mp4
  70. +46
    -22
      src/components/aboutUs/aboutUs.vue
  71. +591
    -306
      src/components/common/tail.vue
  72. +275
    -163
      src/components/common/top.vue
  73. +2316
    -1379
      src/components/home/home.vue
  74. +609
    -0
      src/components/views/generate.vue
  75. +651
    -0
      src/components/views/live.vue
  76. +504
    -0
      src/components/views/realTime.vue
  77. +463
    -0
      src/components/views/realTimeC.vue
  78. +650
    -0
      src/components/views/shadow.vue
  79. +563
    -0
      src/components/views/turing.vue
  80. +7
    -7
      src/registerServiceWorker.js
  81. +43
    -11
      src/router/index.js
  82. +8
    -7
      src/store/modules/public.js
  83. +19
    -17
      vue.config.js
  84. +8180
    -0
      yarn.lock

+ 2
- 1
.gitignore Vedi File

@@ -2,7 +2,6 @@
node_modules
/dist


# local env files
.env.local
.env.*.local
@@ -21,3 +20,5 @@ pnpm-debug.log*
*.njsproj
*.sln
*.sw?
.7z
.zip

+ 6
- 0
README.md Vedi File

@@ -1,19 +1,25 @@
# home

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

若要稳定运行此项目,请确保node版本为v16.14.0

+ 0
- 11229
package-lock.json
File diff soppresso perché troppo grande
Vedi File


+ 31
- 31
package.json Vedi File

@@ -1,31 +1,31 @@
{
"name": "Metavatar",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"element-ui": "^2.15.9",
"lib-flexible": "^0.3.2",
"postcss-px2rem-exclude": "0.0.6",
"register-service-worker": "^1.7.1",
"swiper": "^4.5.1",
"video.js": "^7.20.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-pwa": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
{
"name": "Metavatar",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"element-ui": "^2.15.9",
"lib-flexible": "^0.3.2",
"postcss-px2rem-exclude": "0.0.6",
"register-service-worker": "^1.7.1",
"swiper": "^4.5.1",
"video.js": "^7.20.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-pwa": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"node-sass": "6.0.1",
"sass-loader": "7.0.3",
"vue-template-compiler": "^2.6.11"
}
}

+ 19
- 17
src/App.vue Vedi File

@@ -1,37 +1,39 @@
<template>
<div id="app">
<top/>
<top />
<transition name="app" mode="out-in">
<router-view></router-view>
</transition>
<tail/>
<tail />
</div>
</template>
<script>
import top from "./components/common/top"
import tail from "./components/common/tail"
import top from "./components/common/top";
import tail from "./components/common/tail";
export default {
components:{
components: {
top,
tail
tail,
},
data(){
return{}
data() {
return {};
},
}
methods: {},
created() {},
};
</script>


<style lang="scss">
body,p{
body,
p {
margin: 0 0;
padding: 0 0;
}
input{
background:none;
outline:none;
border:none;
padding: 0;
margin: 0;
input {
background: none;
outline: none;
border: none;
padding: 0;
margin: 0;
}
</style>

BIN
src/assets/icon/input.png Vedi File

Prima Dopo
Larghezza: 600  |  Altezza: 600  |  Dimensione: 12 KiB

BIN
src/assets/icon/voice.png Vedi File

Prima Dopo
Larghezza: 400  |  Altezza: 400  |  Dimensione: 14 KiB

BIN
src/assets/img/BG (2).png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1080  |  Dimensione: 2.0 MiB

BIN
src/assets/img/BG@2x.png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 6.2 MiB

BIN
src/assets/img/LiLei.png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1080  |  Dimensione: 2.1 MiB

BIN
src/assets/img/LiLei@2x.png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 5.5 MiB

BIN
src/assets/img/demo.png Vedi File

Prima Dopo
Larghezza: 1937  |  Altezza: 1658  |  Dimensione: 1.5 MiB

BIN
src/assets/img/dy.jpg Vedi File

Prima Dopo
Larghezza: 488  |  Altezza: 488  |  Dimensione: 162 KiB

BIN
src/assets/img/dy.png Vedi File

Prima Dopo
Larghezza: 488  |  Altezza: 488  |  Dimensione: 175 KiB

BIN
src/assets/img/dy_en.png Vedi File

Prima Dopo
Larghezza: 488  |  Altezza: 488  |  Dimensione: 86 KiB

BIN
src/assets/img/earth.png Vedi File

Prima Dopo
Larghezza: 128  |  Altezza: 128  |  Dimensione: 3.2 KiB

BIN
src/assets/img/metavatar_generate/model2-IMG@2x.png Vedi File

Prima Dopo
Larghezza: 2586  |  Altezza: 1596  |  Dimensione: 1.6 MiB

BIN
src/assets/img/metavatar_generate/model3-IMG@2x.png Vedi File

Prima Dopo
Larghezza: 3850  |  Altezza: 1054  |  Dimensione: 3.1 MiB

BIN
src/assets/img/metavatar_generate/model4-IMG@2x.png Vedi File

Prima Dopo
Larghezza: 1669  |  Altezza: 782  |  Dimensione: 969 KiB

BIN
src/assets/img/metavatar_generate/suiMang_generate@2x.png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 8.4 MiB

BIN
src/assets/img/metavatar_generate/组 41(1).png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1080  |  Dimensione: 38 KiB

BIN
src/assets/img/metavatar_generate/组 41(2).png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1080  |  Dimensione: 38 KiB

BIN
src/assets/img/metavatar_generate/组 41.png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1080  |  Dimensione: 2.6 MiB

BIN
src/assets/img/metavatar_generate/组 41@2x(1).png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 147 KiB

BIN
src/assets/img/metavatar_generate/组 41@2x(2).png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 147 KiB

BIN
src/assets/img/metavatar_generate/组 52 拷贝.png Vedi File

Prima Dopo
Larghezza: 1293  |  Altezza: 798  |  Dimensione: 510 KiB

BIN
src/assets/img/metavatar_generate/组 55.png Vedi File

Prima Dopo
Larghezza: 1925  |  Altezza: 527  |  Dimensione: 997 KiB

BIN
src/assets/img/metavatar_generate/组 55@2x(1).png Vedi File

Prima Dopo
Larghezza: 3338  |  Altezza: 1564  |  Dimensione: 3.0 MiB

BIN
src/assets/img/metavatar_live/001.png Vedi File

Prima Dopo
Larghezza: 423  |  Altezza: 540  |  Dimensione: 309 KiB

BIN
src/assets/img/metavatar_live/001@2x.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1080  |  Dimensione: 952 KiB

BIN
src/assets/img/metavatar_live/002.png Vedi File

Prima Dopo
Larghezza: 423  |  Altezza: 540  |  Dimensione: 216 KiB

BIN
src/assets/img/metavatar_live/002@2x.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1080  |  Dimensione: 638 KiB

BIN
src/assets/img/metavatar_live/003.png Vedi File

Prima Dopo
Larghezza: 423  |  Altezza: 540  |  Dimensione: 107 KiB

BIN
src/assets/img/metavatar_live/003@2x.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1080  |  Dimensione: 309 KiB

BIN
src/assets/img/metavatar_live/004.png Vedi File

Prima Dopo
Larghezza: 423  |  Altezza: 540  |  Dimensione: 315 KiB

BIN
src/assets/img/metavatar_live/004@2x.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1080  |  Dimensione: 994 KiB

BIN
src/assets/img/metavatar_live/3.png Vedi File

Prima Dopo
Larghezza: 59  |  Altezza: 60  |  Dimensione: 1.9 KiB

BIN
src/assets/img/metavatar_live/3@2x.png Vedi File

Prima Dopo
Larghezza: 118  |  Altezza: 120  |  Dimensione: 4.6 KiB

BIN
src/assets/img/metavatar_live/picInside@2x.png Vedi File

Prima Dopo
Larghezza: 2500  |  Altezza: 1330  |  Dimensione: 3.2 MiB

BIN
src/assets/img/metavatar_live/suiMang_live2@2x.png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 6.0 MiB

BIN
src/assets/img/metavatar_live/suiMang_live@2x.png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 3.9 MiB

BIN
src/assets/img/metavatar_live/组 3545 拷贝.png Vedi File

Prima Dopo
Larghezza: 1250  |  Altezza: 665  |  Dimensione: 1006 KiB

BIN
src/assets/img/metavatar_live/组 41(1).png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1080  |  Dimensione: 38 KiB

BIN
src/assets/img/metavatar_live/组 41.png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1080  |  Dimensione: 1.1 MiB

BIN
src/assets/img/metavatar_live/组 41@2x(1).png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 147 KiB

BIN
src/assets/img/metavatar_shadow/imgList1@2x.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1278  |  Dimensione: 726 KiB

BIN
src/assets/img/metavatar_shadow/imgList1@2xEnglish.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1278  |  Dimensione: 619 KiB

BIN
src/assets/img/metavatar_shadow/imgList2@2x.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1278  |  Dimensione: 981 KiB

BIN
src/assets/img/metavatar_shadow/imgList2@2xEnglish.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1278  |  Dimensione: 891 KiB

BIN
src/assets/img/metavatar_shadow/imgList3@2x.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1278  |  Dimensione: 1.3 MiB

BIN
src/assets/img/metavatar_shadow/imgList3@2xEnglish.png Vedi File

Prima Dopo
Larghezza: 846  |  Altezza: 1278  |  Dimensione: 1.1 MiB

BIN
src/assets/img/metavatar_shadow/scriptDrive@2x.png Vedi File

Prima Dopo
Larghezza: 2892  |  Altezza: 1276  |  Dimensione: 2.2 MiB

BIN
src/assets/img/metavatar_shadow/suiMang_shadow@2x.png Vedi File

Prima Dopo
Larghezza: 3840  |  Altezza: 2160  |  Dimensione: 9.2 MiB

BIN
src/assets/img/metavatar_shadow/组 3544(1).png Vedi File

Prima Dopo
Larghezza: 423  |  Altezza: 639  |  Dimensione: 310 KiB

BIN
src/assets/img/metavatar_shadow/组 3544(2).png Vedi File

Prima Dopo
Larghezza: 423  |  Altezza: 639  |  Dimensione: 405 KiB

BIN
src/assets/img/metavatar_shadow/组 3544.png Vedi File

Prima Dopo
Larghezza: 423  |  Altezza: 639  |  Dimensione: 230 KiB

BIN
src/assets/img/metavatar_shadow/组 41.png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1080  |  Dimensione: 2.8 MiB

BIN
src/assets/img/metavatar_shadow/组 45 拷贝.png Vedi File

Prima Dopo
Larghezza: 1446  |  Altezza: 638  |  Dimensione: 669 KiB

BIN
src/assets/img/module_5_bg_cut.png Vedi File

Prima Dopo
Larghezza: 1920  |  Altezza: 1076  |  Dimensione: 504 KiB

BIN
src/assets/img/parter7.png Vedi File

Prima Dopo
Larghezza: 156  |  Altezza: 156  |  Dimensione: 11 KiB

BIN
src/assets/img/partner6.png Vedi File

Prima Dopo
Larghezza: 536  |  Altezza: 148  |  Dimensione: 13 KiB

BIN
src/assets/img/pause.png Vedi File

Prima Dopo
Larghezza: 128  |  Altezza: 128  |  Dimensione: 3.7 KiB

BIN
src/assets/img/play.png Vedi File

Prima Dopo
Larghezza: 128  |  Altezza: 128  |  Dimensione: 4.3 KiB

BIN
src/assets/img/vx.jpg Vedi File

Prima Dopo
Larghezza: 1280  |  Altezza: 1280  |  Dimensione: 150 KiB

BIN
src/assets/img/vx_en.png Vedi File

Prima Dopo
Larghezza: 1280  |  Altezza: 1280  |  Dimensione: 285 KiB

BIN
src/assets/img/zhongzhiren.jpg Vedi File

Prima Dopo
Larghezza: 1003  |  Altezza: 533  |  Dimensione: 76 KiB

BIN
src/assets/img/zhongzhiren.png Vedi File

Prima Dopo
Larghezza: 841  |  Altezza: 449  |  Dimensione: 303 KiB

BIN
src/assets/video/P1 横版_x264.mp4 Vedi File


BIN
src/assets/video/video2.mp4 Vedi File


src/components/aboutUe/aboutUe.vue → src/components/aboutUs/aboutUs.vue Vedi File

@@ -1,23 +1,30 @@
<template>
<div class="Box">
<div class="Box" id="top">
<div class="title">遂芒科技</div>
<div class="cont">
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元,
同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国
企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长
11.6%;完成营业收入 1.62万亿元,同比增长
13.7%;实现归属于上市公司股东的净利润 449.4 亿元,
同比增长7.3%;基本每股收益 1.07 元,同比增长
10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界
500 强第 13 位,中国 企业 500 强第 3 位,稳居 ENR“全球最大 250
家工程承包商”第 1
位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。
</div>
<img src="../../assets/img/my_1.png" alt class="myimg">
<img src="../../assets/img/my_1.png" alt class="myimg" />
<div class="teamBox">
<img src="../../assets//img//myS.png" alt class="teamImg">
<img src="../../assets//img//myS.png" alt class="teamImg" />
<div class="introduceBox">
<div class="title">团队介绍</div>
<p>
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;
完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 4
49.4 亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长
11.6%; 完成营业收入 1.62万亿元,同比增长
13.7%;实现归属于上市公司股东的净利润 4 49.4
亿元,同比增长7.3%;基本每股收益 1.07 元,同比增长 10.3%。全球建筑行
业唯一新签合同额
营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,
中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1 位,继续
营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13
位, 中国企业 500 强第 3 位,稳居 ENR“全球最大 250 家工程承包商”第 1
位,继续
保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位
进一步巩固。
</p>
@@ -25,24 +32,42 @@
</div>
<div class="title1">公司愿景</div>
<p class="vision">
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长 11.6%;完成营业收入 1.62万亿元,同比增长 13.7%;实现归属于上市公司股东的净利润 449.4 亿元,同比增长7.3%;基本每
股收益 1.07 元,同比增长 10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界 500 强第 13 位,中国企业 500 强第 3 位,稳居 ENR“全球最大 250
家工程承包商”第 1 位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。
2020年,中国建筑合同额首次突破 3 万亿大关,实现 3.2 万亿元,同比增长
11.6%;完成营业收入 1.62万亿元,同比增长
13.7%;实现归属于上市公司股东的净利润 449.4 亿元,同比增长7.3%;基本每
股收益 1.07 元,同比增长
10.3%。全球建筑行业唯一新签合同额、营业收入达到“双万亿”的企业。公司位列2021年《财富》世界
500 强第 13 位,中国企业 500 强第 3 位,稳居 ENR“全球最大 250
家工程承包商”第 1
位,继续保持行业全球最高信用评级,市场竞争力和品牌影响力不断提升,行业领先地位进一步巩固。
</p>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data(){
return{

}
data() {
return {};
},
methods: {
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
computed: {
},
computed: {
...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
},
created() {
this.$nextTick(() => {
this.goView("top");
});
},
};
</script>
@@ -128,4 +153,3 @@ export default {
}
}
</style>


+ 591
- 306
src/components/common/tail.vue Vedi File

@@ -1,306 +1,591 @@
<template>
<div class="tailBox">
<div class="taillong">
<img src="../../assets/img/LOGO1.png" alt>
</div>

<div class="tiemBox">
<div class="taolIconBox">
<div class="taolIconText">{{characters ==1?'关注我们':'follow Us'}}</div>
<div class="iconBox">
<img src="../../assets/img/f.png" alt>
<img src="../../assets/img/o.png" alt>
<img src="../../assets/img/ft.png" alt>
<img src="../../assets/img/x.png" alt>
</div>
</div>

<div class="contentBox">
<div class="taolIconText">{{characters ==1?'联系我们':'Contact us'}}</div>
<div class="contentInput">
<!-- <input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName"> -->
<el-input v-model="userName" :placeholder="characters==1?'姓名':'Name'"></el-input>
</div>

<div class="contentInput">
<!-- <input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone"> -->
<el-input v-model="phone" :placeholder="characters ==1?'手机':'Phone Number'" ></el-input>
</div>
<div class="contentInput">
<!-- <input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email"> -->
<el-input v-model="email" :placeholder="characters ==1?'E-mail':'Mail'" ></el-input>
</div>
<div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div>
</div>

<div class="rqCodeBox">
<div class="phone">TEL:86 152 1093 7300</div>
<div
class="site"
>{{characters ==1?'北京市海淀区中关村南大街12号农业科学院信息楼311室':'311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing'}}</div>
<div class="rqCodeTiemBox">
<div class="rqCodeTiem">
<div class="rqcode">
<img src="../../assets/img/wechat.png" alt>
</div>
<div class="rqtext">Wechat</div>
</div>
<div class="rqCodeTiem1">
<div class="rqcode">
<img src="../../assets/img/tiktok.png" alt>
</div>
<div class="rqtext">Tiktok</div>
</div>
</div>
</div>
</div>

<div class="tailText">© 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
userName: "",
phone: "",
email: ""
};
},
methods: {
submit() {
let phone = /^1[35789]\d{9}$/;
if (this.userName == "") {
this.$message.error(
this.characters == 1 ? "请输入姓名" : "Please enter your name"
);
return;
} else if (!phone.test(this.phone)) {
this.$message.error(
this.characters == 1
? "请输入手机号"
: "Please enter your mobile phone number"
);
return;
} else if (this.email == "") {
this.$message.error(
this.characters == 1 ? "请输入邮箱" : "Please enter email address"
);
return;
}
let params = {
mallName: this.email, //邮箱
applicant: this.userName, //姓名
phone: this.phone //电话
};
this.$axios({
method: "post",
url: "/api/callback/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
data: params
})
.then(res => {
this.email = "";
this.userName = "";
this.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
})
.catch(err => {
this.$message.error(err.message);
});
}
},
computed: {
...mapState({
characters: state => state.publicObj.characters
})
}
};
</script>


<style lang="scss" scoped>
.tailBox {
overflow: hidden;
height: 578px;
background: #f1f4f7;

.taillong {
width: 168px;
height: 50px;
margin-top: 60px;
margin-left: 360px;
img {
width: 168px;
height: 50px;
}
}
.tiemBox{
overflow: hidden;
margin-top: 20px;
}
.taolIconBox {
margin-left: 380px;
float: left;
}
.taolIconText {
font-size: 14px;
font-family: Inter;
font-weight: 400;
color: #323232;
line-height: 62px;
}
.iconBox {
display: flex;
justify-content: space-between;
width: 124px;
img {
width: 24px;
height: 24px;
}
}
.contentBox {
// position: absolute;
// margin-top: 120px;
float: left;
margin-left: 260px;
.contentInput {
width: 286px;
height: 36px;
background: #ffffff;
text-align: center;
margin-bottom: 10px;
input {
width: 200px;
height: 36px;
}
input::placeholder {
font-weight: 400;
color: #949494;
}
}
.subBtn {
width: 140px;
height: 48px;
background: #ffffff;
border-radius: 24px;
text-align: center;
line-height: 48px;
margin-top: 20px;
cursor: pointer;
font-size: 24px;
}
}
.rqCodeBox {
width: 360px;
// position: absolute;
// top: 130px;
float: left;
margin-left: 260px;
.phone {
font-size: 14px;
font-family: Inter;
font-weight: 400;
color: #191919;
}
.site {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #191919;
margin-top: 10px;
}
.rqCodeTiemBox {
display: flex;
justify-content: space-between;
margin-top: 30px;
.rqCodeTiem {
overflow: hidden;
.rqcode {
width: 150px;
height: 150px;
img {
width: 100%;
height: 100%;
}
}
.rqtext {
text-align: center;
font-size: 12px;
font-family: Inter;
font-weight: 400;
color: #172c34;
line-height: 62px;
height: 62px;
}
}
.rqCodeTiem1 {
margin-left: 30px;
.rqcode {
width: 150px;
height: 150px;
img {
width: 100%;
height: 100%;
}
}
.rqtext {
text-align: center;
font-size: 12px;
font-family: Inter;
font-weight: 400;
color: #172c34;
line-height: 62px;
height: 62px;
}
}
}
}
.showBoxP {
font-size: 16px !important;
text-align: center !important;
line-height: 20px !important;
color: #696969 !important;
}
.tailText {
// position: absolute;
// width: 100%;
// bottom: 6%;
margin-top: 80px;
// left: 0;
text-align: center;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #191919;
line-height: 62px;
opacity: 0.5;
}
}
::-webkit-input-placeholder {
/* WebKit browsers,webkit内核浏览器 */
color: #ccc;
font-size: 16px;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
font-size: 16px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
font-size: 16px;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #ccc;
font-size: 16px;
}
</style>

<template>
<div class="tailBox">
<div class="taillong">
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/LOGO1.png"
alt
/>
<div class="taolIconBox">
<!-- <div class="taolIconText"> -->
<!-- {{ characters == 1 ? "关注我们" : "follow Us" }} -->
<!-- {{ characters == 1 ? "" : "" }} -->
<!-- </div> -->
<div class="iconBox">
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/f.png"
alt
/>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/o.png"
alt
/>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/ft.png"
alt
/>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/x.png"
alt
/>
</div>
</div>
</div>
<div class="tiemBox" id="tiemBox">
<div v-if="false" class="taolIconBox">
<!-- <div class="taolIconText"> -->
<!-- {{ characters == 1 ? "关注我们" : "follow Us" }} -->
<!-- {{ characters == 1 ? "" : "" }} -->
<!-- </div> -->
<div class="iconBox">
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/f.png"
alt
/>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/o.png"
alt
/>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/ft.png"
alt
/>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/x.png"
alt
/>
</div>
</div>
<div class="contentBox">
<div class="taolIconText" style="margin-top: 0px">
{{ characters == 1 ? "联系我们" : "Contact us" }}
</div>
<!-- <div class="contentInput">
<el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
</div>
<div class="contentInput">
<el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input>
</div>
<div class="contentInput">
<el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input>
</div>
<div class="subBtn" @click="submit()">
{{ characters == 1 ? '提交' : 'Submit' }}
</div> -->
<el-form v-if="showForm" ref="form" :rules="rules1" :model="form">
<el-form-item class="width" prop="userName">
<el-input
v-model="form.userName"
maxlength="10"
:placeholder="characters == 1 ? '姓名' : 'Name'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="phone">
<el-input
v-model="form.phone"
:placeholder="characters == 1 ? '手机' : 'Phone'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
<el-button class="subBtn1" type="primary" @click="submit()">{{
characters == 1 ? "提 交" : "Submit"
}}</el-button>
</el-form>
</div>
<div class="rqCodeBox">
<div class="phone">TEL:+86 152-1093-7300</div>
<div class="site">
{{
characters == 1
? "北京市海淀区中关村南大街12号农业科学院信息楼311室"
: "311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing"
}}
</div>
<div class="phone" v-if="characters == 1" style="margin-top: 10px">
周女士 +65 9422 2858
</div>
<div class="phone" v-if="characters != 1" style="margin-top: 10px">
Chow +65 9422 2858
</div>
<div class="site">
{{
characters == 1
? "新加坡北桥路111号,半岛广场07-11号,邮编179098"
: "111 North Bridge Road, #07-11, Penisula Plaza, Singapore 179098"
}}
</div>
<div v-if="characters == 1" class="rqCodeTiemBox">
<div class="rqCodeTiem">
<div class="rqcode">
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/wechat.png" alt /> -->
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/vx.jpg"
alt
/>
</div>
<div class="rqtext">Wechat</div>
</div>
<div class="rqCodeTiem1">
<div class="rqcode">
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/tiktok.png" alt /> -->
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/dy.png"
alt
/>
</div>
<div class="rqtext">Tiktok</div>
</div>
</div>
<div v-if="characters != 1" class="rqCodeTiemBox">
<div class="rqCodeTiem">
<div class="rqcode">
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/wechat.png" alt /> -->
<img src="../../assets/img/vx_en.png" alt />
</div>
<div class="rqtext">Wechat</div>
</div>
<div class="rqCodeTiem1">
<div class="rqcode">
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/tiktok.png" alt /> -->
<img src="../../assets/img/dy_en.png" alt />
</div>
<div class="rqtext">Tiktok</div>
</div>
</div>
</div>
</div>
<div class="tailText">
<!-- © 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号 -->
© 2021 Copyright 北京邃芒科技有限公司 版权所有
<a href="https://beian.miit.gov.cn">京ICP备2023005136号-1</a>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
data() {
return {
userName: "",
phone: "",
email: "",
form: {
userName: "",
phone: "",
email: "",
},
rules: {
userName: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
userName: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
rules1: null,
showForm: true,
};
},
methods: {
submit() {
// let phone = /^1[35789]\d{9}$/;
// if (this.userName == '') {
// this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name');
// return;
// } else if (!phone.test(this.phone)) {
// this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number');
// return;
// } else if (this.email == '') {
// this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address');
// return;
// }
// let params = {
// mallName: this.email, //邮箱
// applicant: this.userName, //姓名
// phone: this.phone //电话
// };
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.userName, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.email = "";
this.userName = "";
this.phone = "";
this.form.email = "";
this.form.userName = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
created() {
this.rules1 = this.rules;
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},
watch: {
characters: function (newValue) {
this.showForm = false;
if (newValue === 1) {
this.rules1 = this.rules;
} else {
this.rules1 = this.rulesEnglish;
}
setTimeout(() => {
this.showForm = true;
}, 100);
},
},
};
</script>
<style lang="scss" scoped>
.tailBox {
overflow: hidden;
height: 508px;
background: #f1f4f7;
// padding-bottom: 54px;
.taillong {
padding-top: 20px;
padding-left: 360px;
// width: 168px;
// height: 50px;
// margin-top: 20px;
// margin-left: 360px;
> img {
width: 168px;
height: 50px;
margin-bottom: 10px;
}
}
.tiemBox {
overflow: hidden;
padding-left: 500px;
// margin-top: 30px;
}
.taolIconBox {
// margin-left: 380px;
margin-left: 20px;
// float: left;
}
.taolIconText {
// margin-top: 20px;
margin-bottom: 20px;
font-size: 14px;
font-family: Inter;
font-weight: 400;
color: #323232;
// line-height: 62px;
}
.iconBox {
display: flex;
justify-content: space-between;
width: 124px;
img {
width: 24px;
height: 24px;
}
}
.contentBox {
// position: absolute;
// margin-top: 120px;
float: left;
margin-left: 260px;
.contentInput {
width: 286px;
height: 36px;
// background: #ffffff;
text-align: center;
margin-bottom: 11px;
input {
width: 200px;
height: 36px;
}
input::placeholder {
font-weight: 400;
color: #949494;
}
}
.subBtn {
width: 140px;
height: 48px;
background: #ffffff;
border-radius: 24px;
text-align: center;
line-height: 48px;
margin-top: 24px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
&:hover {
color: #fff;
background-color: #16e9d6;
}
}
::v-deep .el-form-item {
width: 300px;
margin-bottom: 20px;
}
.subBtn1 {
border: none;
width: 140px;
height: 48px;
color: #191919;
// margin-top: 15px;
background: #ffffff;
border-radius: 24px;
text-align: center;
line-height: 24px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
&:hover {
color: #fff;
background-color: #16e9d6;
}
}
}
.rqCodeBox {
// padding-top: -10px;
width: 360px;
// position: absolute;
// top: 130px;
float: left;
margin-left: 260px;
.phone {
// margin-top: 10px;
font-size: 14px;
font-family: Inter;
font-weight: 400;
color: #191919;
}
.site {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #191919;
// margin-top: 10px;
}
.rqCodeTiemBox {
display: flex;
justify-content: space-between;
margin-top: 30px;
.rqCodeTiem {
overflow: hidden;
.rqcode {
width: 150px;
height: 150px;
img {
width: 100%;
height: 100%;
}
}
.rqtext {
text-align: center;
font-size: 12px;
font-family: Inter;
font-weight: 400;
color: #172c34;
line-height: 62px;
height: 62px;
}
}
.rqCodeTiem1 {
margin-left: 30px;
.rqcode {
width: 150px;
height: 150px;
img {
width: 100%;
height: 100%;
}
}
.rqtext {
text-align: center;
font-size: 12px;
font-family: Inter;
font-weight: 400;
color: #172c34;
line-height: 62px;
height: 62px;
}
}
}
}
.showBoxP {
font-size: 16px !important;
text-align: center !important;
line-height: 20px !important;
color: #696969 !important;
}
.tailText {
// position: absolute;
// width: 100%;
// bottom: 6%;
margin-top: 20px;
// left: 0;
text-align: center;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #191919;
line-height: 62px;
opacity: 0.5;
a {
text-decoration: none;
color: #333;
}
a:hover,
a:visited,
a:link,
a:active {
color: #333;
// 设置使所有a标签的四种状态都和本身颜色保持一致,样式代码自己写
}
}
}
::-webkit-input-placeholder {
/* WebKit browsers,webkit内核浏览器 */
color: #ccc;
font-size: 16px;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
font-size: 16px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
font-size: 16px;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #ccc;
font-size: 16px;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
border-color: #16e9d6;
outline: 0;
}
</style>

+ 275
- 163
src/components/common/top.vue Vedi File

@@ -1,163 +1,275 @@
<template>
<div class="topBox">
<div class="logoBox" @click="go('/')">
<img src="../../assets/img/logo.png" alt class="logo">
<div class="logoTitle">metavatar</div>
</div>
<div class="categoryBox">
<div class="categoryitem">{{characters==1?'产品能力':'Product'}}</div>
<div class="categoryitem">{{characters==1?'创新技术':'Technology'}}</div>
<div class="categoryitem">{{characters==1?'解决方案':'Solutions'}}</div>
<!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> -->
<div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div>
</div>
<div class="cutBox">
<div class="en">
<el-select v-model="charactersMy" placeholder="请选择" @change="change">
<el-option
v-for="item in languageLsit"
:key="item.value"
:label="item.name"
:value="item.value"
>
<div class>
<img
:src="item.url"
alt
class="cutImg"
>
<span>{{item.name}}</span>
</div>
</el-option>
</el-select>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
name: "top",
data() {
return {
languageLsit: [
{
name: "Cn",
value: 1,
url: require("../../assets/img/cn.jpeg")
},
{
name: "En",
value: 2,
url: require("../../assets/img/en.jpg")
}
],
charactersMy: 1
};
},
watch: {
// languageLsit(newVal) {
// this.setCharacters([
// {
// name: "Cn",
// value: 1
// },
// {
// name: "En",
// value: 2
// }
// ]);
// }
},
computed: {
...mapState({
characters: state => state.publicObj.characters
})
},
methods: {
...mapActions(["setCharacters"]),
change(value) {
console.log(value);
this.setCharacters(value);
},
go(url){
this.$router.push(url)
},
},
mounted() {
console.log(this.languageLsit, "characters");
}
};
</script>

<style lang="scss" scoped>
.topBox {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
}
.logoBox {
margin-top: 20px;
margin-left: 35px;
margin-bottom: 20px;
float: left;
overflow: hidden;
cursor: pointer;
}
.logo {
float: left;
width: 60px;
height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 30%;
float: left;
margin-top: 20px;
margin-left: 6%;
display: flex;
justify-content: space-between;
}
.categoryitem {
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
cursor: pointer;
}
.categoryitem:hover{
background-color: #1358ba;
}
.cutBox {
float: right;
margin-top: 20px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 6px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}
.el-select{
width: 120px;
}
</style>


<template>
<div class="topBox" ref="scrollDiv">
<div class="logoBox" @click="go('/')">
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/logo.png"
alt
class="logo"
/>
<div class="logoTitle">metavatar</div>
</div>
<div class="categoryBox">
<div class="categoryitem">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{ characters == 1 ? "产品能力" : "Products" }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="PhotoTalk">
{{ characters == 1 ? "邃芒慧语" : "MetaTalker" }}
</el-dropdown-item>
<el-dropdown-item command="MetaGene">
{{ characters == 1 ? "邃芒慧生" : "MetaGene" }}
</el-dropdown-item>
<el-dropdown-item command="MetaNeuver">{{
characters == 1 ? "邃芒慧影" : "MetaNeuver"
}}</el-dropdown-item>
<el-dropdown-item command="MetaStreaming">{{
characters == 1 ? "邃芒慧播" : "MetaStreaming"
}}</el-dropdown-item>
<el-dropdown-item command="MetaTuring">{{
characters == 1 ? "邃芒慧侃" : "MetaTuring"
}}</el-dropdown-item>
<!-- <el-dropdown-item command="realTime">{{
characters == 1 ? "实时对话" : "实时对话"
}}</el-dropdown-item> -->
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="categoryitem" @click="goView('Technology')">
{{ characters == 1 ? "创新技术" : "Technology" }}
</div>
<div class="categoryitem" @click="goView('Solutions')">
{{ characters == 1 ? "解决方案" : "Solutions" }}
</div>
<!-- <div class="categoryitem" @click="goView('Cases')">
{{ characters == 1 ? "经典案例" : "Cases" }}
</div> -->
<div class="categoryitem" @click="goView('aboutUs')">
{{ characters == 1 ? "关于我们" : "About us" }}
</div>
<div class="categoryitem" @click="goView('tiemBox')">
{{ characters == 1 ? "联系我们" : "Contact us" }}
</div>
</div>
<div class="cutBox">
<!-- <img src="@/assets/img/earth.png" alt="" /> -->
<div class="en">
<el-select v-model="charactersMy" placeholder="请选择" @change="change">
<el-option
v-for="item in languageLsit"
:key="item.value"
:label="item.name"
:value="item.value"
>
<div class>
<!-- <img :src="item.url" alt class="cutImg" /> -->
<span>{{ item.name }}</span>
</div>
</el-option>
</el-select>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
name: "top",
data() {
return {
languageLsit: [
{
name: "中文(中国)",
value: 1,
url: require("../../assets/img/cn.jpeg"),
},
{
name: "English(USA)",
value: 2,
url: require("../../assets/img/en.jpg"),
},
],
charactersMy: 1,
};
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},
methods: {
...mapActions(["setCharacters"]),
change(value) {
console.log(value);
this.setCharacters(value);
},
handleCommand(path) {
if (path == "PhotoTalk") {
window.open("https://photo.metavatar.cc");
return;
}
if (path == "MetaNeuver") {
window.open("https://neuver.metavatar.cc");
return;
}
this.$router.push(`/${path}`);
},
goView(id) {
if (id == "Technology" || id == "Solutions" || id == "aboutUs") {
this.$router.push(`/`);
setTimeout(() => {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
}, 100);
} else {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
}
},
goPage(path) {
this.$router.push(path);
// this.goView(path);
},
go(url) {
this.$router.push(url);
},
// 滚动到顶部
handleScrollTop() {
this.$nextTick(() => {
let scrollElem = this.$refs.scrollDiv;
scrollElem.scrollTo({ top: 0, behavior: "smooth" });
});
},
},
mounted() {
console.log(this.languageLsit, "characters");
},
created() {
this.handleScrollTop();
// this.charactersMy = this.$store.state.publicObj.characters;
// console.log();
// console.log(this.charactersMy);
},
watch: {
"$store.state.publicObj.characters": {
handler(newVal) {
console.log(newVal, "vuex");
this.charactersMy = newVal;
},
},
// languageLsit(newVal) {
// this.setCharacters([
// {
// name: "Cn",
// value: 1
// },
// {
// name: "En",
// value: 2
// }
// ]);
// }
},
};
</script>
<style lang="scss" scoped>
.topBox {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
}
.logoBox {
margin-top: 20px;
margin-left: 35px;
margin-bottom: 20px;
float: left;
overflow: hidden;
cursor: pointer;
}
.logo {
float: left;
width: 60px;
height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 30%;
float: left;
margin-top: 20px;
margin-left: 6%;
display: flex;
justify-content: space-between;
}
.categoryitem {
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
cursor: pointer;
transition: all 0.3s;
}
.categoryitem:hover {
color: #16e9d6;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #16e9d6;
color: #fff;
}
.cutBox {
float: right;
margin-top: 20px;
margin-right: 100px;
cursor: pointer;
img {
position: relative;
bottom: 3px;
float: left;
width: 45px;
height: 45px;
margin-right: 5px;
}
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 6px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}
.el-select {
width: 150px;
}
.el-dropdown-link {
transition: all 0.3s;
&:hover {
color: #16e9d6;
}
}
</style>

+ 2316
- 1379
src/components/home/home.vue
File diff soppresso perché troppo grande
Vedi File


+ 609
- 0
src/components/views/generate.vue Vedi File

@@ -0,0 +1,609 @@
<template>
<div class="Box" id="top">
<div
class="module_1"
style="position: relative; background-color: #000; height: 800px"
@click="goSetVedio(isPlayed)"
>
<video
style="position: absolute; right: 250px"
ref="videoPlayer"
src="https://video.metavatar.cc/sv/5ee09a38-1883359e47a/5ee09a38-1883359e47a.mp4"
max-width="800px"
height="800px"
autoplay
muted
controls
loop="loop"
/>
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/suiMang_generate@2x.png" width="100%" height="100%" /> -->
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧生</div>
<div class="title_item1_y" v-if="characters == 1">
AI全自动生成,高逼真自然度数字人
</div>
<div class="desc" v-if="characters == 1">
<div>
满足数字分身,虚拟创造,原画复现等场景需要,分钟级定稿IP形象
</div>
<div>无中生有的专属虚拟IP,彻底消除IP版权后顾之忧</div>
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaGene</div>
<div class="title_item1_y" v-if="characters != 1">
AI platform generates high-fidelity, natural digital humans
automatically by using labels and prompts.
</div>
<div class="desc" v-if="characters != 1">
<!-- <div>Meet the needs of digital avatar, virtual creation, original painting reproduction and other scenarios.</div>
<div>The exclusive virtual IP created out of nothing completely, eliminates the worries of IP copyright, finalize the IP image in minutes</div> -->
<div>
Meets the demands of digital avatars, virtual creation, and original
painting reproduction. With MetaGene, you can effortlessly create
exclusive virtual IPs from scratch, eliminating concerns about IP
copyright. In just minutes, you can finalize the IP image, ensuring
a unique and original creation.
</div>
</div>
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="md1" id="md1"></div>
</div>
<div class="module_2">
<div class="title">Metavatar AI</div>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model2-IMG@2x.png"
alt=""
/>
</div>
<div class="module_3">
<div class="title" v-if="characters == 1">
保持人脸特征 自由调整各类心仪风格
</div>
<div class="title" v-if="characters != 1">
Maintain facial features and freely adjust various favorite styles
</div>
<div class="style">STYLE</div>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model3-IMG@2x.png"
alt=""
/>
</div>
<div class="module_4">
<div class="imgBox">
<div class="textInsideBox">
<div class="title" v-if="characters == 1">
丰富的状态编辑 完整的IP形象展示
</div>
<div class="title" v-if="characters != 1">
Rich status editing, complete IP image display
</div>
<div class="style">FULL AGE</div>
</div>
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/model4-IMG@2x.png"
alt=""
/>
</div>
</div>
<el-dialog
:title="
characters == 1
? '留下您的信息,我们会尽快与您取得联系'
: 'Tell us about yourself, we ll be in touch right away.'
"
:visible.sync="dialogVisible"
width="34%"
>
<el-form
ref="form"
:rules="characters == 1 ? rules : rulesEnglish"
:model="form"
>
<el-form-item class="width" prop="name">
<el-input
v-model="form.name"
maxlength="10"
:placeholder="characters == 1 ? '姓名' : 'Name'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="phone">
<el-input
v-model="form.phone"
:placeholder="characters == 1 ? '手机' : 'Phone'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{
characters == 1 ? "取 消" : "Cancel"
}}</el-button>
<el-button type="primary" @click="submit()">{{
characters == 1 ? "提 交" : "Submit"
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";
export default {
data() {
return {
//零时存放
charactersMy: 1,
//
userName: "",
phone: "",
email: "",
form: {
name: "",
phone: "",
email: "",
},
rules: {
name: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
name: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false,
};
},
methods: {
...mapActions(["setCharacters"]),
change(value) {
console.log(value);
this.setCharacters(value);
},
goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},
showBox() {
this.dialogVisible = true;
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
goPages(path) {
this.$router.push(`/${path}`);
},
submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},
mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
});
},
};
</script>
<style lang="scss" scoped>
.Box {
width: 100%;
overflow: hidden;
}
.topBox {
width: 90%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// background-color: rgba(255, 255, 255, 0.1);
}
.logoBox {
margin-top: 35px;
margin-left: 35px;
margin-bottom: 35px;
float: left;
overflow: hidden;
}
.logo {
float: left;
// width: 60px;
// height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 600px;
float: left;
margin-top: 20px;
margin-left: 16%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.categoryitem {
width: 110px;
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
// background-color: #16e9d6
}
.cutBox {
float: right;
margin-top: 35px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 10px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}
.module_1 {
width: 100%;
// height: 1080px;
// background-color: aquamarine;
// background-image: url("../../assets/img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #f1f4f7;
.titleBox {
width: 36%;
position: absolute;
top: 240px;
left: 194px;
overflow: hidden;
color: #ffffff;
.title_item1 {
margin-bottom: 14px;
font-size: 60px;
}
.title_item1_y {
// margin-bottom: 14px;
font-size: 36px;
}
.title_item2 {
margin-bottom: 20px;
font-size: 42px;
}
.title_item3 {
font-size: 16px;
line-height: 30px;
}
.title_btn {
margin-top: 60px;
height: 60px;
width: 220px;
text-align: center;
line-height: 60px;
color: #ffffff;
border-radius: 40px;
border: #ffffff solid 3px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #16e9d6;
border: #16e9d6 solid 3px;
}
}
.desc {
margin-top: 29px;
font-size: 16px;
line-height: 36px;
}
}
}
.module_2 {
height: 930px;
// height: 1080px;
background-color: #fff;
padding-top: 53px;
// padding-top: 133px;
text-align: center;
.title {
text-align: center;
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232324;
line-height: 62px;
margin-bottom: 44px;
}
img {
width: 1293px;
height: 798px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_3 {
height: 850px;
background-color: #ebeef7;
padding-top: 53px;
text-align: center;
.title {
text-align: center;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 82px;
}
.style {
text-align: center;
font-size: 24px;
letter-spacing: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 99px;
}
img {
width: 100%;
height: 527px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_4 {
height: 850px;
background-color: #fff;
padding-top: 26px;
padding-left: 116px;
text-align: center;
.imgBox {
position: relative;
width: 1669px;
height: 782px;
.textInsideBox {
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
// margin-left: 570px;
z-index: 99;
.title {
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
text-align: center;
margin-bottom: 94px;
}
.style {
font-size: 24px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
letter-spacing: 20px;
color: #4d4d4d;
line-height: 36px;
}
}
img {
width: 100%;
height: 100%;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
}
</style>

+ 651
- 0
src/components/views/live.vue Vedi File

@@ -0,0 +1,651 @@
<template>
<div class="Box" id="top">
<div class="module_1">
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/suiMang_shadow@2x.png"
width="100%"
height="100%"
/>
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧播</div>
<div class="title_item1_y" v-if="characters == 1">
直播虚拟人自然逼真,分身真假难辨
</div>
<div class="desc" v-if="characters == 1">
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div>
<div>能为您在各种场景下7*24工作</div>
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaStreaming</div>
<div class="title_item1_y" v-if="characters != 1">
MetaStreaming Virtual Person for live broadcasts is incredibly
realistic, blurring the line between virtual and real.
</div>
<div class="desc" v-if="characters != 1">
<!-- <div>Virtual live broadcast solves real-world problems such as production capacity of real people, IP ownership, etc. by virtual digital human</div>
<div>Can work for you 7*24 in various scenarios</div> -->
<div>
Virtual live broadcasting solves real-world challenges like
production capacity and IP ownership by utilizing virtual digital
humans. These virtual counterparts work 24/7 across various
scenarios.
</div>
</div>
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="md1" id="md1"></div>
</div>
<div class="module_2">
<div class="title" v-if="characters == 1">真人无需出镜驱动数字人直播</div>
<!-- <div class="title" v-if="characters != 1">Digital live broadcasting manipulated by AI, text, voice, video etc.to free real people workforce on camera.</div> -->
<div class="title" v-if="characters != 1">
AI-powered digital live broadcasting frees real people from on-camera
work by utilizing text, voice, and video.
</div>
<div class="imgBox">
<li style="position: relative">
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png"
alt=""
/>
<div class="textInImg" v-if="characters != 1">中の人</div>
</li>
<li style="position: relative">
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png"
alt=""
/>
<div class="textInImg" v-if="characters != 1">
Virtual human frees real person
</div>
</li>
<li style="position: relative">
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2xEnglish.png"
alt=""
/>
<div class="textInImg" v-if="characters != 1">Cartoon character</div>
</li>
<div class="redCard" v-if="characters == 1">无缝接入各主流平台</div>
<div class="redCard" v-if="characters != 1">
Seamless access to all platforms, tictok,intagram, facebook,wechat
etc.
</div>
<div class="pinkCard" v-if="characters == 1">
IP版权归属明确 无后顾之忧
</div>
<div class="pinkCard" v-if="characters != 1">
No IP copyright concerns
</div>
<div class="blueCard" v-if="characters == 1">
出镜声形从此统一 打造沉淀企业IP
</div>
<div class="blueCard" v-if="characters != 1">
Unified voice and appearance for digital IP of the precipitation
enterprise will be created。
</div>
</div>
</div>
<div class="module_3">
<div class="title" v-if="characters == 1">脚本驱动数字人直播</div>
<div class="title" v-if="characters != 1">
Script-driven digital human live broadcast
</div>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png"
alt=""
/>
</div>
<el-dialog
:title="
characters == 1
? '留下您的信息,我们会尽快与您取得联系'
: 'Tell us about yourself, we ll be in touch right away.'
"
:visible.sync="dialogVisible"
width="34%"
>
<el-form
ref="form"
:rules="characters == 1 ? rules : rulesEnglish"
:model="form"
>
<el-form-item class="width" prop="name">
<el-input
v-model="form.name"
maxlength="10"
:placeholder="characters == 1 ? '姓名' : 'Name'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="phone">
<el-input
v-model="form.phone"
:placeholder="characters == 1 ? '手机' : 'Phone'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{
characters == 1 ? "取 消" : "Cancel"
}}</el-button>
<el-button type="primary" @click="submit()">{{
characters == 1 ? "提 交" : "Submit"
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";
export default {
data() {
return {
//零时存放
charactersMy: 1,
//
userName: "",
phone: "",
email: "",
form: {
name: "",
phone: "",
email: "",
},
rules: {
name: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
name: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false,
};
},
methods: {
...mapActions(["setCharacters"]),
change(value) {
console.log(value);
this.setCharacters(value);
},
showBox() {
this.dialogVisible = true;
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
goPages(path) {
this.$router.push(`/${path}`);
},
submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},
mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView("top");
});
},
};
</script>
<style lang="scss" scoped>
.Box {
width: 100%;
overflow: hidden;
}
.topBox {
width: 90%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// background-color: rgba(255, 255, 255, 0.1);
}
.logoBox {
margin-top: 35px;
margin-left: 35px;
margin-bottom: 35px;
float: left;
overflow: hidden;
}
.logo {
float: left;
// width: 60px;
// height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 600px;
float: left;
margin-top: 20px;
margin-left: 16%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.categoryitem {
width: 110px;
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
// background-color: #16e9d6
}
.cutBox {
float: right;
margin-top: 35px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 10px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}
.module_1 {
width: 100%;
// height: 1080px;
// background-color: aquamarine;
// background-image: url("../../assets/img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #f1f4f7;
.titleBox {
width: 36%;
position: absolute;
top: 240px;
left: 194px;
overflow: hidden;
color: #fefefe;
.title_item1 {
margin-bottom: 14px;
font-size: 60px;
}
.title_item1_y {
// margin-bottom: 14px;
font-size: 36px;
}
.title_item2 {
margin-bottom: 20px;
font-size: 42px;
}
.title_item3 {
font-size: 16px;
line-height: 30px;
}
.title_btn {
margin-top: 60px;
height: 60px;
width: 220px;
text-align: center;
line-height: 60px;
color: #fefefe;
border-radius: 40px;
border: #fefefe solid 3px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #16e9d6;
border: #16e9d6 solid 3px;
}
}
.desc {
margin-top: 29px;
font-size: 16px;
line-height: 36px;
}
}
}
.module_2 {
height: 810px;
background: #ffffff;
padding-top: 32px;
padding-left: 331px;
padding-right: 306px;
.title {
text-align: center;
margin-bottom: 52px;
font-size: 36px;
}
.imgBox {
display: flex;
position: relative;
justify-content: space-between;
text-align: center;
li {
list-style: none;
margin-right: 7px;
.textInImg {
position: absolute;
top: 20px;
left: 20px;
width: 10px;
font-size: 35px;
line-height: 35px;
color: #fff;
font-weight: 900;
transition: all 0.3s;
}
img {
width: 423px;
height: 639px;
cursor: pointer;
transition: all 0.3s;
&:hover {
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.548);
transform: translateY(-20px);
}
&:hover ~ .textInImg {
transform: translateY(-20px);
}
}
img:hover .textInImg {
top: -5px;
}
}
.redCard {
position: absolute;
left: -111px;
bottom: 69px;
width: 230px;
// height: 50px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
text-align: center;
color: #ffffff;
line-height: 46px;
border-radius: 4px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548);
background: #e7627b;
cursor: pointer;
transition: all 0.3s;
}
.pinkCard {
position: absolute;
left: 325px;
bottom: 204px;
width: 288px;
height: 50px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
line-height: 46px;
border-radius: 4px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548);
background: #dc62e7;
cursor: pointer;
transition: all 0.3s;
}
.blueCard {
position: absolute;
right: -49px;
bottom: 51px;
width: 321px;
// height: 50px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
line-height: 46px;
border-radius: 4px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.548);
background: #6462e7;
cursor: pointer;
transition: all 0.3s;
}
}
}
.module_3 {
height: 700px;
background-color: #ebeef7;
padding-top: 33px;
text-align: center;
.title {
text-align: center;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: -25px;
}
img {
width: 1446px;
height: 638px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
</style>

+ 504
- 0
src/components/views/realTime.vue Vedi File

@@ -0,0 +1,504 @@
<template>
<div class="Box" id="top">
<div
class="module_1"
style="position: relative; background-color: #000; height: 800px"
@click="goSetVedio(isPlayed)"
>
<video
style="position: absolute; right: 250px"
ref="videoPlayer"
src="https://video.metavatar.cc/sv/5ee09a38-1883359e47a/5ee09a38-1883359e47a.mp4"
max-width="800px"
height="800px"
autoplay
muted
controls
loop="loop"
/>
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/suiMang_generate@2x.png" width="100%" height="100%" /> -->
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">
We breathe life into generative AI
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">
We breathe life into generative AI
</div>

<div class="title_btn" @click="startTalking">
{{ characters == 1 ? "开始对话" : "Start to talk" }}
</div>
</div>
</div>
</div>
</template>

<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";

export default {
data() {
return {
//零时存放
charactersMy: 1,
//
userName: "",
phone: "",
email: "",

form: {
name: "",
phone: "",
email: "",
},

rules: {
name: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
name: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false,
};
},
methods: {
...mapActions(["setCharacters"]),

change(value) {
console.log(value);
this.setCharacters(value);
},

goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},

showBox() {
this.dialogVisible = true;
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
goPages(path) {
this.$router.push(`/${path}`);
},

startTalking() {
this.$router.push("/realTimeC");
},

submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,

// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},

// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},

// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
});
},
};
</script>

<style lang="scss" scoped>
.Box {
width: 100%;
overflow: hidden;
}
.topBox {
width: 90%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// background-color: rgba(255, 255, 255, 0.1);
}
.logoBox {
margin-top: 35px;
margin-left: 35px;
margin-bottom: 35px;
float: left;
overflow: hidden;
}
.logo {
float: left;
// width: 60px;
// height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 600px;
float: left;
margin-top: 20px;
margin-left: 16%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.categoryitem {
width: 110px;
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
// background-color: #16e9d6
}
.cutBox {
float: right;
margin-top: 35px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 10px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}

.module_1 {
width: 100%;
// height: 1080px;
// background-color: aquamarine;
// background-image: url("../../assets/img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #f1f4f7;
.titleBox {
width: 36%;
position: absolute;
top: 240px;
left: 194px;
overflow: hidden;
color: #ffffff;
.title_item1 {
margin-bottom: 14px;
font-size: 60px;
}
.title_item1_y {
// margin-bottom: 14px;
font-size: 36px;
}
.title_item2 {
margin-bottom: 20px;
font-size: 42px;
}
.title_item3 {
font-size: 16px;
line-height: 30px;
}
.title_btn {
margin-top: 60px;
height: 60px;
width: 220px;
text-align: center;
line-height: 60px;
color: #ffffff;
border-radius: 40px;
border: #ffffff solid 3px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #16e9d6;
border: #16e9d6 solid 3px;
}
}
.desc {
margin-top: 29px;
font-size: 16px;
line-height: 36px;
}
}
}
.module_2 {
height: 930px;
// height: 1080px;
background-color: #fff;
padding-top: 53px;
// padding-top: 133px;
text-align: center;
.title {
text-align: center;
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232324;
line-height: 62px;
margin-bottom: 44px;
}
img {
width: 1293px;
height: 798px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_3 {
height: 850px;
background-color: #ebeef7;
padding-top: 53px;
text-align: center;
.title {
text-align: center;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 82px;
}
.style {
text-align: center;
font-size: 24px;
letter-spacing: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 99px;
}
img {
width: 100%;
height: 527px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_4 {
height: 850px;
background-color: #fff;
padding-top: 26px;
padding-left: 116px;
text-align: center;
.imgBox {
position: relative;
width: 1669px;
height: 782px;
.textInsideBox {
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
// margin-left: 570px;
z-index: 99;
.title {
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
text-align: center;
margin-bottom: 94px;
}
.style {
font-size: 24px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
letter-spacing: 20px;
color: #4d4d4d;
line-height: 36px;
}
}
img {
width: 100%;
height: 100%;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
}
</style>

+ 463
- 0
src/components/views/realTimeC.vue Vedi File

@@ -0,0 +1,463 @@
<template>
<div class="Box" id="top">
<div class="module_1" style="background-color: #fafffc">
<img style="width: 55%" src="../../assets/img/demo.png" alt="" />
<div class="itemBox left">
<img src="../../assets/icon/voice.png" alt="" />
</div>
<div class="itemBox right">
<img src="../../assets/icon/input.png" alt="" />
</div>
</div>
</div>
</template>

<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";

export default {
data() {
return {
//零时存放
charactersMy: 1,
//
userName: "",
phone: "",
email: "",

form: {
name: "",
phone: "",
email: "",
},

rules: {
name: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
name: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false,
};
},
methods: {
...mapActions(["setCharacters"]),

change(value) {
console.log(value);
this.setCharacters(value);
},

goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},

showBox() {
this.dialogVisible = true;
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
goPages(path) {
this.$router.push(`/${path}`);
},

startTalking() {
this.$router.push("");
},

submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,

// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},

// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},

// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
});
},
};
</script>

<style lang="scss" scoped>
.Box {
width: 100%;
overflow: hidden;
}
.topBox {
width: 90%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// background-color: rgba(255, 255, 255, 0.1);
}
.logoBox {
margin-top: 35px;
margin-left: 35px;
margin-bottom: 35px;
float: left;
overflow: hidden;
}
.logo {
float: left;
// width: 60px;
// height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 600px;
float: left;
margin-top: 20px;
margin-left: 16%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.categoryitem {
width: 110px;
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
// background-color: #16e9d6
}
.cutBox {
float: right;
margin-top: 35px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 10px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}

.module_1 {
position: relative;
width: 100%;
// height: 1080px;
// background-color: aquamarine;
// background-image: url("../../assets/img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #f1f4f7;
text-align: center;
.itemBox {
position: absolute;
bottom: 50px;
width: 50px;
height: 50px;
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
border-radius: 50%;
text-align: center;
padding: 20px;
transition: all 0.3s;
cursor: pointer;
&.left {
left: 250px;
}
&.right {
right: 250px;
}
img {
width: 100%;
height: 100%;
}
&:hover {
opacity: 0.8;
}
}
}
.module_2 {
height: 930px;
// height: 1080px;
background-color: #fff;
padding-top: 53px;
// padding-top: 133px;
text-align: center;
.title {
text-align: center;
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232324;
line-height: 62px;
margin-bottom: 44px;
}
img {
width: 1293px;
height: 798px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_3 {
height: 850px;
background-color: #ebeef7;
padding-top: 53px;
text-align: center;
.title {
text-align: center;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 82px;
}
.style {
text-align: center;
font-size: 24px;
letter-spacing: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 99px;
}
img {
width: 100%;
height: 527px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_4 {
height: 850px;
background-color: #fff;
padding-top: 26px;
padding-left: 116px;
text-align: center;
.imgBox {
position: relative;
width: 1669px;
height: 782px;
.textInsideBox {
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
// margin-left: 570px;
z-index: 99;
.title {
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
text-align: center;
margin-bottom: 94px;
}
.style {
font-size: 24px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
letter-spacing: 20px;
color: #4d4d4d;
line-height: 36px;
}
}
img {
width: 100%;
height: 100%;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
}
</style>

+ 650
- 0
src/components/views/shadow.vue Vedi File

@@ -0,0 +1,650 @@
<template>
<div class="Box" id="top">
<div
class="module_1"
style="position: relative; background-color: #7868ca; height: 800px"
>
<video
ref="videoPlayer"
style="position: absolute; right: 250px"
src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4"
max-width="800px"
height="800px"
autoplay
muted
controls
loop="loop"
/>
<!-- <img src="../../assets/img/metavatar_live/suiMang_live@2x.png" width="100%" height="100%" /> -->
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧影</div>
<div class="title_item1_y" v-if="characters == 1">
数字人内容生产从未如此高效便捷
</div>
<div class="desc" v-if="characters == 1">
<div>文字,语音,源视频多种驱动方式支持随时生产内容,紧跟热点</div>
<div>高自然度,逼真度让您的数字人完全跨过恐怖谷</div>
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">MetaNeuver</div>
<div class="title_item1_y" v-if="characters != 1">
Supports multimodal user input, text, voice, and source video.
</div>
<div class="desc" v-if="characters != 1">
<div>
Allows your digital human to seamlessly cross the uncanny valley,
ensuring an immersive and believable experience.enabling content
production at any time and keeping up with all the latest trends.
</div>
<div v-if="false">
High naturalness and realism let your digital human completely cross
the uncanny valley
</div>
</div>
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="md1" id="md1"></div>
</div>
<div class="module_2">
<div class="title" v-if="characters == 1">
只需
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png"
/>
步完成一条数字人视频内容生成
</div>
<div class="title" v-if="characters != 1">
Just
<img
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/3@2x.png"
/>
step to complete the generation of digital human video content
</div>
<div class="images">
<li>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/001_en.jpg"
alt=""
/>
</li>
<li>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/002_en.jpg"
alt=""
/>
</li>
<li>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003@2x.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/003_en.jpg"
alt=""
/>
</li>
<li class="videoLi">
<div class="imgBox1" @click="goSetVedio(isPlayed)">
<img
v-if="isPlayed"
class="play"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/play.png"
title="click to play"
/>
<img
v-else
class="play"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png"
title="click to pause"
/>
<!-- <video ref="videoII" src="https://video.metavatar.cc/sv/2474483a-188345f1cb5/2474483a-188345f1cb5.mp4" /> -->
<video
ref="videoII"
src="https://video.metavatar.cc/sv/979bc5a-18841d2371c/979bc5a-18841d2371c.mp4"
/>
</div>
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/004@2x.png" alt="" /> -->
</li>
</div>
</div>
<div class="module_3">
<div class="title" v-if="characters == 1">中之人驱动</div>
<div class="title" v-if="characters != 1">“中の人” driving</div>
<img
v-if="characters == 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_zh.png"
alt=""
/>
<img
v-if="characters != 1"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_live/huibo333_1_en.png"
alt=""
/>
</div>
<el-dialog
:title="
characters == 1
? '留下您的信息,我们会尽快与您取得联系'
: 'Tell us about yourself, we ll be in touch right away.'
"
:visible.sync="dialogVisible"
width="34%"
>
<el-form
ref="form"
:rules="characters == 1 ? rules : rulesEnglish"
:model="form"
>
<el-form-item class="width" prop="name">
<el-input
v-model="form.name"
maxlength="10"
:placeholder="characters == 1 ? '姓名' : 'Name'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="phone">
<el-input
v-model="form.phone"
:placeholder="characters == 1 ? '手机' : 'Phone'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{
characters == 1 ? "取 消" : "Cancel"
}}</el-button>
<el-button type="primary" @click="submit()">{{
characters == 1 ? "提 交" : "Submit"
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";
export default {
data() {
return {
isPlayed: true,
//零时存放
charactersMy: 1,
//
userName: "",
phone: "",
email: "",
form: {
name: "",
phone: "",
email: "",
},
rules: {
name: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
name: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false,
};
},
methods: {
...mapActions(["setCharacters"]),
goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},
change(value) {
console.log(value);
this.setCharacters(value);
},
showBox() {
this.dialogVisible = true;
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
goPages(path) {
this.$router.push(`/${path}`);
},
submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},
mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
});
},
};
</script>
<style lang="scss" scoped>
.Box {
width: 100%;
overflow: hidden;
}
.topBox {
width: 90%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// background-color: rgba(255, 255, 255, 0.1);
}
.logoBox {
margin-top: 35px;
margin-left: 35px;
margin-bottom: 35px;
float: left;
overflow: hidden;
}
.logo {
float: left;
// width: 60px;
// height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 600px;
float: left;
margin-top: 20px;
margin-left: 16%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.categoryitem {
width: 110px;
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
// background-color: #16e9d6
}
.cutBox {
float: right;
margin-top: 35px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 10px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}
.module_1 {
width: 100%;
// height: 1080px;
// background-color: aquamarine;
// background-image: url("../../assets/img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #f1f4f7;
.titleBox {
width: 36%;
position: absolute;
top: 240px;
left: 194px;
overflow: hidden;
// color: #323232;
color: #fff;
.title_item1 {
margin-bottom: 14px;
font-size: 60px;
}
.title_item1_y {
// margin-bottom: 14px;
font-size: 36px;
}
.title_item2 {
margin-bottom: 20px;
font-size: 42px;
}
.title_item3 {
font-size: 16px;
line-height: 30px;
}
.title_btn {
margin-top: 60px;
height: 60px;
width: 220px;
text-align: center;
line-height: 60px;
color: #fff;
// color: #323232;
border-radius: 40px;
border: #fff solid 3px;
// border: #323232 solid 3px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #16e9d6;
border: #16e9d6 solid 3px;
}
}
.desc {
margin-top: 29px;
font-size: 16px;
line-height: 36px;
}
}
}
.module_2 {
height: 760px;
background: #ffffff;
padding-top: 32px;
padding-left: 116px;
padding-right: 85px;
.title {
text-align: center;
margin-bottom: 72px;
font-size: 36px;
img {
position: relative;
top: 18px;
width: 59px;
height: 60px;
}
}
.images {
display: flex;
justify-content: space-between;
li {
list-style: none;
margin-right: 9px;
> img {
width: 423px;
height: 540px;
cursor: pointer;
transition: all 0.3s;
&:hover {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.548);
transform: translateY(-20px);
}
}
}
}
.videoLi {
overflow: hidden;
.imgBox1 {
position: relative;
float: left;
width: 100%;
height: 100%;
cursor: pointer;
.play {
position: absolute;
top: 42%;
left: 38%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
z-index: 99;
transition: all 0.3s;
transform: scale(10);
opacity: 0;
}
// background-color: #16e9d6;
video {
background-color: #7868ca;
width: 423px;
height: 540px;
}
&:hover {
.play {
transform: scale(1);
opacity: 1;
}
}
}
}
}
.module_3 {
height: 810px;
background-color: #ebeef7;
padding-top: 33px;
text-align: center;
transition: all 0.3s;
.title {
text-align: center;
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 44px;
}
img {
width: 1250px;
height: 665px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
</style>

+ 563
- 0
src/components/views/turing.vue Vedi File

@@ -0,0 +1,563 @@
<template>
<div class="Box" id="top">
<div class="module_1">
<img
ref="vidoe"
src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/LiLei@2x.png"
width="100%"
height="100%"
autoplay
muted="muted"
loop="loop"
/>
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">邃芒慧侃</div>
<!-- <div class="title_item3" v-if="characters == 1">
轻松创造您独一无二的数字人IP
</div> -->
<!-- <div class="title_item3" v-if="characters==1">创造生成 超真实 超写实 风格化 不同性别</div>
<div class="title_item3" v-if="characters==1">多人种 分身化身随心创造</div> -->
<div class="title_item1_y" v-if="characters == 1">与李雷成为朋友</div>
<div class="title_item1" v-if="characters != 1">MetaTuring</div>
<div class="title_item1_y" v-if="characters != 1">
Be friend with Lee
</div>
<!-- <div class="title_item3" v-if="characters != 1">
Easily create your unique digital IP
</div> -->
<div
class="title_btn"
@click="showBox"
v-if="$store.state.publicObj.showTryItNow"
>
{{ characters == 1 ? "与李雷交谈" : "coming soon" }}
</div>
</div>
<div class="md1" id="md1"></div>
</div>
<el-dialog
:title="
characters == 1
? '留下您的信息,我们会尽快与您取得联系'
: 'Tell us about yourself, we ll be in touch right away.'
"
:visible.sync="dialogVisible"
width="34%"
>
<el-form
ref="form"
:rules="characters == 1 ? rules : rulesEnglish"
:model="form"
>
<el-form-item class="width" prop="name">
<el-input
v-model="form.name"
maxlength="10"
:placeholder="characters == 1 ? '姓名' : 'Name'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="phone">
<el-input
v-model="form.phone"
:placeholder="characters == 1 ? '手机' : 'Phone'"
></el-input>
</el-form-item>
<el-form-item class="width" prop="email">
<el-input v-model="form.email" placeholder="Email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">{{
characters == 1 ? "取 消" : "Cancel"
}}</el-button>
<el-button type="primary" @click="submit()">{{
characters == 1 ? "提 交" : "Submit"
}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";
export default {
data() {
return {
//零时存放
charactersMy: 1,
languageLsit: [
{
name: "Cn",
value: 1,
url: require("../../assets/img/cn.jpeg"),
},
{
name: "En",
value: 2,
url: require("../../assets/img/en.jpg"),
},
],
//
userName: "",
phone: "",
email: "",
form: {
name: "",
phone: "",
email: "",
},
rules: {
name: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
name: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false,
module_6_data: [
{
url: require("../../assets/img/demo_1.png"),
name: "增加电子商务销售额",
name_y: "Increase eCommerce sales",
},
{
url: require("../../assets/img/demo_2.png"),
name: "推动品牌声誉",
name_y: "Drive Brand engagement",
},
{
url: require("../../assets/img/demo_3.png"),
name: "拓展客户服务",
name_y: "Scale customer service",
},
{
url: require("../../assets/img/demo_4.png"),
name: " 节约您的劳动成本",
name_y: " Augment your current workforce",
},
{
url: require("../../assets/img/demo_5.png"),
name: " 提供支持和陪伴",
name_y: "Provide support and companionship",
},
{
url: require("../../assets/img/demo_6.png"),
name: "投资元宇宙的未来",
name_y: "Deliver knowledge and learning",
},
{
url: require("../../assets/img/demo_7.png"),
name: "数字化名人的力量",
name_y: "Leverage the power of Digital Celebrities",
},
{
url: require("../../assets/img/demo_8.png"),
name: "传递学习和知识",
name_y: " Invest in the metaverse future",
},
],
carouselLsit: [
{
url: require("../../assets/img/carousel1.png"),
},
{
url: require("../../assets/img/carousel2.png"),
},
{
url: require("../../assets/img/carousel3.png"),
},
],
partnerLsit: [
{
url: require("../../assets/img/partner1.png"),
},
{
url: require("../../assets/img/partner2.png"),
},
{
url: require("../../assets/img/partner3.png"),
},
{
url: require("../../assets/img/partner4.png"),
},
{
url: require("../../assets/img/partner5.png"),
},
],
timeLsit: [
{
title: "2018-10",
ctn1_y: "Team built up in Oct. 2018",
// ctn2_y: "Team built up in Oct. 2018",
ctn1: "团队组建",
// ctn2: "团队组建"
},
{
url: require("../../assets/img/carousel2.png"),
title: "2019",
ctn1_y: "Deliver the first movie project in May. 2019",
// ctn2_y: "Deliver the first movie project in May. 2019",
ctn1: "第一个影视特效 ",
ctn2: "项目交付",
},
{
url: require("../../assets/img/carousel3.png"),
title: "2021-05",
ctn1_y: "Beta of MetaGene published in May,2021",
// ctn2_y: "Beta of MetaGene published in May,2021",
ctn1: "内部产品",
ctn2: "Metagene V1完成",
},
{
url: require("../../assets/img/carousel3.png"),
title: "2021-08",
ctn1_y: "Metavatar built up in Aug, 2021",
// ctn2_y: "Metavatar built up in Aug, 2021",
ctn1: "邃芒科技成立",
// ctn2: "邃芒科技成立",
},
{
url: require("../../assets/img/carousel3.png"),
title: "2022-01",
ctn1_y: "Angel fund in Jan, 2022",
// ctn2_y: "Angel fund in Jan, 2022",
ctn1: "获得天使轮融资",
// ctn2: "获得天使轮融资",
},
{
url: require("../../assets/img/carousel3.png"),
title: "2022-06",
ctn1_y:
"Deliver the first project based on Magenta for our strategic partner in Jun,2022",
// ctn2_y: "Beta of MetaGene published in May,2021",
ctn1: "为战略合作伙伴新奥特",
ctn2: "交付首个基于MetaGene的内容生产项目",
},
],
};
},
methods: {
...mapActions(["setCharacters"]),
change(value) {
console.log(value);
this.setCharacters(value);
},
showBox() {
this.dialogVisible = true;
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
//定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start",
//定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest",
//"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
behavior: "smooth",
});
},
goPages(path) {
this.$router.push(`/${path}`);
},
submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},
mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView("top");
});
},
};
</script>
<style lang="scss" scoped>
.Box {
width: 100%;
overflow: hidden;
}
.topBox {
width: 90%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// background-color: rgba(255, 255, 255, 0.1);
}
.logoBox {
margin-top: 35px;
margin-left: 35px;
margin-bottom: 35px;
float: left;
overflow: hidden;
}
.logo {
float: left;
// width: 60px;
// height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 600px;
float: left;
margin-top: 20px;
margin-left: 16%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.categoryitem {
width: 110px;
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
// background-color: #16e9d6
}
.cutBox {
float: right;
margin-top: 35px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 10px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}
.module_1 {
width: 100%;
// height: 1080px;
// background-color: aquamarine;
// background-image: url("../../assets/img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #f1f4f7;
.titleBox {
width: 36%;
position: absolute;
top: 390px;
left: 190px;
overflow: hidden;
color: #fff;
.title_item1 {
margin-bottom: 14px;
font-size: 60px;
}
.title_item1_y {
// margin-bottom: 14px;
font-size: 36px;
}
.title_item2 {
margin-bottom: 20px;
font-size: 42px;
}
.title_item3 {
font-size: 16px;
line-height: 30px;
}
.title_btn {
margin-top: 60px;
height: 60px;
width: 220px;
text-align: center;
line-height: 60px;
color: #fff;
border-radius: 40px;
border: #fff solid 3px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #16e9d6;
border: #16e9d6 solid 3px;
}
}
}
}
</style>

+ 7
- 7
src/registerServiceWorker.js Vedi File

@@ -4,28 +4,28 @@ import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
ready() {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
registered() {
console.log('Service worker has been registered.')
},
cached () {
cached() {
console.log('Content has been cached for offline use.')
},
updatefound () {
updatefound() {
console.log('New content is downloading.')
},
updated () {
updated() {
console.log('New content is available; please refresh.')
},
offline () {
offline() {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
error(error) {
console.error('Error during service worker registration:', error)
}
})


+ 43
- 11
src/router/index.js Vedi File

@@ -8,32 +8,64 @@ const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const routes = [
{
path: '/',
name: 'Home',
// component: Home
component: ()=> import("../components/home/home"),
component: () => import("../components/home/home"),
},
{
path: '/index.html',
name: 'Home',
component: () => import("../components/home/home"),
},
{
path: '/aboutUe',
name: 'aboutUe',
// component: Home
component: ()=> import("../components/aboutUe/aboutUe"),
path: '/aboutUs',
name: 'aboutUs',
component: () => import("../components/aboutUs/aboutUs"),
},
{
path: '/styleAdd',
name: 'styleAdd',
// component: Home
component: ()=> import("../components/styleAdd/styleAdd"),
component: () => import("../components/styleAdd/styleAdd"),
},
{
path: '/MetaTuring',
name: 'turing',
component: () => import("../components/views/turing"),
},
{
path: '/MetaStreaming',
name: 'live',
component: () => import("../components/views/live"),
},
{
path: '/MetaGene',
name: 'generate',
component: () => import("../components/views/generate"),
},
{
path: '/MetaNeuver',
name: 'shadow',
component: () => import("../components/views/shadow"),
},
{
path: '/realTime',
name: 'realTime',
component: () => import("../components/views/realTime"),
},
{
path: '/realTimeC',
name: 'realTimeC',
component: () => import("../components/views/realTimeC"),
},
]

const router = new VueRouter({
mode: 'history',
// mode: 'history',
base: process.env.BASE_URL,
routes
routes,
})

export default router

+ 8
- 7
src/store/modules/public.js Vedi File

@@ -1,15 +1,16 @@
let publicObj = {
state:{
characters:1,//1=》中文 2=》英文
state: {
characters: 1,//1=》中文 2=》英文
showTryItNow: false
},
mutations:{
setCharacters(state,data){
mutations: {
setCharacters(state, data) {
state.characters = data
}
},
actions:{
setCharacters(context,data){
context.commit("setCharacters" ,data)
actions: {
setCharacters(context, data) {
context.commit("setCharacters", data)
}
}
}

+ 19
- 17
vue.config.js Vedi File

@@ -4,26 +4,26 @@ module.exports = {
css: {
// options here will be passed to css-loader
},
// postcss: {
// // options here will be passed to postcss-loader
// plugins: [require('postcss-px2rem')({
// remUnit: 75
// })]
// }
postcss: {
// options here will be passed to postcss-loader
// plugins: [require('postcss-px2rem')({
// remUnit: 75
// })]
}


}
},
pwa: {
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
},
},
//http://www.metavatar.cc/
devServer: {
overlay: {
@@ -37,11 +37,13 @@ module.exports = {
pathRewrite: {
'^/api': ''
},
},
}
},
publicPath: './',
lintOnSave: false,
publicPath: './', // 打包后引用的资源路径
// 打包后引用的资源路径

}

+ 8180
- 0
yarn.lock
File diff soppresso perché troppo grande
Vedi File


Caricamento…
Annulla
Salva