Pārlūkot izejas kodu

登录页面

release
HolyKnightIX pirms 2 gadiem
vecāks
revīzija
a46876dc6f
9 mainītis faili ar 8605 papildinājumiem un 207 dzēšanām
  1. +1
    -0
      package.json
  2. Binārs
      src/assets/img/user center.png
  3. +48
    -25
      src/components/common/top.vue
  4. +342
    -165
      src/components/home/home.vue
  5. +3
    -1
      src/main.js
  6. +11
    -5
      src/router/index.js
  7. +175
    -0
      src/views/login/login.vue
  8. +11
    -11
      vue.config.js
  9. +8014
    -0
      yarn.lock

+ 1
- 0
package.json Parādīt failu

@@ -8,6 +8,7 @@
},
"dependencies": {
"axios": "^0.27.2",
"element-ui": "^2.15.12",
"lib-flexible": "^0.3.2",
"postcss-px2rem": "^0.3.0",
"register-service-worker": "^1.7.1",


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

Pirms Pēc
Platums: 200  |  Augstums: 200  |  Izmērs: 7.3 KiB

+ 48
- 25
src/components/common/top.vue Parādīt failu

@@ -1,7 +1,7 @@
<template>
<div class="topBox">
<div class="logoBox" @click="go('/')">
<img src="../../assets/img/LOGO1.png" alt class="logo">
<img src="../../assets/img/LOGO1.png" alt class="logo" />
<!-- <div class="logoTitle">metavatar</div> -->
</div>
<!-- <div class="categoryBox">
@@ -11,7 +11,6 @@
<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">
<div class="more" @click="showPopup">
@@ -19,6 +18,7 @@
<div class="wire"></div>
<div class="wire"></div>
</div>

<!-- <el-select v-model="charactersMy" placeholder="请选择" @change="change">
<el-option
v-for="item in languageLsit"
@@ -35,25 +35,38 @@
<span>{{item.name}}</span>
</div>
</el-option>
</el-select>-->
</el-select> -->
</div>
</div>

<div @click="goLogin">
<img class="userImg" src="../../assets/img/user center.png" alt="" />
</div>

<van-popup
v-model="show"
position="top"
:style="{ width: '70%', height: '90%', 'background-color': 'rgb(255, 255, 255,0)','margin-top': '10%'}"
:style="{
width: '70%',
height: '90%',
'background-color': 'rgb(255, 255, 255,0)',
'margin-top': '10%',
}"
>
<div class="goItem">{{characters==1?'产品能力':'Product'}}</div>
<div class="goItem">{{characters==1?'创新技术':'Technology'}}</div>
<div class="goItem">{{characters==1?'解决方案':'Solutions'}}</div>
<div class="goItem">{{ characters == 1 ? "产品能力" : "Product" }}</div>
<div class="goItem">
{{ characters == 1 ? "创新技术" : "Technology" }}
</div>
<div class="goItem">{{ characters == 1 ? "解决方案" : "Solutions" }}</div>
<!-- <div class="goItem">{{characters==1?'精选案例':'Cases'}}</div> -->
<div class="goItem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div>
<div class="languageImgBox" @click="change(1)">
<img src="../../assets/img/cn.jpeg" alt class="cutImg">
<div class="goItem" @click="go('/aboutUe')">
{{ characters == 1 ? "关于我们" : "About us" }}
</div>
<div class="languageImgBox" @click="change(1)">
<img src="../../assets/img/cn.jpeg" alt class="cutImg" />
</div>
<div class="languageImgBox" @click="change(2)">
<img src="../../assets/img/en.jpg" alt class="cutImg">
<div class="languageImgBox" @click="change(2)">
<img src="../../assets/img/en.jpg" alt class="cutImg" />
</div>
</van-popup>
</div>
@@ -73,15 +86,15 @@ export default {
{
name: "Cn",
value: 1,
url: require("../../assets/img/cn.jpeg")
url: require("../../assets/img/cn.jpeg"),
},
{
name: "En",
value: 2,
url: require("../../assets/img/en.jpg")
}
url: require("../../assets/img/en.jpg"),
},
],
charactersMy: 1
charactersMy: 1,
};
},
watch: {
@@ -100,26 +113,30 @@ export default {
},
computed: {
...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
},
methods: {
...mapActions(["setCharacters"]),

showPopup() {
this.show = true;
},
change(value) {
this.setCharacters(value);
this.show = false;
},
go(url) {
this.$router.push(url);
}
},
goLogin() {
console.log(111);
this.$router.push("/login");
},
},
mounted() {
console.log(this.languageLsit, "characters");
}
},
};
</script>

@@ -187,7 +204,7 @@ export default {
float: right;
margin-top: 6px;
margin-right: 25px;
overflow: hidden;
// overflow: hidden;
cursor: pointer;
}
.cutImg {
@@ -201,11 +218,19 @@ export default {
float: left;
font-size: 15px;
}
.userImg {
float: right;
width: 30px;
height: 30px;
margin-top: 3px;
margin-right: 10px;
}
.more {
width: 20px;
width: 25px;
height: 20px;
// background-color: aquamarine;
overflow: hidden;
margin-right: -15px;
}
.wire {
width: 20px;
@@ -217,5 +242,3 @@ export default {
width: 120px;
}
</style>



+ 342
- 165
src/components/home/home.vue Parādīt failu

@@ -6,59 +6,100 @@
<div class="wire"></div>
<div class="wire"></div>
</div>
<div @click="goLogin">
<img class="userImg" src="../../assets/img/user center.png" alt="" />
</div>
</div>

<div class="module_1">
<video ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop"/>
<div class="titleBox">
<div class="title_item1" v-if="characters==1">打造自主数字人IP</div>
<div class="title_item2" v-if="characters==1">沉淀数字资产</div>
<div class="module_1">
<video
ref="vidoe"
src="../../assets/video/1.mp4"
width="100%"
height="100%"
autoplay
muted="muted"
loop="loop"
/>
<div class="titleBox" @click="showBox">
<div class="title_item1" v-if="characters == 1">打造自主数字人IP</div>
<div class="title_item2" v-if="characters == 1">沉淀数字资产</div>
<!-- <div class="title_item3" v-if="characters==1">自动化实时创作过程 帮助您快速定义形象 多种类型</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">Create virtual human IP</div>
<div class="title_item2" v-if="characters!=1">for your business as digital assets</div>
<div class="title_item1_y" v-if="characters != 1">
Create virtual human IP
</div>
<div class="title_item2" v-if="characters != 1">
for your business as digital assets
</div>
<!-- <div
class="title_item3"
v-if="characters!=1"
>Automatic creation process, speed up character defined from months to hours Diversity character types, ultra-realistic, stylized or customized freely</div>-->

<div class="title_btn" @click="showBox">{{characters==1?'立刻体验':'Try it now'}}</div>
<div class="title_btn">
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>
<div class="md1" id="md1"></div>
</div>

<div class="module_2" id="module_2">
<div class="title">{{characters==1?'文字语音AI驱动':'Text/Audio AI manipulation'}}</div>
<div class="title">
{{ characters == 1 ? "文字语音AI驱动" : "Text/Audio AI manipulation" }}
</div>
<div class="xian"></div>
<div
class="title_ctn"
>{{characters==1?'文字/语音驱动生成数字人,邃芒技术所呈现的高自然度,以及多语言多种输入方式':'Text/audio manipulate the virtual human created, Metavatar AIGC delivers high resolution, naturally and vividly character moves'}}</div>
<div
class="title_ctn"
>{{characters==1?'让您的数字人可以快速进行内容生产,真正实现智能全自动的内容生产(AIGC)。':'supporting multiple languages and inputs, generating digital content, bring new intelligence experience far more exciting than before .'}}</div>
<div class="title_btn">{{characters==1?'立刻体验':'Try it now'}}</div>
<div class="title_ctn">
{{
characters == 1
? "文字/语音驱动生成数字人,邃芒技术所呈现的高自然度,以及多语言多种输入方式,"
: "Text/audio manipulate the virtual human created, Metavatar AIGC delivers high resolution, naturally and vividly character moves."
}}
</div>
<div class="title_ctn">
{{
characters == 1
? "让您的数字人可以快速进行内容生产,真正实现智能全自动的内容生产(AIGC)。"
: "supporting multiple languages and inputs, generating digital content, bring new intelligence experience far more exciting than before ."
}}
</div>
<div class="title_btn" @click="showBox">
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>

<div class="module_3" id="module_3">
<div class="imgBox1">
<img src="../../assets/img/module_3_1.png" alt>
<img src="../../assets/img/module_3_1.png" alt />
</div>
<!-- <div class="imgBox2">
<img src="../../assets/img/module_3_2.png" alt>
</div>-->
</div>
<div class="module_2" id="module_2">
<div class="title">{{characters==1?'中之人驱动':'“中之人”manipulation'}}</div>
<div class="title">
{{ characters == 1 ? "中之人驱动" : "“中の人”manipulation" }}
</div>
<div class="xian"></div>
<div
class="title_ctn"
>{{characters==1?'中之人驱动数字形象,快速生产各种背景下的视频,短片,影视剧等,让您的数字人轻松进入各种复杂场景':'Metavatar also supports the “中の人“ vtuber manipulation. Generating videos and broadcasting content on demand in any '}}</div>
<div
class="title_ctn"
>{{characters==1?' 为企业在数字内容上提供丰富的体验,大幅节省成本提高生产效率。':'complex cases Provide extremely expenses saving & extendable user experience in digital content producing process .'}}</div>
<div class="title_btn">{{characters==1?'立刻体验':'Try it now'}}</div>
<div class="title_ctn">
{{
characters == 1
? "中之人驱动数字形象,快速生产各种背景下的视频,短片,影视剧等,让您的数字人轻松进入各种复杂场景,"
: "Metavatar also supports the “中の人“ vtuber manipulation. Generating videos and broadcasting content on demand in any complex cases."
}}
</div>
<div class="title_ctn">
{{
characters == 1
? "为企业在数字内容上提供丰富的体验,大幅节省成本提高生产效率。"
: "Provide extremely expenses saving & extendable user experience in digital content producing process."
}}
</div>
<div class="title_btn" @click="showBox">
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
</div>

<div class="module_3" id="module_3">
@@ -66,61 +107,99 @@
<img src="../../assets/img/module_3_1.png" alt>
</div>-->
<div class="imgBox2">
<img src="../../assets/img/module_3_2.png" alt>
<img src="../../assets/img/module_3_2.png" alt />
</div>
</div>

<div class="module_5" id="module_5">
<img src="../../assets/img/module_5_bg2.png" alt class="module_5_bg1">
<img src="../../assets/img/module_5_bg2.png" alt class="module_5_bg1" />
<div class="titleBox">
<div class="title">{{characters==1?'快速 高效 完美':'Flexible and Vivid Avatar'}}</div>
<div
class="paragraph"
>{{characters==1?'MetaGene是邃芒科技自主技术研发的自动化数字人平台,以GAN(生成对抗网络)、NeRF(神经辐射场)、多模态合成技术为基础,并加持NLP与知识图谱能力,建设元宇宙的基础设施。MetaGene 实现无人工干预的形象创造、数字人驱动以及智能交互全流程,通过MetaGene可以实时创造高辨率的虚拟数字人形象,数字分身,并且可以自由的编辑及风格化。':'MetaGene is an automated digital human platform developed by Metavatar. MetaGene is based on GAN (Generative Adversarial Network), NeRF (Neural Radiation Field) and multimodal synthesis technology, combined by NLP and knowledge graph capabilities to build the infrastructure of the Metaverse. '}}</div>
<div class="title">
{{ characters == 1 ? "快速 高效 完美" : "Flexible and Vivid Avatar" }}
</div>
<div class="paragraph">
{{
characters == 1
? "MetaGene是邃芒科技自主技术研发的自动化数字人平台,以GAN(生成对抗网络)、NeRF(神经辐射场)、多模态合成技术为基础,并加持NLP与知识图谱能力,建设元宇宙的基础设施。MetaGene 实现无人工干预的形象创造、数字人驱动以及智能交互全流程,通过MetaGene可以实时创造高辨率的虚拟数字人形象,数字分身,并且可以自由的编辑及风格化。"
: "MetaGene is an automated digital human platform developed by Metavatar. MetaGene is based on GAN (Generative Adversarial Network), NeRF (Neural Radiation Field) and multimodal synthesis technology, combined by NLP and knowledge graph capabilities to build the infrastructure of the Metaverse. "
}}
</div>

<div
class="paragraph"
v-if="characters!=1"
>User can experiences a completely automatic process of character creation, manipulation and intelligent interaction without any intervention.MetaGene provides high-resolution virtual digital human , “digital twin”, symbolization characters editable freely rapidly.</div>
<div class="paragraph" v-if="characters != 1">
User can experiences a completely automatic process of character
creation, manipulation and intelligent interaction without any
intervention.MetaGene provides high-resolution virtual digital human ,
“digital twin”, symbolization characters editable freely rapidly.
</div>

<div
class="paragraph"
>{{characters==1?'MetaGene不仅支持通过语音、文字、视频等多种有/无中之人的数字人驱动方式,为用户生成实时的生成高质量的视频内容;还通过先进技术手段降低前端算力依赖,解决直播实时性等复杂场景问题。':'MetaGene not only supports real-time high-quality video content generation for users through voice, text, video and other manipulation approaches; It also reduces the front-end computing power cost and compatible in the complex scenario, such as live broadcast real-time.'}}</div>
<div class="paragraph">
{{
characters == 1
? "MetaGene不仅支持通过语音、文字、视频等多种有/无中之人的数字人驱动方式,为用户生成实时的生成高质量的视频内容;还通过先进技术手段降低前端算力依赖,解决直播实时性等复杂场景问题。"
: "MetaGene not only supports real-time high-quality video content generation for users through voice, text, video and other manipulation approaches; It also reduces the front-end computing power cost and compatible in the complex scenario, such as live broadcast real-time."
}}
</div>

<div
class="paragraph"
>{{characters==1?'MetaGene为数字人提供了智能交互的能力,让输出的形象具备智能化互动功能,帮助处理实际业务中的问题,协助完成任务。':'MetaGene provides digital human with the interactive ability, the character will have intelligent interactive functions, help to deal with real world problems in the business and assistance in completing tasks.'}}</div>
<div class="read_btn" @click="showBox">{{characters==1?'了解详情':'Read more'}}</div>
<div class="paragraph">
{{
characters == 1
? "MetaGene为数字人提供了智能交互的能力,让输出的形象具备智能化互动功能,帮助处理实际业务中的问题,协助完成任务。"
: "MetaGene provides digital human with the interactive ability, the character will have intelligent interactive functions, help to deal with real world problems in the business and assistance in completing tasks."
}}
</div>
<div class="read_btn" @click="showBox">
{{ characters == 1 ? "了解详情" : "Read more" }}
</div>
</div>

<!-- <div class="md1" id="md2"></div> -->
</div>

<div class="module_6" id="module_6">
<div
class="title"
>{{characters==1?'邃芒数字人可服务的场景':'Scenarios that Suimang Digital Humans can serve'}}</div>
<div class="title">
{{
characters == 1
? "邃芒数字人可服务的场景"
: "Scenarios that Suimang Digital Humans can serve"
}}
</div>
<div class="imgBox">
<div class="itemBox" v-for="(item,index) in module_6_data" :key="index">
<img :src="item.url" alt>
<p>{{characters ==1?item.name:item.name_y}}</p>
<div
class="itemBox"
v-for="(item, index) in module_6_data"
:key="index"
>
<img :src="item.url" alt />
<p>{{ characters == 1 ? item.name : item.name_y }}</p>
</div>
</div>
</div>

<div class="module_7">
<div
class="title"
>{{characters==1?'超写实数字人的互动全新体验':'A new interactive experience of hyper-realistic digital people'}}</div>
<div class="title">
{{
characters == 1
? "超写实数字人的互动全新体验"
: "A new interactive experience of hyper-realistic digital people"
}}
</div>
<div class="fillBox">
<div class="hintBox">
<div class="triangle"></div>
<div class="news1">{{characters==1?'你好,我是XXXX':"Hello, I'm XXXX"}}</div>
<div class="news1">
{{ characters == 1 ? "你好,我是XXXX" : "Hello, I'm XXXX" }}
</div>
</div>

<div class="hintBox2">
<div class="triangle"></div>
<div class="news1">{{characters==1?'你会说英语吗?Avrli':"Do you speak English? Avrli"}}</div>
<div class="news1">
{{
characters == 1
? "你会说英语吗?Avrli"
: "Do you speak English? Avrli"
}}
</div>
</div>

<div class="hintBox3">
@@ -132,15 +211,27 @@

<div class="hintBox4">
<div class="triangle"></div>
<div class="news1">{{characters==1?'你会说英语吗?Avrli':"Do you speak English? Avrli"}}</div>
<div class="news1">
{{
characters == 1
? "你会说英语吗?Avrli"
: "Do you speak English? Avrli"
}}
</div>
</div>
<div class="hintBox5">
<div class="triangle"></div>
<div
class="news1"
>{{characters==1?'据北京市气象局消息,丰台、石景山有雷阵雨天气':"According to the Beijing Meteorological Bureau,"}}</div>
<div class="news1">
{{
characters == 1
? "据北京市气象局消息,丰台、石景山有雷阵雨天气"
: "According to the Beijing Meteorological Bureau,"
}}
</div>
</div>
<div class="bnt_look" @click="showBox">
{{ characters == 1 ? "立刻体验" : "Try it now" }}
</div>
<div class="bnt_look" @click="showBox">{{characters==1?'立刻体验':'Try it now'}}</div>
</div>
</div>

@@ -167,17 +258,29 @@
<div class="weBox">
<div class="weText">
<div class="conBox">
<div class="title" v-if="characters==2">ABOUT ME</div>
<div class="title_h" v-if="characters==1">关于我们</div>
<div
:class="characters==1?'ctn1':'ctn'"
>{{characters==1?'北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月。':"Metavatar is founded in August 2021, the team built up in year 2018. "}}</div>
<div
:class="characters==1?'ctn_c1':'ctn_c'"
>{{characters==1?'3年迭代形成AI技术为基础的数字人全生产流程,拥有业界顶尖AI形象生成和驱动技术,积累了独有的亚洲超现实数字人数据资产,已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所,拥有来自悉尼科技大学, 北邮,中科院,清华的博士硕士团队和行业内一流人才 。':"In the past 3 years, Metavatar has iteratively been forming the whole production process of digital human based on AI technology. We own the industry's top AI image generation and driving technology, and has accumulated unique Asian surreal digital human data assets, which have been successfully used in industrial-grade film and television, brand owners and live broadcasts. The team is from scientific research institutions and first-class institutes, with PhD and Masters from the UTS, BUPT , CAS, Tsinghua University and first-class talents in the industry."}}</div>
<div
:class="characters==1?'ctn_c1':'ctn_c'"
>{{characters==1?'邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。':"Metavatar focus on digital human sector, provides capability of producing the massive amount requirements for the future metaverse. Vision to be the first level company as a KEY to knock out the door of metaverse; Developing the leading technology and create customer value along the way."}}</div>
<div class="title" v-if="characters == 2">ABOUT ME</div>
<div class="title_h" v-if="characters == 1">关于我们</div>
<div :class="characters == 1 ? 'ctn1' : 'ctn'">
{{
characters == 1
? "北京邃芒科技公司正式成立于2021年8月,团队组建于2018年10月。"
: "Metavatar is founded in August 2021, the team built up in year 2018. "
}}
</div>
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
{{
characters == 1
? "3年迭代形成AI技术为基础的数字人全生产流程,拥有业界顶尖AI形象生成和驱动技术,积累了独有的亚洲超现实数字人数据资产,已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所,拥有来自悉尼科技大学, 北邮,中科院,清华的博士硕士团队和行业内一流人才。"
: "In the past 3 years, Metavatar has iteratively been forming the whole production process of digital human based on AI technology. We own the industry's top AI image generation and driving technology, and has accumulated unique Asian surreal digital human data assets, which have been successfully used in industrial-grade film and television, brand owners and live broadcasts. The team is from scientific research institutions and first-class institutes, with PhD and Masters from the UTS, BUPT , CAS, Tsinghua University and first-class talents in the industry."
}}
</div>
<div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
{{
characters == 1
? "邃芒科技专注虚拟数字人,提供未来世界数字形象巨量需求的生产力与能力,依靠技术与商业双轮驱动为用户打开元宇宙大门。"
: "Metavatar focus on digital human sector, provides capability of producing the massive amount requirements for the future metaverse. Vision to be the first level company as a KEY to knock out the door of metaverse; Developing the leading technology and create customer value along the way."
}}
</div>
</div>
</div>
</div>
@@ -186,13 +289,17 @@
<div class="cooperationBox">
<div class="titleBox">
<!-- <div class="title">PARTNER</div> -->
<div class="title_h" v-if="characters==1">合作伙伴</div>
<div class="title_h" v-if="characters == 1">合作伙伴</div>
</div>
</div>

<div class="cooperation">
<div class="cooperationItem0" v-for="(item,index) in partnerLsit" :key="index">
<img :src="item.url" alt>
<div
class="cooperationItem0"
v-for="(item, index) in partnerLsit"
:key="index"
>
<img :src="item.url" alt />
</div>
</div>
</div>
@@ -223,35 +330,62 @@
<div class="titleBox">
<div class="guan" @click="dialogVisible = false">x</div>
</div>
<div class="contentInput">
<input type="text" :placeholder="characters ==1?'姓名':'Name'" v-model="userName">
<input
type="text"
:placeholder="characters == 1 ? '姓名' : 'Name'"
v-model="userName"
/>
</div>
<div class="contentInput">
<input type="text" :placeholder="characters ==1?'手机':'Phone Number'" v-model="phone">
<input
type="text"
:placeholder="characters == 1 ? '手机' : 'Phone Number'"
v-model="phone"
/>
</div>
<div class="contentInput">
<input type="text" :placeholder="characters ==1?'E-mail':'Mail'" v-model="email">
<input
type="text"
:placeholder="characters == 1 ? 'E-mail' : 'Mail'"
v-model="email"
/>
</div>
<div class="subBtn" @click="submit()">
{{ characters == 1 ? "提交" : "Submit" }}
</div>
<div class="subBtn" @click="submit()">{{characters ==1?'提交':'Submit'}}</div>
</div>

<van-popup
v-model="show"
position="top"
:style="{ width: '70%', height: '90%', 'background-color': 'rgb(255, 255, 255,0)','margin-top': '10%'}"
:style="{
width: '70%',
height: '90%',
'background-color': 'rgb(255, 255, 255,0)',
'margin-top': '10%',
}"
>
<div class="goItem" @click="goView('module_2')">{{characters==1?'产品能力':'Product'}}</div>
<div class="goItem" @click="goView('module_5')">{{characters==1?'创新技术':'Technology'}}</div>
<div class="goItem" @click="goView('module_6')">{{characters==1?'解决方案':'Solutions'}}</div>
<div class="goItem" @click="goView('module_2')">
{{ characters == 1 ? "产品能力" : "Product" }}
</div>
<div class="goItem" @click="goView('module_5')">
{{ characters == 1 ? "创新技术" : "Technology" }}
</div>
<div class="goItem" @click="goView('module_6')">
{{ characters == 1 ? "解决方案" : "Solutions" }}
</div>
<!-- <div class="goItem">{{characters==1?'精选案例':'Cases'}}</div> -->
<!-- @click="go('/aboutUe')" -->
<div class="goItem" @click="goView('module_9')">{{characters==1?'关于我们':'About us'}}</div>
<div class="goItem" @click="goView('module_9')">
{{ characters == 1 ? "关于我们" : "About us" }}
</div>
<div class="languageImgBox" @click="change(1)">
<img src="../../assets/img/cn.jpeg" alt class="cutImg">
<img src="../../assets/img/cn.jpeg" alt class="cutImg" />
</div>
<div class="languageImgBox" @click="change(2)">
<img src="../../assets/img/en.jpg" alt class="cutImg">
<img src="../../assets/img/en.jpg" alt class="cutImg" />
</div>
</van-popup>
</div>
@@ -264,7 +398,7 @@ import Swiper from "swiper";
import { mapState, mapActions } from "vuex";

import { Toast } from "vant";
import Vue from 'vue';
import Vue from "vue";
Vue.use(Toast);

export default {
@@ -277,7 +411,7 @@ export default {
form: {
name: "",
phone: "",
email: ""
email: "",
},

rules: {
@@ -287,14 +421,14 @@ export default {
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur"
}
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号"
message: "请先输手机号",
},
{
validator(rule, value, callback, source, options) {
@@ -305,96 +439,117 @@ export default {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
}
}
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请先输邮箱"
}
]
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_4.png"),
name: "教育",
name_y: "Education",
des: "创新和丰富的学习体验",
des_y: "Innovative & richinng the learning experience",
},
{
url: require("../../assets/img/demo_2.png"),
name: "推动品牌声誉",
name_y: "Drive Brand engagement"
url: require("../../assets/img/demo_3.png"),
name: "金融",
name_y: "Finance",
des: "加强客户服务,通过新颖的互动方式与客户搭建沟通桥梁",
des_y:
"Enhance customer service, engage client relations through new innteravtive ways",
},
{
url: require("../../assets/img/demo_3.png"),
name: "拓展客户服务",
name_y: "Scale customer service"
url: require("../../assets/img/demo_5.png"),
name: " 电商",
name_y: "E-commerce",
des: "7*24全天候数字员工线上销售和品牌推广",
des_y: "7*24 employee online selling & brands promotion",
},
{
url: require("../../assets/img/demo_4.png"),
name: " 节约您的劳动成本",
name_y: " Augment your current workforce"
url: require("../../assets/img/demo_7.png"),
name: "零售与品牌",
name_y: "Retails",
des: "数字广告代言人以前所未有的方式打造品牌",
des_y: "Branding in a different new way by digital Ads endorsers.",
},
{
url: require("../../assets/img/demo_5.png"),
name: " 提供支持和陪伴",
name_y: "Provide support and companionship"
url: require("../../assets/img/demo_1.png"),
name: "技术服务",
name_y: "Avatar tech provider",
des: "可以将创造的数字人形象、行为和全部交互轻松的部署到自己的应用服务中",
des_y:
"Provide all capability of avatar creation, manipulation & interactive of metavatar to deploy them in your own applications.",
},
{
url: require("../../assets/img/demo_6.png"),
name: "投资元宇宙的未来",
name_y: "Deliver knowledge and learning"
url: require("../../assets/img/demo_2.png"),
name: "娱乐",
name_y: "Entertaining",
des: "让您在元宇宙中拥有时尚靓丽的数字孪生",
des_y:
"Exiciting etertaning experience by digital twins, stylishing the pictures & video, great looking avatars in metaverse.",
},
{
url: require("../../assets/img/demo_7.png"),
name: "数字化名人的力量",
name_y: "Leverage the power of Digital Celebrities"
url: require("../../assets/img/demo_6.png"),
name: "影视特效 ",
name_y: "Special Effects",
des: "通过Ai技术在电影特效中使用虚拟角色,极大的提高了效率,加强视觉效果",
des_y:
"A.I. technology for avatars deployed in movie special effects, great enhancement of effects production.",
},
{
url: require("../../assets/img/demo_8.png"),
name: "传递学习和知识",
name_y: " Invest in the metaverse future"
}
name: "公共服务",
name_y: "Public Sector",
des: "当人们需要帮助和助手时,数字公共服务人员24*7随时为您的繁重工作待命",
des_y:
"24*7 public service employee for repetitive heavy duties, anytime ready when people need help and assistant.",
},
],
carouselLsit: [
{
url: require("../../assets/img/carousel1.png")
url: require("../../assets/img/carousel1.png"),
},
{
url: require("../../assets/img/carousel2.png")
url: require("../../assets/img/carousel2.png"),
},
{
url: require("../../assets/img/carousel3.png")
}
url: require("../../assets/img/carousel3.png"),
},
],
partnerLsit: [
{
url: require("../../assets/img/partner1.png")
url: require("../../assets/img/partner1.png"),
},
{
url: require("../../assets/img/partner2.png")
url: require("../../assets/img/partner2.png"),
},
{
url: require("../../assets/img/partner3.png")
url: require("../../assets/img/partner3.png"),
},
{
url: require("../../assets/img/partner4.png")
url: require("../../assets/img/partner4.png"),
},
{
url: require("../../assets/img/partner5.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: "团队组建"
ctn1: "团队组建",
// ctn2: "团队组建"
},
{
@@ -403,7 +558,7 @@ export default {
ctn1_y: "Deliver the first movie project in May. 2019",
// ctn2_y: "Deliver the first movie project in May. 2019",
ctn1: "第一个影视特效 ",
ctn2: "项目交付"
ctn2: "项目交付",
},
{
url: require("../../assets/img/carousel3.png"),
@@ -411,7 +566,7 @@ export default {
ctn1_y: "Beta of MetaGene published in May,2021",
// ctn2_y: "Beta of MetaGene published in May,2021",
ctn1: "内部产品",
ctn2: "Metagene V1完成"
ctn2: "Metagene V1完成",
},

{
@@ -419,7 +574,7 @@ export default {
title: "2021-08",
ctn1_y: "Metavatar built up in Aug, 2021",
// ctn2_y: "Metavatar built up in Aug, 2021",
ctn1: "邃芒科技成立"
ctn1: "邃芒科技成立",
// ctn2: "邃芒科技成立",
},
{
@@ -427,7 +582,7 @@ export default {
title: "2022-01",
ctn1_y: "Angel fund in Jan, 2022",
// ctn2_y: "Angel fund in Jan, 2022",
ctn1: "获得天使轮融资"
ctn1: "获得天使轮融资",
// ctn2: "获得天使轮融资",
},
{
@@ -437,14 +592,19 @@ export default {
"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的内容生产项目"
}
]
ctn2: "交付首个基于MetaGene的内容生产项目",
},
],
};
},
methods: {
...mapActions(["setCharacters"]),

goLogin() {
console.log(111);
this.$router.push("/login");
},

showPopup() {
this.show = true;
},
@@ -459,7 +619,7 @@ export default {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest" //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
this.show = false;
// console.log(document.querySelector(id),);
@@ -467,7 +627,9 @@ export default {
submit() {
let phone = /^1[35789]\d{9}$/;
if (this.userName == "") {
Toast.fail(this.characters == 1 ? "请输入姓名" : "Please enter your name");
Toast.fail(
this.characters == 1 ? "请输入姓名" : "Please enter your name"
);
return;
} else if (!phone.test(this.phone)) {
Toast.fail(
@@ -485,17 +647,17 @@ export default {
let params = {
mallName: this.email, //邮箱
applicant: this.userName, //姓名
phone: this.phone //电话
phone: this.phone, //电话
};
this.$axios({
method: "post",
url: "/api/callback/wxMallApply/add",
url: "http://www.metavatar.cc/api/callback/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8"
"Content-Type": "application/json;charset=UTF-8",
},
data: params
data: params,
})
.then(res => {
.then((res) => {
this.email = "";
this.userName = "";
this.phone = "";
@@ -504,15 +666,15 @@ export default {
this.characters == 1 ? "提交成功" : "submit successfully"
);
})
.catch(err => {
.catch((err) => {
Toast.fail(err.message);
});
}
},
},
computed: {
...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
},

mounted() {
@@ -525,24 +687,32 @@ export default {
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true // 分页器可以点击
clickable: true, // 分页器可以点击
},

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

// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar"
}
el: ".swiper-scrollbar",
},
});
}
},
};
</script>
<style lang="scss" scoped>
@keyframes showIn {
50% {
transform: translateY(-25%);
}
100% {
transform: translateY(0);
}
}
.contentBox {
width: 90%;
background-color: rgba(0, 0, 0, 0.5);
@@ -551,17 +721,19 @@ export default {
left: 5%;
border-radius: 20px;
overflow: hidden;
.titleBox{
transition: all 0.3s;
animation: showIn 0.3s;
.titleBox {
overflow: hidden;
.guan{
float: right;
font-size: 18px;
padding: 10px 20px;
text-align: center;
color: #fff;
}
.guan {
float: right;
font-size: 18px;
padding: 10px 20px;
text-align: center;
color: #fff;
}
}
.contentInput {
width: 220px;
height: 36px;
@@ -625,8 +797,15 @@ export default {
left: 0;
z-index: 1000;
// background-color:red;
.more {
.userImg {
float: right;
width: 30px;
height: 30px;
margin-top: 3px;
margin-right: 10px;
}
.more {
width: 25px;
height: 20px;
float: right;
margin-top: 6px;
@@ -714,7 +893,7 @@ export default {
.titleBox {
width: 55%;
position: absolute;
top: 320px;
top: 420px;
left: 40px;
overflow: hidden;
color: #fff;
@@ -1418,5 +1597,3 @@ export default {
height: 100%;
}
</style>



+ 3
- 1
src/main.js Parādīt failu

@@ -7,8 +7,10 @@ import 'vant/lib/index.css'
// 引入lib-flexible做rem适配
import 'lib-flexible'
import axios from "axios"
import ElementUI from 'element-ui'; //引入js
import 'element-ui/lib/theme-chalk/index.css';//引入css

// Vue.use(ElementUI);
Vue.use(ElementUI);





+ 11
- 5
src/router/index.js Parādīt failu

@@ -8,30 +8,36 @@ 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: '/aboutUe',
name: 'aboutUe',
// component: Home
component: ()=> import("../components/aboutUe/aboutUe"),
component: () => import("../components/aboutUe/aboutUe"),
},
{
path: '/styleAdd',
name: 'styleAdd',
// component: Home
component: ()=> import("../components/styleAdd/styleAdd"),
component: () => import("../components/styleAdd/styleAdd"),
},
{
path: '/login',
name: 'login',
// component: Home
component: () => import("../views/login/login"),
},
]

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


+ 175
- 0
src/views/login/login.vue Parādīt failu

@@ -0,0 +1,175 @@
<template>
<div class="page">
<div class="loginBox">
<div class="welcome">欢迎加入MetAvatar</div>
<el-form ref="form" :rules="rules" :model="form">
<el-form-item class="phone" prop="phone">
<el-input
class="phoneInput"
v-model="form.phone"
:placeholder="characters == 1 ? '请输入手机号' : 'Phone'"
clearable
></el-input>
<el-button class="getCode" type="text" @click="getCode">{{
codeInfo
}}</el-button>
</el-form-item>
<el-form-item class="code" prop="code">
<el-input
class="codeInput"
v-model="form.code"
maxlength="10"
:placeholder="characters == 1 ? '请输入验证码' : 'Name'"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button class="submitBtn" @click="login">登录(注册)</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>

<script>
import Vue from "vue";
import { mapState, mapActions } from "vuex";
import { Toast } from "vant";

Vue.use(Toast);
export default {
data() {
return {
codeInfo: "获取验证码",
form: {
phone: "",
code: "",
},
rules: {
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);
},
},
],
},
};
},

computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

methods: {
...mapActions(["setCharacters"]),

getCode() {
const phoneValue = this.form.phone;
let phoneReg = /^1[35789]\d{9}$/;
let phoneValide = phoneReg.test(phoneValue);

if (!phoneValide) {
Toast.fail("请输入正确的手机号!");
} else {
this.$axios({
method: "get",
url: `https://smapitest.malls.iformall.com/C/api/user/sendLoginPhoneCode?phone=${phoneValue}`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
})
.then((res) => {
Toast.success("短信验证码发送成功!");
this.codeInfo = 60;
const timer = setInterval(() => {
if (this.codeInfo != 1) {
this.codeInfo--;
} else {
clearInterval(timer);
this.codeInfo = "获取验证码";
}
}, 1000);
})
.catch((err) => {
Toast.fail(err.message);
});
}
},
login() {
const data = {
phone: this.form.phone,
code: this.form.code,
};
this.$axios({
method: "post",
url: `https://smapitest.malls.iformall.com/C/api/user/doLoginByPhone`,
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data,
})
.then((res) => {
console.log(res, "res");
if (res.data.code == 200) {
Toast.success("登录成功!");
const token = res.data.data.token;
localStorage.setItem("AccessToken", token);
this.$router.push("/");
} else {
Toast.fail(res.data.message);
}
})
.catch((err) => {
Toast.fail(err.message);
});
},
},
};
</script>

<style lang="scss" scoped>
.page {
background-color: #000000cd;
padding-top: 36px;
.loginBox {
height: 500px;
background: linear-gradient(140deg, #6e60e9, #2867d4, #1ec2ae);
margin: auto;
text-align: center;
padding-top: 100px;
padding-left: 30px;
padding-right: 30px;
.welcome {
font-size: 26px;
color: #fff;
margin-bottom: 25px;
}
.phoneInput {
position: relative;
}
.getCode {
position: absolute;
right: 10px;
}
.submitBtn {
background: linear-gradient(140deg, #1ec2ae, #6e60e9, #2867d4);
border: none;
color: #fff;
}
}
}
</style>

+ 11
- 11
vue.config.js Parādīt failu

@@ -11,19 +11,19 @@ module.exports = {
// })]
// }

}
},
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: {
@@ -32,14 +32,14 @@ module.exports = {
},
proxy: {
'/api': {
target: 'http://www.metavatar.cc/api',
target: 'https://smapitestmalls,iformall.com/C/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
},
},
}
},
lintOnSave: false,


+ 8014
- 0
yarn.lock
Failā izmaiņas netiks attēlotas, jo tās ir par lielu
Parādīt failu


Notiek ielāde…
Atcelt
Saglabāt