Parcourir la source

upload

ctt_ywq
HolyKnightIX il y a 2 ans
Parent
révision
9293288a01
3 fichiers modifiés avec 508 ajouts et 45 suppressions
  1. +41
    -28
      src/components/common/top.vue
  2. +9
    -17
      src/components/home/home.vue
  3. +458
    -0
      src/components/views/shadow.vue

+ 41
- 28
src/components/common/top.vue Voir le fichier

@@ -1,15 +1,23 @@
<template> <template>
<div class="topBox">
<div class="topBox" ref="scrollDiv">
<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">{{characters==1?'产品能力':'Product'}}</div>
<div class="categoryitem">{{characters==1?'创新技术':'Technology'}}</div>
<div class="categoryitem">{{characters==1?'解决方案':'Solutions'}}</div>
<div class="categoryitem">
{{ characters == 1 ? "产品能力" : "Product" }}
</div>
<div class="categoryitem">
{{ characters == 1 ? "创新技术" : "Technology" }}
</div>
<div class="categoryitem">
{{ characters == 1 ? "解决方案" : "Solutions" }}
</div>
<!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> --> <!-- <div class="categoryitem">{{characters==1?'精选案例':'Cases'}}</div> -->
<div class="categoryitem" @click="go('/aboutUe')">{{characters==1?'关于我们':'About us'}}</div>
<div class="categoryitem" @click="go('/aboutUe')">
{{ characters == 1 ? "关于我们" : "About us" }}
</div>
</div> </div>
<div class="cutBox"> <div class="cutBox">
<div class="en"> <div class="en">
@@ -21,12 +29,8 @@
:value="item.value" :value="item.value"
> >
<div class> <div class>
<img
:src="item.url"
alt
class="cutImg"
>
<span>{{item.name}}</span>
<img :src="item.url" alt class="cutImg" />
<span>{{ item.name }}</span>
</div> </div>
</el-option> </el-option>
</el-select> </el-select>
@@ -44,15 +48,15 @@ export default {
{ {
name: "Cn", name: "Cn",
value: 1, value: 1,
url: require("../../assets/img/cn.jpeg")
url: require("../../assets/img/cn.jpeg"),
}, },
{ {
name: "En", name: "En",
value: 2, value: 2,
url: require("../../assets/img/en.jpg")
}
url: require("../../assets/img/en.jpg"),
},
], ],
charactersMy: 1
charactersMy: 1,
}; };
}, },
watch: { watch: {
@@ -71,8 +75,8 @@ export default {
}, },
computed: { computed: {
...mapState({ ...mapState({
characters: state => state.publicObj.characters
})
characters: (state) => state.publicObj.characters,
}),
}, },
methods: { methods: {
...mapActions(["setCharacters"]), ...mapActions(["setCharacters"]),
@@ -80,13 +84,23 @@ export default {
console.log(value); console.log(value);
this.setCharacters(value); this.setCharacters(value);
}, },
go(url){
this.$router.push(url)
go(url) {
this.$router.push(url);
},
// 滚动到顶部
handleScrollTop() {
this.$nextTick(() => {
let scrollElem = this.$refs.scrollDiv;
scrollElem.scrollTo({ top: 0, behavior: "smooth" });
});
}, },
}, },
mounted() { mounted() {
console.log(this.languageLsit, "characters"); console.log(this.languageLsit, "characters");
}
},
created() {
this.handleScrollTop();
},
}; };
</script> </script>


@@ -110,8 +124,8 @@ export default {
} }
.logo { .logo {
float: left; float: left;
width: 60px;
height: 30px;
width: 60px;
height: 30px;
} }
.logoTitle { .logoTitle {
float: left; float: left;
@@ -133,9 +147,10 @@ export default {
color: #7d7d7d; color: #7d7d7d;
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
transition: all 0.3s;
} }
.categoryitem:hover{
background-color: #1358ba;
.categoryitem:hover {
color: #16e9d6;
} }
.cutBox { .cutBox {
float: right; float: right;
@@ -155,9 +170,7 @@ export default {
float: left; float: left;
font-size: 15px; font-size: 15px;
} }
.el-select{
.el-select {
width: 120px; width: 120px;
} }
</style> </style>



+ 9
- 17
src/components/home/home.vue Voir le fichier

@@ -300,13 +300,12 @@
<div class="xian"></div> <div class="xian"></div>
<div class="swiper-container"> <div class="swiper-container">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide">
<img
v-for="(item, index) in carouselLsit"
:key="index"
class="swiper-slide-img"
:src="item.url"
/>
<div
class="swiper-slide"
v-for="(item, index) in carouselLsit"
:key="index"
>
<img class="swiper-slide-img" :src="item.url" />
</div> </div>
</div> </div>
</div> </div>
@@ -323,7 +322,7 @@
</div> </div>


<div class="module_9" id="module_9"> <div class="module_9" id="module_9">
<div class="weBox">
<div class="weBox" @click="goPages('aboutUs')">
<div class="weText"> <div class="weText">
<div class="conBox"> <div class="conBox">
<div class="title">ABOUT ME</div> <div class="title">ABOUT ME</div>
@@ -1575,18 +1574,16 @@ export default {
/* Center slide text vertically */ /* Center slide text vertically */
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex;
// display: -webkit-flex;
display: flex; display: flex;
-webkit-box-pack: center; -webkit-box-pack: center;
-ms-flex-pack: center; -ms-flex-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: space-between;
justify-content: space-evenly;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
transition: 300ms;
transform: scale(0.7);
} }


.swiper-slide-active, .swiper-slide-active,
@@ -1604,11 +1601,6 @@ export default {
} }
} }


.swiper-slide-img:nth-child(2) {
width: 540px;
height: 675px;
}

.topBox { .topBox {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;


+ 458
- 0
src/components/views/shadow.vue Voir le fichier

@@ -0,0 +1,458 @@
<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>
<div class="categoryitem" @click="goView('module_5')">
{{ characters == 1 ? "创新技术" : "Technology" }}
</div>
<div class="categoryitem" @click="goView('md2')">
{{ characters == 1 ? "解决方案" : "Solutions" }}
</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="categoryitem" @click="goView('module_9')">
{{ characters == 1 ? "关于我们" : "About us" }}
</div>
</div>
<div class="cutBox">
<div class="en">
<el-select
v-model="charactersMy"
placeholder="请选择"
@change="change"
>
<el-option
v-for="item in languageLsit"
:key="item.value"
:label="item.name"
:value="item.value"
>
<div class>
<img :src="item.url" alt class="cutImg" />
<span>{{ item.name }}</span>
</div>
</el-option>
</el-select>
</div>
</div>
</div> -->

<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",
},
});
},
};
</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;
}
</style>

Chargement…
Annuler
Enregistrer