Salīdzināt revīzijas

...

67 Revīzijas

Autors SHA1 Ziņojums Datums
  chutingting 894e0b73f4 edit video pirms 1 gada
  HolyKnightIX a53c1fde5c upload pirms 1 gada
  HolyKnightIX d5e5019189 upload pirms 1 gada
  congzc 274144f94d 1 pirms 1 gada
  congzc 1adb25dc21 1 pirms 1 gada
  congzc 02699e9ba6 Merge branch 'YWQ' of https://git.malls.iformall.com/suimang/home_pc into YWQ pirms 1 gada
  congzc 445fd8cd42 跳转到照片说话 pirms 1 gada
  congzc 0cbcf1b565 1 pirms 1 gada
  congzc 3b7b4af0d6 1 pirms 1 gada
  congzc f806f8b928 1 pirms 1 gada
  congzc 7da58ce307 1 pirms 1 gada
  congzc 39af4e3769 1 pirms 1 gada
  congzc 1fab466807 1 pirms 1 gada
  congzc 2f0f8754ed 1 pirms 1 gada
  congzc f31731df81 首页更换视频 pirms 1 gada
  congzc d51445f51f 轮播图 pirms 1 gada
  congzc 75b9344781 文案改版 pirms 1 gada
  HolyKnightIX 6f0ed1e198 upload pirms 1 gada
  HolyKnightIX 761530540c upload pirms 1 gada
  HolyKnightIX 9a2ab10ce0 upload pirms 1 gada
  HolyKnightIX 63ca69d374 upload pirms 1 gada
  HolyKnightIX 6a401f7b17 upload pirms 1 gada
  HolyKnightIX 18a07d0eaa final push pirms 1 gada
  HolyKnightIX ac5049eb5b upload pirms 1 gada
  HolyKnightIX 74ee2c48cb upload pirms 1 gada
  HolyKnightIX 5dd7a35be3 upload pirms 1 gada
  congzc 458e8dffd9 2 pirms 1 gada
  HolyKnightIX eadc394716 upload pirms 1 gada
  HolyKnightIX 25c97f740e uplaod pirms 1 gada
  HolyKnightIX afb2b1c56e upload pirms 1 gada
  congzc edddd7a327 1 pirms 1 gada
  congzc 456071af4d 1 pirms 1 gada
  congzc a608f22e63 1 pirms 1 gada
  congzc df30289cad 1 pirms 1 gada
  HolyKnightIX ad91859452 upload pirms 1 gada
  HolyKnightIX b9601edbbd upload pirms 1 gada
  HolyKnightIX f8b79d2776 upload pirms 1 gada
  congzc 87af8b6903 1 pirms 1 gada
  congzc 5ac88ba082 2 pirms 1 gada
  congzc dd84270e6c 首行缩进 pirms 1 gada
  congzc 8718bf091c 抖音二维码 pirms 1 gada
  congzc 9d26207060 图片间距调整 pirms 1 gada
  congzc c571fe0c1e 大事件轮播 pirms 1 gada
  congzc 39deacb5b4 底部表单校验优化 pirms 1 gada
  congzc 309685118d 处理三张图片文字和表单接口 pirms 1 gada
  congzc d34fbdec30 表单验证 pirms 1 gada
  congzc c567304b23 英文翻译和合作伙伴 pirms 1 gada
  congzc 287949fc32 node-sass改版 pirms 1 gada
  congzc a960dd4795 官网底部备案号修改 pirms 1 gada
  HolyKnightIX c566c5c3ba upload pirms 2 gadiem
  HolyKnightIX 62072a7142 upload pirms 2 gadiem
  HolyKnightIX df7c540a04 upload pirms 2 gadiem
  HolyKnightIX ef8b2345c3 update pirms 2 gadiem
  HolyKnightIX 2500090d8a upload pirms 2 gadiem
  HolyKnightIX f3cf15a77f 4pagesChanges pirms 2 gadiem
  HolyKnightIX 10195e0b9d upload pirms 2 gadiem
  HolyKnightIX fdb95c7041 upload pirms 2 gadiem
  HolyKnightIX 1d70842c83 Pages * 4 ,finished pirms 2 gadiem
  HolyKnightIX 9293288a01 upload pirms 2 gadiem
  HolyKnightIX 6c75430042 upload pirms 2 gadiem
  HolyKnightIX 4e5868de65 push pirms 2 gadiem
  HolyKnightIX dace27be49 new pages *4 pirms 2 gadiem
  HolyKnightIX 3823200da6 Merge branch 'YWQ' of https://git.malls.iformall.com/suimang/home_pc into YWQ pirms 2 gadiem
  HolyKnightIX e6e00ce12e change pirms 2 gadiem
  HolyKnightIX 34c1224f86 deBug pirms 2 gadiem
  HolyKnightIX 92065f58b8 half pirms 2 gadiem
  HolyKnightIX 9343f32702 upload pirms 2 gadiem
84 mainītis faili ar 14983 papildinājumiem un 13190 dzēšanām
Dalītais skats
  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ārs
      src/assets/icon/input.png
  7. Binārs
      src/assets/icon/voice.png
  8. Binārs
      src/assets/img/BG (2).png
  9. Binārs
      src/assets/img/BG@2x.png
  10. Binārs
      src/assets/img/LiLei.png
  11. Binārs
      src/assets/img/LiLei@2x.png
  12. Binārs
      src/assets/img/demo.png
  13. Binārs
      src/assets/img/dy.jpg
  14. Binārs
      src/assets/img/dy.png
  15. Binārs
      src/assets/img/dy_en.png
  16. Binārs
      src/assets/img/earth.png
  17. Binārs
      src/assets/img/metavatar_generate/model2-IMG@2x.png
  18. Binārs
      src/assets/img/metavatar_generate/model3-IMG@2x.png
  19. Binārs
      src/assets/img/metavatar_generate/model4-IMG@2x.png
  20. Binārs
      src/assets/img/metavatar_generate/suiMang_generate@2x.png
  21. Binārs
      src/assets/img/metavatar_generate/组 41(1).png
  22. Binārs
      src/assets/img/metavatar_generate/组 41(2).png
  23. Binārs
      src/assets/img/metavatar_generate/组 41.png
  24. Binārs
      src/assets/img/metavatar_generate/组 41@2x(1).png
  25. Binārs
      src/assets/img/metavatar_generate/组 41@2x(2).png
  26. Binārs
      src/assets/img/metavatar_generate/组 52 拷贝.png
  27. Binārs
      src/assets/img/metavatar_generate/组 55.png
  28. Binārs
      src/assets/img/metavatar_generate/组 55@2x(1).png
  29. Binārs
      src/assets/img/metavatar_live/001.png
  30. Binārs
      src/assets/img/metavatar_live/001@2x.png
  31. Binārs
      src/assets/img/metavatar_live/002.png
  32. Binārs
      src/assets/img/metavatar_live/002@2x.png
  33. Binārs
      src/assets/img/metavatar_live/003.png
  34. Binārs
      src/assets/img/metavatar_live/003@2x.png
  35. Binārs
      src/assets/img/metavatar_live/004.png
  36. Binārs
      src/assets/img/metavatar_live/004@2x.png
  37. Binārs
      src/assets/img/metavatar_live/3.png
  38. Binārs
      src/assets/img/metavatar_live/3@2x.png
  39. Binārs
      src/assets/img/metavatar_live/picInside@2x.png
  40. Binārs
      src/assets/img/metavatar_live/suiMang_live2@2x.png
  41. Binārs
      src/assets/img/metavatar_live/suiMang_live@2x.png
  42. Binārs
      src/assets/img/metavatar_live/组 3545 拷贝.png
  43. Binārs
      src/assets/img/metavatar_live/组 41(1).png
  44. Binārs
      src/assets/img/metavatar_live/组 41.png
  45. Binārs
      src/assets/img/metavatar_live/组 41@2x(1).png
  46. Binārs
      src/assets/img/metavatar_shadow/imgList1@2x.png
  47. Binārs
      src/assets/img/metavatar_shadow/imgList1@2xEnglish.png
  48. Binārs
      src/assets/img/metavatar_shadow/imgList2@2x.png
  49. Binārs
      src/assets/img/metavatar_shadow/imgList2@2xEnglish.png
  50. Binārs
      src/assets/img/metavatar_shadow/imgList3@2x.png
  51. Binārs
      src/assets/img/metavatar_shadow/imgList3@2xEnglish.png
  52. Binārs
      src/assets/img/metavatar_shadow/scriptDrive@2x.png
  53. Binārs
      src/assets/img/metavatar_shadow/suiMang_shadow@2x.png
  54. Binārs
      src/assets/img/metavatar_shadow/组 3544(1).png
  55. Binārs
      src/assets/img/metavatar_shadow/组 3544(2).png
  56. Binārs
      src/assets/img/metavatar_shadow/组 3544.png
  57. Binārs
      src/assets/img/metavatar_shadow/组 41.png
  58. Binārs
      src/assets/img/metavatar_shadow/组 45 拷贝.png
  59. Binārs
      src/assets/img/module_5_bg_cut.png
  60. Binārs
      src/assets/img/parter7.png
  61. Binārs
      src/assets/img/partner6.png
  62. Binārs
      src/assets/img/pause.png
  63. Binārs
      src/assets/img/play.png
  64. Binārs
      src/assets/img/vx.jpg
  65. Binārs
      src/assets/img/vx_en.png
  66. Binārs
      src/assets/img/zhongzhiren.jpg
  67. Binārs
      src/assets/img/zhongzhiren.png
  68. Binārs
      src/assets/video/P1 横版_x264.mp4
  69. Binārs
      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 Parādīt failu

@@ -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 Parādīt failu

@@ -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
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 31
- 31
package.json Parādīt failu

@@ -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 Parādīt failu

@@ -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ārs
src/assets/icon/input.png Parādīt failu

Pirms Pēc
Platums: 600  |  Augstums: 600  |  Izmērs: 12 KiB

Binārs
src/assets/icon/voice.png Parādīt failu

Pirms Pēc
Platums: 400  |  Augstums: 400  |  Izmērs: 14 KiB

Binārs
src/assets/img/BG (2).png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1080  |  Izmērs: 2.0 MiB

Binārs
src/assets/img/BG@2x.png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 6.2 MiB

Binārs
src/assets/img/LiLei.png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1080  |  Izmērs: 2.1 MiB

Binārs
src/assets/img/LiLei@2x.png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 5.5 MiB

Binārs
src/assets/img/demo.png Parādīt failu

Pirms Pēc
Platums: 1937  |  Augstums: 1658  |  Izmērs: 1.5 MiB

Binārs
src/assets/img/dy.jpg Parādīt failu

Pirms Pēc
Platums: 488  |  Augstums: 488  |  Izmērs: 162 KiB

Binārs
src/assets/img/dy.png Parādīt failu

Pirms Pēc
Platums: 488  |  Augstums: 488  |  Izmērs: 175 KiB

Binārs
src/assets/img/dy_en.png Parādīt failu

Pirms Pēc
Platums: 488  |  Augstums: 488  |  Izmērs: 86 KiB

Binārs
src/assets/img/earth.png Parādīt failu

Pirms Pēc
Platums: 128  |  Augstums: 128  |  Izmērs: 3.2 KiB

Binārs
src/assets/img/metavatar_generate/model2-IMG@2x.png Parādīt failu

Pirms Pēc
Platums: 2586  |  Augstums: 1596  |  Izmērs: 1.6 MiB

Binārs
src/assets/img/metavatar_generate/model3-IMG@2x.png Parādīt failu

Pirms Pēc
Platums: 3850  |  Augstums: 1054  |  Izmērs: 3.1 MiB

Binārs
src/assets/img/metavatar_generate/model4-IMG@2x.png Parādīt failu

Pirms Pēc
Platums: 1669  |  Augstums: 782  |  Izmērs: 969 KiB

Binārs
src/assets/img/metavatar_generate/suiMang_generate@2x.png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 8.4 MiB

Binārs
src/assets/img/metavatar_generate/组 41(1).png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1080  |  Izmērs: 38 KiB

Binārs
src/assets/img/metavatar_generate/组 41(2).png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1080  |  Izmērs: 38 KiB

Binārs
src/assets/img/metavatar_generate/组 41.png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1080  |  Izmērs: 2.6 MiB

Binārs
src/assets/img/metavatar_generate/组 41@2x(1).png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 147 KiB

Binārs
src/assets/img/metavatar_generate/组 41@2x(2).png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 147 KiB

Binārs
src/assets/img/metavatar_generate/组 52 拷贝.png Parādīt failu

Pirms Pēc
Platums: 1293  |  Augstums: 798  |  Izmērs: 510 KiB

Binārs
src/assets/img/metavatar_generate/组 55.png Parādīt failu

Pirms Pēc
Platums: 1925  |  Augstums: 527  |  Izmērs: 997 KiB

Binārs
src/assets/img/metavatar_generate/组 55@2x(1).png Parādīt failu

Pirms Pēc
Platums: 3338  |  Augstums: 1564  |  Izmērs: 3.0 MiB

Binārs
src/assets/img/metavatar_live/001.png Parādīt failu

Pirms Pēc
Platums: 423  |  Augstums: 540  |  Izmērs: 309 KiB

Binārs
src/assets/img/metavatar_live/001@2x.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1080  |  Izmērs: 952 KiB

Binārs
src/assets/img/metavatar_live/002.png Parādīt failu

Pirms Pēc
Platums: 423  |  Augstums: 540  |  Izmērs: 216 KiB

Binārs
src/assets/img/metavatar_live/002@2x.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1080  |  Izmērs: 638 KiB

Binārs
src/assets/img/metavatar_live/003.png Parādīt failu

Pirms Pēc
Platums: 423  |  Augstums: 540  |  Izmērs: 107 KiB

Binārs
src/assets/img/metavatar_live/003@2x.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1080  |  Izmērs: 309 KiB

Binārs
src/assets/img/metavatar_live/004.png Parādīt failu

Pirms Pēc
Platums: 423  |  Augstums: 540  |  Izmērs: 315 KiB

Binārs
src/assets/img/metavatar_live/004@2x.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1080  |  Izmērs: 994 KiB

Binārs
src/assets/img/metavatar_live/3.png Parādīt failu

Pirms Pēc
Platums: 59  |  Augstums: 60  |  Izmērs: 1.9 KiB

Binārs
src/assets/img/metavatar_live/3@2x.png Parādīt failu

Pirms Pēc
Platums: 118  |  Augstums: 120  |  Izmērs: 4.6 KiB

Binārs
src/assets/img/metavatar_live/picInside@2x.png Parādīt failu

Pirms Pēc
Platums: 2500  |  Augstums: 1330  |  Izmērs: 3.2 MiB

Binārs
src/assets/img/metavatar_live/suiMang_live2@2x.png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 6.0 MiB

Binārs
src/assets/img/metavatar_live/suiMang_live@2x.png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 3.9 MiB

Binārs
src/assets/img/metavatar_live/组 3545 拷贝.png Parādīt failu

Pirms Pēc
Platums: 1250  |  Augstums: 665  |  Izmērs: 1006 KiB

Binārs
src/assets/img/metavatar_live/组 41(1).png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1080  |  Izmērs: 38 KiB

Binārs
src/assets/img/metavatar_live/组 41.png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1080  |  Izmērs: 1.1 MiB

Binārs
src/assets/img/metavatar_live/组 41@2x(1).png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 147 KiB

Binārs
src/assets/img/metavatar_shadow/imgList1@2x.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1278  |  Izmērs: 726 KiB

Binārs
src/assets/img/metavatar_shadow/imgList1@2xEnglish.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1278  |  Izmērs: 619 KiB

Binārs
src/assets/img/metavatar_shadow/imgList2@2x.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1278  |  Izmērs: 981 KiB

Binārs
src/assets/img/metavatar_shadow/imgList2@2xEnglish.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1278  |  Izmērs: 891 KiB

Binārs
src/assets/img/metavatar_shadow/imgList3@2x.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1278  |  Izmērs: 1.3 MiB

Binārs
src/assets/img/metavatar_shadow/imgList3@2xEnglish.png Parādīt failu

Pirms Pēc
Platums: 846  |  Augstums: 1278  |  Izmērs: 1.1 MiB

Binārs
src/assets/img/metavatar_shadow/scriptDrive@2x.png Parādīt failu

Pirms Pēc
Platums: 2892  |  Augstums: 1276  |  Izmērs: 2.2 MiB

Binārs
src/assets/img/metavatar_shadow/suiMang_shadow@2x.png Parādīt failu

Pirms Pēc
Platums: 3840  |  Augstums: 2160  |  Izmērs: 9.2 MiB

Binārs
src/assets/img/metavatar_shadow/组 3544(1).png Parādīt failu

Pirms Pēc
Platums: 423  |  Augstums: 639  |  Izmērs: 310 KiB

Binārs
src/assets/img/metavatar_shadow/组 3544(2).png Parādīt failu

Pirms Pēc
Platums: 423  |  Augstums: 639  |  Izmērs: 405 KiB

Binārs
src/assets/img/metavatar_shadow/组 3544.png Parādīt failu

Pirms Pēc
Platums: 423  |  Augstums: 639  |  Izmērs: 230 KiB

Binārs
src/assets/img/metavatar_shadow/组 41.png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1080  |  Izmērs: 2.8 MiB

Binārs
src/assets/img/metavatar_shadow/组 45 拷贝.png Parādīt failu

Pirms Pēc
Platums: 1446  |  Augstums: 638  |  Izmērs: 669 KiB

Binārs
src/assets/img/module_5_bg_cut.png Parādīt failu

Pirms Pēc
Platums: 1920  |  Augstums: 1076  |  Izmērs: 504 KiB

Binārs
src/assets/img/parter7.png Parādīt failu

Pirms Pēc
Platums: 156  |  Augstums: 156  |  Izmērs: 11 KiB

Binārs
src/assets/img/partner6.png Parādīt failu

Pirms Pēc
Platums: 536  |  Augstums: 148  |  Izmērs: 13 KiB

Binārs
src/assets/img/pause.png Parādīt failu

Pirms Pēc
Platums: 128  |  Augstums: 128  |  Izmērs: 3.7 KiB

Binārs
src/assets/img/play.png Parādīt failu

Pirms Pēc
Platums: 128  |  Augstums: 128  |  Izmērs: 4.3 KiB

Binārs
src/assets/img/vx.jpg Parādīt failu

Pirms Pēc
Platums: 1280  |  Augstums: 1280  |  Izmērs: 150 KiB

Binārs
src/assets/img/vx_en.png Parādīt failu

Pirms Pēc
Platums: 1280  |  Augstums: 1280  |  Izmērs: 285 KiB

Binārs
src/assets/img/zhongzhiren.jpg Parādīt failu

Pirms Pēc
Platums: 1003  |  Augstums: 533  |  Izmērs: 76 KiB

Binārs
src/assets/img/zhongzhiren.png Parādīt failu

Pirms Pēc
Platums: 841  |  Augstums: 449  |  Izmērs: 303 KiB

Binārs
src/assets/video/P1 横版_x264.mp4 Parādīt failu


Binārs
src/assets/video/video2.mp4 Parādīt failu


src/components/aboutUe/aboutUe.vue → src/components/aboutUs/aboutUs.vue Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


+ 609
- 0
src/components/views/generate.vue Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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 Parādīt failu

@@ -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
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


Notiek ielāde…
Atcelt
Saglabāt