|
- <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">MetaGene</div>
- <div class="title_item1_y" v-if="characters != 1">AI generative high fidelity and natural digital human automatically by variety labels & prompt</div>
-
- <div class="desc" v-if="characters != 1">
- <div>Meet the needs of digital avatar, virtual creation, original painting reproduction and other scenarios.</div>
- <div>The exclusive virtual IP created out of nothing completely, eliminates the worries of IP copyright, finalize the IP image in minutes</div>
- </div>
-
- <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" v-if="characters == 1">保持人脸特征 自由调整各类心仪风格</div>
- <div class="title" v-if="characters != 1">Maintain facial features and freely adjust various favorite styles</div>
- <div class="style">STYLE</div>
- <img src="../../assets/img/metavatar_generate/model3-IMG@2x.png" alt="" />
- </div>
-
- <div class="module_4">
- <div class="imgBox">
- <div class="textInsideBox">
- <div class="title" v-if="characters == 1">丰富的状态编辑 完整的IP形象展示</div>
- <div class="title" v-if="characters != 1">Rich status editing, complete IP image display</div>
- <div class="style">FULL AGE</div>
- </div>
-
- <img src="../../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;
- left: 50%;
- top: 40px;
- transform: translateX(-50%);
- // margin-left: 570px;
- z-index: 99;
- .title {
- font-size: 36px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #4d4d4d;
- line-height: 36px;
- text-align: center;
- margin-bottom: 94px;
- }
- .style {
- font-size: 24px;
- font-family: Alibaba PuHuiTi;
- font-weight: 400;
- letter-spacing: 20px;
- color: #4d4d4d;
- line-height: 36px;
- }
- }
- img {
- width: 100%;
- height: 100%;
- opacity: 0.85;
- transition: all 0.3s;
- &:hover {
- opacity: 1;
- }
- }
- }
- }
- </style>
|