Porovnat revize

...

67 Revize

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

@@ -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 Zobrazit soubor

@@ -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
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 31
- 31
package.json Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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ární
src/assets/icon/input.png Zobrazit soubor

Před Za
Šířka: 600  |  Výška: 600  |  Velikost: 12 KiB

binární
src/assets/icon/voice.png Zobrazit soubor

Před Za
Šířka: 400  |  Výška: 400  |  Velikost: 14 KiB

binární
src/assets/img/BG (2).png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1080  |  Velikost: 2.0 MiB

binární
src/assets/img/BG@2x.png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 6.2 MiB

binární
src/assets/img/LiLei.png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1080  |  Velikost: 2.1 MiB

binární
src/assets/img/LiLei@2x.png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 5.5 MiB

binární
src/assets/img/demo.png Zobrazit soubor

Před Za
Šířka: 1937  |  Výška: 1658  |  Velikost: 1.5 MiB

binární
src/assets/img/dy.jpg Zobrazit soubor

Před Za
Šířka: 488  |  Výška: 488  |  Velikost: 162 KiB

binární
src/assets/img/dy.png Zobrazit soubor

Před Za
Šířka: 488  |  Výška: 488  |  Velikost: 175 KiB

binární
src/assets/img/dy_en.png Zobrazit soubor

Před Za
Šířka: 488  |  Výška: 488  |  Velikost: 86 KiB

binární
src/assets/img/earth.png Zobrazit soubor

Před Za
Šířka: 128  |  Výška: 128  |  Velikost: 3.2 KiB

binární
src/assets/img/metavatar_generate/model2-IMG@2x.png Zobrazit soubor

Před Za
Šířka: 2586  |  Výška: 1596  |  Velikost: 1.6 MiB

binární
src/assets/img/metavatar_generate/model3-IMG@2x.png Zobrazit soubor

Před Za
Šířka: 3850  |  Výška: 1054  |  Velikost: 3.1 MiB

binární
src/assets/img/metavatar_generate/model4-IMG@2x.png Zobrazit soubor

Před Za
Šířka: 1669  |  Výška: 782  |  Velikost: 969 KiB

binární
src/assets/img/metavatar_generate/suiMang_generate@2x.png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 8.4 MiB

binární
src/assets/img/metavatar_generate/组 41(1).png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1080  |  Velikost: 38 KiB

binární
src/assets/img/metavatar_generate/组 41(2).png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1080  |  Velikost: 38 KiB

binární
src/assets/img/metavatar_generate/组 41.png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1080  |  Velikost: 2.6 MiB

binární
src/assets/img/metavatar_generate/组 41@2x(1).png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 147 KiB

binární
src/assets/img/metavatar_generate/组 41@2x(2).png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 147 KiB

binární
src/assets/img/metavatar_generate/组 52 拷贝.png Zobrazit soubor

Před Za
Šířka: 1293  |  Výška: 798  |  Velikost: 510 KiB

binární
src/assets/img/metavatar_generate/组 55.png Zobrazit soubor

Před Za
Šířka: 1925  |  Výška: 527  |  Velikost: 997 KiB

binární
src/assets/img/metavatar_generate/组 55@2x(1).png Zobrazit soubor

Před Za
Šířka: 3338  |  Výška: 1564  |  Velikost: 3.0 MiB

binární
src/assets/img/metavatar_live/001.png Zobrazit soubor

Před Za
Šířka: 423  |  Výška: 540  |  Velikost: 309 KiB

binární
src/assets/img/metavatar_live/001@2x.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1080  |  Velikost: 952 KiB

binární
src/assets/img/metavatar_live/002.png Zobrazit soubor

Před Za
Šířka: 423  |  Výška: 540  |  Velikost: 216 KiB

binární
src/assets/img/metavatar_live/002@2x.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1080  |  Velikost: 638 KiB

binární
src/assets/img/metavatar_live/003.png Zobrazit soubor

Před Za
Šířka: 423  |  Výška: 540  |  Velikost: 107 KiB

binární
src/assets/img/metavatar_live/003@2x.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1080  |  Velikost: 309 KiB

binární
src/assets/img/metavatar_live/004.png Zobrazit soubor

Před Za
Šířka: 423  |  Výška: 540  |  Velikost: 315 KiB

binární
src/assets/img/metavatar_live/004@2x.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1080  |  Velikost: 994 KiB

binární
src/assets/img/metavatar_live/3.png Zobrazit soubor

Před Za
Šířka: 59  |  Výška: 60  |  Velikost: 1.9 KiB

binární
src/assets/img/metavatar_live/3@2x.png Zobrazit soubor

Před Za
Šířka: 118  |  Výška: 120  |  Velikost: 4.6 KiB

binární
src/assets/img/metavatar_live/picInside@2x.png Zobrazit soubor

Před Za
Šířka: 2500  |  Výška: 1330  |  Velikost: 3.2 MiB

binární
src/assets/img/metavatar_live/suiMang_live2@2x.png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 6.0 MiB

binární
src/assets/img/metavatar_live/suiMang_live@2x.png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 3.9 MiB

binární
src/assets/img/metavatar_live/组 3545 拷贝.png Zobrazit soubor

Před Za
Šířka: 1250  |  Výška: 665  |  Velikost: 1006 KiB

binární
src/assets/img/metavatar_live/组 41(1).png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1080  |  Velikost: 38 KiB

binární
src/assets/img/metavatar_live/组 41.png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1080  |  Velikost: 1.1 MiB

binární
src/assets/img/metavatar_live/组 41@2x(1).png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 147 KiB

binární
src/assets/img/metavatar_shadow/imgList1@2x.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1278  |  Velikost: 726 KiB

binární
src/assets/img/metavatar_shadow/imgList1@2xEnglish.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1278  |  Velikost: 619 KiB

binární
src/assets/img/metavatar_shadow/imgList2@2x.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1278  |  Velikost: 981 KiB

binární
src/assets/img/metavatar_shadow/imgList2@2xEnglish.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1278  |  Velikost: 891 KiB

binární
src/assets/img/metavatar_shadow/imgList3@2x.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1278  |  Velikost: 1.3 MiB

binární
src/assets/img/metavatar_shadow/imgList3@2xEnglish.png Zobrazit soubor

Před Za
Šířka: 846  |  Výška: 1278  |  Velikost: 1.1 MiB

binární
src/assets/img/metavatar_shadow/scriptDrive@2x.png Zobrazit soubor

Před Za
Šířka: 2892  |  Výška: 1276  |  Velikost: 2.2 MiB

binární
src/assets/img/metavatar_shadow/suiMang_shadow@2x.png Zobrazit soubor

Před Za
Šířka: 3840  |  Výška: 2160  |  Velikost: 9.2 MiB

binární
src/assets/img/metavatar_shadow/组 3544(1).png Zobrazit soubor

Před Za
Šířka: 423  |  Výška: 639  |  Velikost: 310 KiB

binární
src/assets/img/metavatar_shadow/组 3544(2).png Zobrazit soubor

Před Za
Šířka: 423  |  Výška: 639  |  Velikost: 405 KiB

binární
src/assets/img/metavatar_shadow/组 3544.png Zobrazit soubor

Před Za
Šířka: 423  |  Výška: 639  |  Velikost: 230 KiB

binární
src/assets/img/metavatar_shadow/组 41.png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1080  |  Velikost: 2.8 MiB

binární
src/assets/img/metavatar_shadow/组 45 拷贝.png Zobrazit soubor

Před Za
Šířka: 1446  |  Výška: 638  |  Velikost: 669 KiB

binární
src/assets/img/module_5_bg_cut.png Zobrazit soubor

Před Za
Šířka: 1920  |  Výška: 1076  |  Velikost: 504 KiB

binární
src/assets/img/parter7.png Zobrazit soubor

Před Za
Šířka: 156  |  Výška: 156  |  Velikost: 11 KiB

binární
src/assets/img/partner6.png Zobrazit soubor

Před Za
Šířka: 536  |  Výška: 148  |  Velikost: 13 KiB

binární
src/assets/img/pause.png Zobrazit soubor

Před Za
Šířka: 128  |  Výška: 128  |  Velikost: 3.7 KiB

binární
src/assets/img/play.png Zobrazit soubor

Před Za
Šířka: 128  |  Výška: 128  |  Velikost: 4.3 KiB

binární
src/assets/img/vx.jpg Zobrazit soubor

Před Za
Šířka: 1280  |  Výška: 1280  |  Velikost: 150 KiB

binární
src/assets/img/vx_en.png Zobrazit soubor

Před Za
Šířka: 1280  |  Výška: 1280  |  Velikost: 285 KiB

binární
src/assets/img/zhongzhiren.jpg Zobrazit soubor

Před Za
Šířka: 1003  |  Výška: 533  |  Velikost: 76 KiB

binární
src/assets/img/zhongzhiren.png Zobrazit soubor

Před Za
Šířka: 841  |  Výška: 449  |  Velikost: 303 KiB

binární
src/assets/video/P1 横版_x264.mp4 Zobrazit soubor


binární
src/assets/video/video2.mp4 Zobrazit soubor


src/components/aboutUe/aboutUe.vue → src/components/aboutUs/aboutUs.vue Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 609
- 0
src/components/views/generate.vue Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


Načítá se…
Zrušit
Uložit