Browse Source

Pages * 4 ,finished

ctt_ywq
HolyKnightIX 2 years ago
parent
commit
1d70842c83
52 changed files with 2118 additions and 152 deletions
  1. +17
    -0
      README.md
  2. +17
    -17
      src/App.vue
  3. BIN
      src/assets/img/LiLei.png
  4. BIN
      src/assets/img/LiLei@2x.png
  5. BIN
      src/assets/img/metavatar_generate/model2-IMG@2x.png
  6. BIN
      src/assets/img/metavatar_generate/model3-IMG@2x.png
  7. BIN
      src/assets/img/metavatar_generate/model4-IMG@2x.png
  8. BIN
      src/assets/img/metavatar_generate/suiMang_generate@2x.png
  9. BIN
      src/assets/img/metavatar_generate/组 41(1).png
  10. BIN
      src/assets/img/metavatar_generate/组 41(2).png
  11. BIN
      src/assets/img/metavatar_generate/组 41.png
  12. BIN
      src/assets/img/metavatar_generate/组 41@2x(1).png
  13. BIN
      src/assets/img/metavatar_generate/组 41@2x(2).png
  14. BIN
      src/assets/img/metavatar_generate/组 52 拷贝.png
  15. BIN
      src/assets/img/metavatar_generate/组 55.png
  16. BIN
      src/assets/img/metavatar_generate/组 55@2x(1).png
  17. BIN
      src/assets/img/metavatar_live/001.png
  18. BIN
      src/assets/img/metavatar_live/001@2x.png
  19. BIN
      src/assets/img/metavatar_live/002.png
  20. BIN
      src/assets/img/metavatar_live/002@2x.png
  21. BIN
      src/assets/img/metavatar_live/003.png
  22. BIN
      src/assets/img/metavatar_live/003@2x.png
  23. BIN
      src/assets/img/metavatar_live/004.png
  24. BIN
      src/assets/img/metavatar_live/004@2x.png
  25. BIN
      src/assets/img/metavatar_live/3.png
  26. BIN
      src/assets/img/metavatar_live/3@2x.png
  27. BIN
      src/assets/img/metavatar_live/picInside@2x.png
  28. BIN
      src/assets/img/metavatar_live/suiMang_live2@2x.png
  29. BIN
      src/assets/img/metavatar_live/suiMang_live@2x.png
  30. BIN
      src/assets/img/metavatar_live/组 3545 拷贝.png
  31. BIN
      src/assets/img/metavatar_live/组 41(1).png
  32. BIN
      src/assets/img/metavatar_live/组 41.png
  33. BIN
      src/assets/img/metavatar_live/组 41@2x(1).png
  34. BIN
      src/assets/img/metavatar_shadow/imgList1@2x.png
  35. BIN
      src/assets/img/metavatar_shadow/imgList2@2x.png
  36. BIN
      src/assets/img/metavatar_shadow/imgList3@2x.png
  37. BIN
      src/assets/img/metavatar_shadow/scriptDrive@2x.png
  38. BIN
      src/assets/img/metavatar_shadow/suiMang_shadow@2x.png
  39. BIN
      src/assets/img/metavatar_shadow/组 3544(1).png
  40. BIN
      src/assets/img/metavatar_shadow/组 3544(2).png
  41. BIN
      src/assets/img/metavatar_shadow/组 3544.png
  42. BIN
      src/assets/img/metavatar_shadow/组 41.png
  43. BIN
      src/assets/img/metavatar_shadow/组 45 拷贝.png
  44. +46
    -22
      src/components/aboutUs/aboutUs.vue
  45. +2
    -1
      src/components/common/tail.vue
  46. +33
    -5
      src/components/common/top.vue
  47. +82
    -48
      src/components/home/home.vue
  48. +625
    -0
      src/components/views/generate.vue
  49. +584
    -0
      src/components/views/live.vue
  50. +221
    -52
      src/components/views/shadow.vue
  51. +491
    -0
      src/components/views/turing.vue
  52. +0
    -7
      src/router/index.js

+ 17
- 0
README.md View File

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


## Project setup ## Project setup

``` ```
npm install npm install
``` ```


### Compiles and hot-reloads for development ### Compiles and hot-reloads for development

``` ```
npm run serve npm run serve
``` ```


### Compiles and minifies for production ### Compiles and minifies for production

``` ```
npm run build npm run build
``` ```


### Customize configuration ### Customize configuration

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

未知的node版本,若要稳定运行此项目,请确保node版本为v10.24.1,且运行忽略node版本检查

```powershell
yarn config set ignore-engines true
```

Unknow node.js Engines,if you want to run project,please make sure your node.js Version 10.24.1,then go ignore check
node,js Engines.

```powershell
yarn config set ignore-engines true
```

+ 17
- 17
src/App.vue View File

@@ -1,37 +1,37 @@
<template> <template>
<div id="app"> <div id="app">
<top/>
<top />
<transition name="app" mode="out-in"> <transition name="app" mode="out-in">
<router-view></router-view> <router-view></router-view>
</transition> </transition>
<tail/>
<tail />
</div> </div>
</template> </template>
<script> <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 { export default {
components:{
components: {
top, top,
tail
tail,
}, },
data(){
return{}
data() {
return {};
}, },
}
};
</script> </script>



<style lang="scss"> <style lang="scss">
body,p{
body,
p {
margin: 0 0; margin: 0 0;
padding: 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> </style>

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

Before After
Width: 1920  |  Height: 1080  |  Size: 2.1 MiB

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

Before After
Width: 3840  |  Height: 2160  |  Size: 5.5 MiB

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

Before After
Width: 2586  |  Height: 1596  |  Size: 1.6 MiB

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

Before After
Width: 3850  |  Height: 1054  |  Size: 3.1 MiB

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

Before After
Width: 1669  |  Height: 782  |  Size: 969 KiB

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

Before After
Width: 3840  |  Height: 2160  |  Size: 8.4 MiB

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

Before After
Width: 1920  |  Height: 1080  |  Size: 38 KiB

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

Before After
Width: 1920  |  Height: 1080  |  Size: 38 KiB

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

Before After
Width: 1920  |  Height: 1080  |  Size: 2.6 MiB

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

Before After
Width: 3840  |  Height: 2160  |  Size: 147 KiB

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

Before After
Width: 3840  |  Height: 2160  |  Size: 147 KiB

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

Before After
Width: 1293  |  Height: 798  |  Size: 510 KiB

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

Before After
Width: 1925  |  Height: 527  |  Size: 997 KiB

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

Before After
Width: 3338  |  Height: 1564  |  Size: 3.0 MiB

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

Before After
Width: 423  |  Height: 540  |  Size: 309 KiB

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

Before After
Width: 846  |  Height: 1080  |  Size: 952 KiB

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

Before After
Width: 423  |  Height: 540  |  Size: 216 KiB

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

Before After
Width: 846  |  Height: 1080  |  Size: 638 KiB

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

Before After
Width: 423  |  Height: 540  |  Size: 107 KiB

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

Before After
Width: 846  |  Height: 1080  |  Size: 309 KiB

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

Before After
Width: 423  |  Height: 540  |  Size: 315 KiB

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

Before After
Width: 846  |  Height: 1080  |  Size: 994 KiB

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

Before After
Width: 59  |  Height: 60  |  Size: 1.9 KiB

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

Before After
Width: 118  |  Height: 120  |  Size: 4.6 KiB

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

Before After
Width: 2500  |  Height: 1330  |  Size: 3.2 MiB

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

Before After
Width: 3840  |  Height: 2160  |  Size: 6.0 MiB

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

Before After
Width: 3840  |  Height: 2160  |  Size: 3.9 MiB

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

Before After
Width: 1250  |  Height: 665  |  Size: 1006 KiB

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

Before After
Width: 1920  |  Height: 1080  |  Size: 38 KiB

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

Before After
Width: 1920  |  Height: 1080  |  Size: 1.1 MiB

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

Before After
Width: 3840  |  Height: 2160  |  Size: 147 KiB

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

Before After
Width: 846  |  Height: 1278  |  Size: 726 KiB

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

Before After
Width: 846  |  Height: 1278  |  Size: 981 KiB

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

Before After
Width: 846  |  Height: 1278  |  Size: 1.3 MiB

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

Before After
Width: 2892  |  Height: 1276  |  Size: 2.2 MiB

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

Before After
Width: 3840  |  Height: 2160  |  Size: 9.2 MiB

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

Before After
Width: 423  |  Height: 639  |  Size: 310 KiB

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

Before After
Width: 423  |  Height: 639  |  Size: 405 KiB

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

Before After
Width: 423  |  Height: 639  |  Size: 230 KiB

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

Before After
Width: 1920  |  Height: 1080  |  Size: 2.8 MiB

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

Before After
Width: 1446  |  Height: 638  |  Size: 669 KiB

+ 46
- 22
src/components/aboutUs/aboutUs.vue View File

@@ -1,23 +1,30 @@
<template> <template>
<div class="Box">
<div class="Box" id="top">
<div class="title">遂芒科技</div> <div class="title">遂芒科技</div>
<div class="cont"> <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> </div>
<img src="../../assets/img/my_1.png" alt class="myimg">
<img src="../../assets/img/my_1.png" alt class="myimg" />
<div class="teamBox"> <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="introduceBox">
<div class="title">团队介绍</div> <div class="title">团队介绍</div>
<p> <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> </p>
@@ -25,24 +32,42 @@
</div> </div>
<div class="title1">公司愿景</div> <div class="title1">公司愿景</div>
<p class="vision"> <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> </p>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { 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({ ...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
},
created() {
this.$nextTick(() => {
this.goView("top");
});
}, },
}; };
</script> </script>
@@ -128,4 +153,3 @@ export default {
} }
} }
</style> </style>


+ 2
- 1
src/components/common/tail.vue View File

@@ -49,7 +49,7 @@
</div> </div>


<div class="rqCodeBox"> <div class="rqCodeBox">
<div class="phone">TEL:86 152 1093 7300</div>
<div class="phone">TEL:+86 152-1093-7300</div>
<div class="site"> <div class="site">
{{ {{
characters == 1 characters == 1
@@ -149,6 +149,7 @@ export default {
overflow: hidden; overflow: hidden;
height: 578px; height: 578px;
background: #f1f4f7; background: #f1f4f7;
padding-bottom: 54px;


.taillong { .taillong {
width: 168px; width: 168px;


+ 33
- 5
src/components/common/top.vue View File

@@ -5,17 +5,33 @@
<div class="logoTitle">metavatar</div> <div class="logoTitle">metavatar</div>
</div> </div>
<div class="categoryBox"> <div class="categoryBox">
<div class="categoryitem">
<div class="categoryitem" @click="goPage('Product')">
{{ characters == 1 ? "产品能力" : "Product" }} {{ characters == 1 ? "产品能力" : "Product" }}
</div> </div>
<div class="categoryitem">
<div class="categoryitem" @click="goPage('Technology')">
{{ characters == 1 ? "创新技术" : "Technology" }} {{ characters == 1 ? "创新技术" : "Technology" }}
</div> </div>
<div class="categoryitem">
<div class="categoryitem" @click="goPage('Solutions')">
{{ characters == 1 ? "解决方案" : "Solutions" }} {{ characters == 1 ? "解决方案" : "Solutions" }}
</div> </div>
<!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> -->
<div class="categoryitem" @click="go('/aboutUe')">
<div class="categoryitem" @click="goPage('Cases')">
{{ characters == 1 ? "经典案例" : "Cases" }}
</div>
<div class="categoryitem">
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ characters == 1 ? "更多案例" : "AllCases"
}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="turing">邃图灵</el-dropdown-item>
<el-dropdown-item command="live">邃芒慧播</el-dropdown-item>
<el-dropdown-item command="generate">邃芒慧生</el-dropdown-item>
<el-dropdown-item command="shadow">邃芒慧影</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="categoryitem" @click="goPage('aboutUs')">
{{ characters == 1 ? "关于我们" : "About us" }} {{ characters == 1 ? "关于我们" : "About us" }}
</div> </div>
</div> </div>
@@ -40,6 +56,7 @@
</template> </template>
<script> <script>
import { mapState, mapActions } from "vuex"; import { mapState, mapActions } from "vuex";

export default { export default {
name: "top", name: "top",
data() { data() {
@@ -84,6 +101,12 @@ export default {
console.log(value); console.log(value);
this.setCharacters(value); this.setCharacters(value);
}, },
handleCommand(path) {
this.$router.push(`/${path}`);
},
goPage(path) {
this.$router.push(`/?id=${path}`);
},
go(url) { go(url) {
this.$router.push(url); this.$router.push(url);
}, },
@@ -152,6 +175,11 @@ export default {
.categoryitem:hover { .categoryitem:hover {
color: #16e9d6; color: #16e9d6;
} }
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #16e9d6;
color: #fff;
}
.cutBox { .cutBox {
float: right; float: right;
margin-top: 20px; margin-top: 20px;


+ 82
- 48
src/components/home/home.vue View File

@@ -1,48 +1,39 @@
<template> <template>
<div class="Box"> <div class="Box">
<!-- <div class="topBox">
<div class="categoryBox">
<div class="categoryitem" @click="goView('md1')"></div>
<div class="categoryitem" @click="goView('module_5')"></div>
<div class="categoryitem" @click="goView('md2')"></div>
<div class="categoryitem" @click="goView('module_9')"></div>
</div>
</div> -->

<div class="topBox"> <div class="topBox">
<div class="logoBox" @click="go('/')"> <div class="logoBox" @click="go('/')">
<img src="../../assets/img/logo.png" alt class="logo" /> <img src="../../assets/img/logo.png" alt class="logo" />
<div class="logoTitle">metavatar</div> <div class="logoTitle">metavatar</div>
</div> </div>
<div class="categoryBox"> <div class="categoryBox">
<div class="categoryitem" @click="goView('md1')">
<div class="categoryitem" @click="goView('Product')">
{{ characters == 1 ? "产品能力" : "Product" }} {{ characters == 1 ? "产品能力" : "Product" }}
</div> </div>
<div class="categoryitem" @click="goView('module_5')">
<div class="categoryitem" @click="goView('Technology')">
{{ characters == 1 ? "创新技术" : "Technology" }} {{ characters == 1 ? "创新技术" : "Technology" }}
</div> </div>
<div class="categoryitem" @click="goView('md2')">
<div class="categoryitem" @click="goView('Solutions')">
{{ characters == 1 ? "解决方案" : "Solutions" }} {{ characters == 1 ? "解决方案" : "Solutions" }}
</div> </div>
<div class="categoryitem" @click="goView('module_8')">
<div class="categoryitem" @click="goView('Cases')">
{{ characters == 1 ? "经典案例" : "Cases" }} {{ characters == 1 ? "经典案例" : "Cases" }}
</div> </div>
<!-- <div class="categoryitem" @click="goPages('turing')">
{{ characters == 1 ? "邃芒图灵" : "SuiMangTuring" }}
<div class="categoryitem">
<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
{{ characters == 1 ? "更多案例" : "AllCases"
}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="turing">邃图灵</el-dropdown-item>
<el-dropdown-item command="live">邃芒慧播</el-dropdown-item>
<el-dropdown-item command="generate">邃芒慧生</el-dropdown-item>
<el-dropdown-item command="shadow">邃芒慧影</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
<div class="categoryitem" @click="goPages('live')">
{{ characters == 1 ? "邃芒慧播" : "SuiMangLive" }}
</div>
<div class="categoryitem" @click="goPages('generate')">
{{ characters == 1 ? "邃芒慧生" : "SuiMangGen" }}
</div>
<div class="categoryitem" @click="goPages('shadow')">
{{ characters == 1 ? "邃芒慧影" : "SuiMangReflex" }}
</div> -->


<!-- <div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div> -->

<div class="categoryitem" @click="goView('module_9')">
<div class="categoryitem" @click="goView('aboutUs')">
{{ characters == 1 ? "关于我们" : "About us" }} {{ characters == 1 ? "关于我们" : "About us" }}
</div> </div>
</div> </div>
@@ -70,15 +61,7 @@
</div> </div>


<div class="module_1"> <div class="module_1">
<img
ref="vidoe"
src="../../assets/img/BG@2x.png"
width="100%"
height="100%"
autoplay
muted="muted"
loop="loop"
/>
<img src="../../assets/img/BG@2x.png" width="100%" height="100%" />
<div class="titleBox"> <div class="titleBox">
<div class="title_item1" v-if="characters == 1"> <div class="title_item1" v-if="characters == 1">
超写实!虚拟数字人创造者 超写实!虚拟数字人创造者
@@ -102,7 +85,7 @@
{{ characters == 1 ? "立刻体验" : "Try it now" }} {{ characters == 1 ? "立刻体验" : "Try it now" }}
</div> </div>
</div> </div>
<div class="md1" id="md1"></div>
<div class="md1" id="Product"></div>
</div> </div>


<div class="module_2" id="module_2"> <div class="module_2" id="module_2">
@@ -176,7 +159,7 @@
</div> </div>
</div> </div>


<div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="module_5">
<div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="Technology">
<div :class="characters == 1 ? 'titleBox' : 'titleBox1'"> <div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
<div class="title"> <div class="title">
{{ {{
@@ -214,7 +197,7 @@
</div> </div>
</div> </div>


<div class="md1" id="md2"></div>
<div class="md1" id="Solutions"></div>
</div> </div>


<div class="module_6" id="module_6"> <div class="module_6" id="module_6">
@@ -294,7 +277,7 @@
</div> </div>
</div> </div>


<div class="module_8" id="module_8">
<div class="module_8" id="Cases">
<div class="title">SELECTED CASES</div> <div class="title">SELECTED CASES</div>
<div class="title_1">{{ characters == 1 ? "经典案例" : "" }}</div> <div class="title_1">{{ characters == 1 ? "经典案例" : "" }}</div>
<div class="xian"></div> <div class="xian"></div>
@@ -308,6 +291,8 @@
<img class="swiper-slide-img" :src="item.url" /> <img class="swiper-slide-img" :src="item.url" />
</div> </div>
</div> </div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div> </div>
<div class="tiktok"> <div class="tiktok">
{{ characters == 1 ? "tiktok直播Rilloky" : "tiktokRilloky" }} {{ characters == 1 ? "tiktok直播Rilloky" : "tiktokRilloky" }}
@@ -321,7 +306,7 @@
</div> </div>
</div> </div>


<div class="module_9" id="module_9">
<div class="module_9" id="aboutUs">
<div class="weBox" @click="goPages('aboutUs')"> <div class="weBox" @click="goPages('aboutUs')">
<div class="weText"> <div class="weText">
<div class="conBox"> <div class="conBox">
@@ -364,14 +349,15 @@
> >
<div class="timeText">{{ item.title }}</div> <div class="timeText">{{ item.title }}</div>
<div class="ImgBox"> <div class="ImgBox">
<img
<!-- <img
:src=" :src="
timeFlag == index timeFlag == index
? require('../../assets/img/a.png') ? require('../../assets/img/a.png')
: require('../../assets/img/h.png') : require('../../assets/img/h.png')
" "
alt alt
/>
/> -->
<div class="circle"></div>
</div> </div>
<div class="ctn"> <div class="ctn">
{{ characters == 1 ? item.ctn1 : item.ctn1_y }} {{ characters == 1 ? item.ctn1 : item.ctn1_y }}
@@ -649,6 +635,11 @@ export default {
showBox() { showBox() {
this.dialogVisible = true; this.dialogVisible = true;
}, },

goPages(path) {
this.$router.push(path);
},

goView(id) { goView(id) {
document.querySelector("#" + id).scrollIntoView({ document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
@@ -657,9 +648,11 @@ export default {
}); });
// console.log(document.querySelector(id),); // console.log(document.querySelector(id),);
}, },
goPages(path) {

handleCommand(path) {
this.$router.push(`/${path}`); this.$router.push(`/${path}`);
}, },

submit() { submit() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
console.log(valid); console.log(valid);
@@ -696,6 +689,7 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
characters: (state) => state.publicObj.characters, characters: (state) => state.publicObj.characters,
view: (state) => state.publicObj.view,
}), }),
}, },


@@ -726,6 +720,14 @@ export default {
}, },
}); });
}, },
created() {
const id = this.$route.query.id;
if (id) {
this.$nextTick(() => {
this.goView(id);
});
}
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -1251,12 +1253,13 @@ export default {
border-right-color: #fff; border-right-color: #fff;
float: left; float: left;
margin-top: 20px; margin-top: 20px;
transition: all 0.3s;
} }
.news1 { .news1 {
padding: 0 40px; padding: 0 40px;
height: 68px; height: 68px;
background: #ffffff; background: #ffffff;
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
// box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
border-radius: 12px; border-radius: 12px;
font-size: 18px; font-size: 18px;
font-family: Inter; font-family: Inter;
@@ -1264,6 +1267,8 @@ export default {
color: #232324; color: #232324;
line-height: 62px; line-height: 62px;
float: left; float: left;
transition: all 0.3s;
cursor: pointer;
} }
} }
.hintBox_1 { .hintBox_1 {
@@ -1282,7 +1287,7 @@ export default {
padding: 0 40px; padding: 0 40px;
height: 68px; height: 68px;
background: #ffffff; background: #ffffff;
box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
// box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
border-radius: 12px; border-radius: 12px;
font-size: 18px; font-size: 18px;
font-family: Inter; font-family: Inter;
@@ -1290,6 +1295,7 @@ export default {
color: #232324; color: #232324;
line-height: 62px; line-height: 62px;
float: left; float: left;
cursor: pointer;
} }
} }


@@ -1498,6 +1504,17 @@ export default {
height: 23px; height: 23px;
margin: 30px auto 10px auto; margin: 30px auto 10px auto;
// margin-bottom: 10px; // margin-bottom: 10px;
.circle {
width: 23px;
height: 23px;
background: url("../../assets/img/h.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-position: center;
transform: scale(0.9);
transition: all 0.3s;
}
img { img {
width: 23px; width: 23px;
height: 23px; height: 23px;
@@ -1515,8 +1532,18 @@ export default {
text-align: center; text-align: center;
} }
&:hover { &:hover {
opacity: 0.5;
opacity: 0.65;
transform: scale(1.1); transform: scale(1.1);
.circle {
width: 23px;
height: 23px;
background: url("../../assets/img/a.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-position: center;
transform: scale(0.9);
}
} }
} }
} }
@@ -1595,9 +1622,11 @@ export default {
width: 479px; width: 479px;
height: 600px; height: 600px;
cursor: pointer; cursor: pointer;
opacity: 0.9;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
transform: scale(1.3);
opacity: 1;
transform: scale(1.1);
} }
} }


@@ -1644,6 +1673,11 @@ export default {
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
} }
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #16e9d6;
color: #fff;
}
.categoryitem:hover { .categoryitem:hover {
color: #16e9d6; color: #16e9d6;
} }


+ 625
- 0
src/components/views/generate.vue View File

@@ -0,0 +1,625 @@
<template>
<div class="Box" id="top">
<div class="module_1">
<img
src="../../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">邃芒慧生</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_btn" @click="showBox">
{{ 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="../../assets/img/metavatar_generate/model2-IMG@2x.png" alt="" />
</div>

<div class="module_3">
<div class="title">保持人脸特征 自由调整各类心仪风格</div>
<div class="style">STYLE</div>
<img src="../../assets/img/metavatar_generate/model3-IMG@2x.png" alt="" />
</div>

<div class="module_4">
<div class="imgBox">
<div class="textInsideBox">
<div class="title">丰富的状态编辑 完整的IP形象展示</div>
<div class="style">FULL AGE</div>
</div>

<img
src="../../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="rules" :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="Pmail">
<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: "请先输手机号",
},
{
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: "请先输邮箱",
},
],
},
// 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({
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: "/api/callback/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: 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: 1080px;
background-color: #fff;
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: 84px;
}
img {
width: 1293px;
height: 798px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_3 {
height: 1000px;
background-color: #ebeef7;
padding-top: 135px;
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: 1000px;
background-color: #fff;
padding-top: 156px;
padding-left: 116px;
text-align: center;
.imgBox {
position: relative;
width: 1669px;
height: 782px;
.textInsideBox {
position: absolute;
top: 40px;
margin-left: 570px;
.title {
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
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>

+ 584
- 0
src/components/views/live.vue View File

@@ -0,0 +1,584 @@
<template>
<div class="Box" id="top">
<div class="module_1">
<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">邃芒慧影</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_btn" @click="showBox">
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="md1" id="md1"></div>
</div>

<div class="module_2">
<div class="title">
只需<img
src="../../assets/img/metavatar_live/3@2x.png"
/>步完成一条数字人视频内容生成
</div>
<div class="images">
<li>
<img src="../../assets/img/metavatar_live/001@2x.png" alt="" />
</li>
<li>
<img src="../../assets/img/metavatar_live/002@2x.png" alt="" />
</li>
<li>
<img src="../../assets/img/metavatar_live/003@2x.png" alt="" />
</li>
<li>
<img src="../../assets/img/metavatar_live/004@2x.png" alt="" />
</li>
</div>
</div>

<div class="module_3">
<div class="title">中之人驱动</div>
<img src="../../assets/img/metavatar_live/picInside@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="rules" :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="Pmail">
<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: "请先输手机号",
},
{
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: "请先输邮箱",
},
],
},
// 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({
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: "/api/callback/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: 194px;
overflow: hidden;
color: #323232;
.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: #323232;
border-radius: 40px;
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: 960px;
background: #ffffff;
padding-top: 162px;
padding-left: 116px;
padding-right: 85px;

.title {
text-align: center;
margin-bottom: 132px;
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);
}
}
}
}
}
.module_3 {
height: 960px;
background-color: #ebeef7;
padding-top: 133px;
text-align: center;
.title {
text-align: center;
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 84px;
}
img {
width: 1250px;
height: 665px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
</style>

+ 221
- 52
src/components/views/shadow.vue View File

@@ -1,64 +1,61 @@
<template> <template>
<div class="Box">
<!-- <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" @click="goView('md1')">
{{ characters == 1 ? "产品能力" : "Product" }}
<div class="Box" id="top">
<div class="module_1">
<img
src="../../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>
<div class="categoryitem" @click="goView('module_5')">
{{ characters == 1 ? "创新技术" : "Technology" }}

<div class="desc" v-if="characters == 1">
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div>
<div>能为您在各种场景下7*24工作</div>
</div> </div>
<div class="categoryitem" @click="goView('md2')">
{{ characters == 1 ? "解决方案" : "Solutions" }}

<div class="title_item1" v-if="characters != 1">邃芒慧播</div>
<div class="title_item1_y" v-if="characters != 1">
直播虚拟人自然逼真,分身真假难辨
</div> </div>
<div class="categoryitem" @click="goView('module_8')">
{{ characters == 1 ? "经典案例" : "Cases" }}
</div> -->
<!-- <div class="categoryitem" @click="goPages('turing')">
{{ characters == 1 ? "邃芒图灵" : "SuiMangTuring" }}
</div>
<div class="categoryitem" @click="goPages('live')">
{{ characters == 1 ? "邃芒慧播" : "SuiMangLive" }}
</div>
<div class="categoryitem" @click="goPages('generate')">
{{ characters == 1 ? "邃芒慧生" : "SuiMangGen" }}
</div>
<div class="categoryitem" @click="goPages('shadow')">
{{ characters == 1 ? "邃芒慧影" : "SuiMangReflex" }}
</div> -->


<!-- <div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div> -->
<div class="desc" v-if="characters != 1">
<div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div>
<div>能为您在各种场景下7*24工作</div>
</div>


<!-- <div class="categoryitem" @click="goView('module_9')">
{{ characters == 1 ? "关于我们" : "About us" }}
<div class="title_btn" @click="showBox">
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div> </div>
</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 class="md1" id="md1"></div>
</div>

<div class="module_2">
<div class="title">真人无需出镜驱动数字人直播</div>
<div class="imgBox">
<li>
<img src="../../assets/img/metavatar_shadow/imgList1@2x.png" alt="" />
</li>
<li>
<img src="../../assets/img/metavatar_shadow/imgList2@2x.png" alt="" />
</li>
<li>
<img src="../../assets/img/metavatar_shadow/imgList3@2x.png" alt="" />
</li>
<div class="redCard">无缝接入各主流平台</div>
<div class="pinkCard">IP版权归属明确 无后顾之忧</div>
<div class="blueCard">出镜声形从此统一 打造沉淀企业IP</div>
</div> </div>
</div> -->
</div>

<div class="module_3">
<div class="title">脚本驱动数字人直播</div>
<img src="../../assets/img/metavatar_shadow/scriptDrive@2x.png" alt="" />
</div>


<el-dialog <el-dialog
:title=" :title="
@@ -385,6 +382,11 @@ export default {
}, },
}); });
}, },
created() {
this.$nextTick(() => {
this.goView("top");
});
},
}; };
</script> </script>


@@ -455,4 +457,171 @@ export default {
float: left; float: left;
font-size: 15px; 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: 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: 960px;
background: #ffffff;
padding-top: 112px;
padding-left: 331px;
padding-right: 306px;

.title {
text-align: center;
margin-bottom: 132px;
font-size: 36px;
}
.imgBox {
display: flex;
position: relative;
justify-content: space-between;
text-align: center;
li {
list-style: none;
margin-right: 7px;
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);
}
}
}
.redCard {
position: absolute;
left: -111px;
bottom: 69px;
width: 200px;
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: #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: 900px;
background-color: #ebeef7;
padding-top: 133px;
text-align: center;
.title {
text-align: center;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 5px;
}
img {
width: 1446px;
height: 638px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
</style> </style>

+ 491
- 0
src/components/views/turing.vue View File

@@ -0,0 +1,491 @@
<template>
<div class="Box" id="top">
<div class="module_1">
<img
ref="vidoe"
src="../../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">邃图灵</div>
<div class="title_item1_y" v-if="characters != 1">与李雷成为朋友</div>

<!-- <div class="title_item3" v-if="characters != 1">
Easily create your unique digital IP
</div> -->

<div class="title_btn" @click="showBox">
{{ characters == 1 ? "与xxx交谈" : "converse to xxx" }}
</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="rules" :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="Pmail">
<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: "请先输手机号",
},
{
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: "请先输邮箱",
},
],
},
// 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({
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: "/api/callback/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>

+ 0
- 7
src/router/index.js View File

@@ -13,43 +13,36 @@ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
// component: Home
component: () => import("../components/home/home"), component: () => import("../components/home/home"),
}, },
{ {
path: '/aboutUs', path: '/aboutUs',
name: 'aboutUs', name: 'aboutUs',
// component: Home
component: () => import("../components/aboutUs/aboutUs"), component: () => import("../components/aboutUs/aboutUs"),
}, },
{ {
path: '/styleAdd', path: '/styleAdd',
name: 'styleAdd', name: 'styleAdd',
// component: Home
component: () => import("../components/styleAdd/styleAdd"), component: () => import("../components/styleAdd/styleAdd"),
}, },
{ {
path: '/turing', path: '/turing',
name: 'turing', name: 'turing',
// component: Home
component: () => import("../components/views/turing"), component: () => import("../components/views/turing"),
}, },
{ {
path: '/live', path: '/live',
name: 'live', name: 'live',
// component: Home
component: () => import("../components/views/live"), component: () => import("../components/views/live"),
}, },
{ {
path: '/generate', path: '/generate',
name: 'generate', name: 'generate',
// component: Home
component: () => import("../components/views/generate"), component: () => import("../components/views/generate"),
}, },
{ {
path: '/shadow', path: '/shadow',
name: 'shadow', name: 'shadow',
// component: Home
component: () => import("../components/views/shadow"), component: () => import("../components/views/shadow"),
}, },
] ]


Loading…
Cancel
Save