Bläddra i källkod

upload

ctt_ywq
HolyKnightIX 1 år sedan
förälder
incheckning
d5e5019189
7 ändrade filer med 980 tillägg och 0 borttagningar
  1. Binär
      src/assets/icon/input.png
  2. Binär
      src/assets/icon/voice.png
  3. Binär
      src/assets/img/demo.png
  4. +3
    -0
      src/components/common/top.vue
  5. +504
    -0
      src/components/views/realTime.vue
  6. +463
    -0
      src/components/views/realTimeC.vue
  7. +10
    -0
      src/router/index.js

Binär
src/assets/icon/input.png Visa fil

Före Efter
Bredd: 600  |  Höjd: 600  |  Storlek: 12 KiB

Binär
src/assets/icon/voice.png Visa fil

Före Efter
Bredd: 400  |  Höjd: 400  |  Storlek: 14 KiB

Binär
src/assets/img/demo.png Visa fil

Före Efter
Bredd: 1937  |  Höjd: 1658  |  Storlek: 1.5 MiB

+ 3
- 0
src/components/common/top.vue Visa fil

@@ -32,6 +32,9 @@
<el-dropdown-item command="MetaTuring">{{ <el-dropdown-item command="MetaTuring">{{
characters == 1 ? "邃芒慧侃" : "MetaTuring" characters == 1 ? "邃芒慧侃" : "MetaTuring"
}}</el-dropdown-item> }}</el-dropdown-item>
<el-dropdown-item command="realTime">{{
characters == 1 ? "实时对话" : "实时对话"
}}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>


+ 504
- 0
src/components/views/realTime.vue Visa fil

@@ -0,0 +1,504 @@
<template>
<div class="Box" id="top">
<div
class="module_1"
style="position: relative; background-color: #000; height: 800px"
@click="goSetVedio(isPlayed)"
>
<video
style="position: absolute; right: 250px"
ref="videoPlayer"
src="https://video.metavatar.cc/sv/5ee09a38-1883359e47a/5ee09a38-1883359e47a.mp4"
max-width="800px"
height="800px"
autoplay
muted
controls
loop="loop"
/>
<!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_generate/suiMang_generate@2x.png" width="100%" height="100%" /> -->
<div class="titleBox">
<div class="title_item1" v-if="characters == 1">
We breathe life into generative AI
</div>
<!-- 英文部分 -->
<div class="title_item1" v-if="characters != 1">
We breathe life into generative AI
</div>

<div class="title_btn" @click="startTalking">
{{ characters == 1 ? "开始对话" : "Start to talk" }}
</div>
</div>
</div>
</div>
</template>

<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";

export default {
data() {
return {
//零时存放
charactersMy: 1,
//
userName: "",
phone: "",
email: "",

form: {
name: "",
phone: "",
email: "",
},

rules: {
name: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
name: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false,
};
},
methods: {
...mapActions(["setCharacters"]),

change(value) {
console.log(value);
this.setCharacters(value);
},

goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},

showBox() {
this.dialogVisible = true;
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
goPages(path) {
this.$router.push(`/${path}`);
},

startTalking() {
this.$router.push("/realTimeC");
},

submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,

// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},

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

// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
});
},
};
</script>

<style lang="scss" scoped>
.Box {
width: 100%;
overflow: hidden;
}
.topBox {
width: 90%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// background-color: rgba(255, 255, 255, 0.1);
}
.logoBox {
margin-top: 35px;
margin-left: 35px;
margin-bottom: 35px;
float: left;
overflow: hidden;
}
.logo {
float: left;
// width: 60px;
// height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 600px;
float: left;
margin-top: 20px;
margin-left: 16%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.categoryitem {
width: 110px;
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
// background-color: #16e9d6
}
.cutBox {
float: right;
margin-top: 35px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 10px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}

.module_1 {
width: 100%;
// height: 1080px;
// background-color: aquamarine;
// background-image: url("../../assets/img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #f1f4f7;
.titleBox {
width: 36%;
position: absolute;
top: 240px;
left: 194px;
overflow: hidden;
color: #ffffff;
.title_item1 {
margin-bottom: 14px;
font-size: 60px;
}
.title_item1_y {
// margin-bottom: 14px;
font-size: 36px;
}
.title_item2 {
margin-bottom: 20px;
font-size: 42px;
}
.title_item3 {
font-size: 16px;
line-height: 30px;
}
.title_btn {
margin-top: 60px;
height: 60px;
width: 220px;
text-align: center;
line-height: 60px;
color: #ffffff;
border-radius: 40px;
border: #ffffff solid 3px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
&:hover {
color: #16e9d6;
border: #16e9d6 solid 3px;
}
}
.desc {
margin-top: 29px;
font-size: 16px;
line-height: 36px;
}
}
}
.module_2 {
height: 930px;
// height: 1080px;
background-color: #fff;
padding-top: 53px;
// padding-top: 133px;
text-align: center;
.title {
text-align: center;
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232324;
line-height: 62px;
margin-bottom: 44px;
}
img {
width: 1293px;
height: 798px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_3 {
height: 850px;
background-color: #ebeef7;
padding-top: 53px;
text-align: center;
.title {
text-align: center;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 82px;
}
.style {
text-align: center;
font-size: 24px;
letter-spacing: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 99px;
}
img {
width: 100%;
height: 527px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_4 {
height: 850px;
background-color: #fff;
padding-top: 26px;
padding-left: 116px;
text-align: center;
.imgBox {
position: relative;
width: 1669px;
height: 782px;
.textInsideBox {
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
// margin-left: 570px;
z-index: 99;
.title {
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
text-align: center;
margin-bottom: 94px;
}
.style {
font-size: 24px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
letter-spacing: 20px;
color: #4d4d4d;
line-height: 36px;
}
}
img {
width: 100%;
height: 100%;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
}
</style>

+ 463
- 0
src/components/views/realTimeC.vue Visa fil

@@ -0,0 +1,463 @@
<template>
<div class="Box" id="top">
<div class="module_1" style="background-color: #fafffc">
<img style="width: 55%" src="../../assets/img/demo.png" alt="" />
<div class="itemBox left">
<img src="../../assets/icon/voice.png" alt="" />
</div>
<div class="itemBox right">
<img src="../../assets/icon/input.png" alt="" />
</div>
</div>
</div>
</template>

<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";
import { mapState, mapActions } from "vuex";

export default {
data() {
return {
//零时存放
charactersMy: 1,
//
userName: "",
phone: "",
email: "",

form: {
name: "",
phone: "",
email: "",
},

rules: {
name: [
{
required: true,
min: 1,
max: 10,
message: "此项必填,内容最大10个字符!",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "请先输手机号",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("抱歉,请输入正确的手机号");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "请输入邮箱!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
// var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("抱歉,请输入正确的邮箱");
}
callback(errors);
},
},
],
},
rulesEnglish: {
name: [
{
required: true,
min: 1,
max: 10,
message: "This item is required !",
trigger: "blur",
},
],
phone: [
{
required: true,
trigger: "change",
message: "Please enter your cell phone number",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let phone = /^1[35789]\d{9}$/;
if (value && !phone.test(value)) {
callback("Sorry, please enter the correct cell phone number");
}
callback(errors);
},
},
],
email: [
{
required: true,
trigger: "change",
message: "Please enter email!",
trigger: "blur",
},
{
validator(rule, value, callback, source, options) {
var errors = [];
let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (value && !email.test(value)) {
callback("Sorry, please enter the correct email address");
}
callback(errors);
},
},
],
},
// characters: 1, //1=》中文 2=》英文
timeFlag: 5,
dialogVisible: false,
};
},
methods: {
...mapActions(["setCharacters"]),

change(value) {
console.log(value);
this.setCharacters(value);
},

goSetVedio(flag) {
if (flag) {
this.$refs["videoII"].play();
} else {
this.$refs["videoII"].pause();
}
this.isPlayed = !flag;
},

showBox() {
this.dialogVisible = true;
},
goView(id) {
document.querySelector("#" + id).scrollIntoView({
behavior: "smooth", //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。
block: "start", //定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline: "nearest", //"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
});
// console.log(document.querySelector(id),);
},
goPages(path) {
this.$router.push(`/${path}`);
},

startTalking() {
this.$router.push("");
},

submit() {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
let params = {
mallName: this.form.email, //邮箱
applicant: this.form.name, //姓名
phone: this.form.phone, //电话
};
this.$axios({
method: "post",
url: "/C/api/wxMallApply/add",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
data: params,
})
.then((res) => {
this.form.email = "";
this.form.name = "";
this.form.phone = "";
this.$message.success(
this.characters == 1 ? "提交成功" : "submit successfully"
);
this.dialogVisible = false;
})
.catch((err) => {
this.$message.error(err.message);
});
}
});
},
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

mounted() {
// console.log();
// this.$refs["vidoe"].play();
new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,

// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true, // 分页器可以点击
},

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

// 如果需要滚动条
scrollbar: {
el: ".swiper-scrollbar",
},
});
},
created() {
this.$nextTick(() => {
this.goView("top");
this.$refs.videoPlayer.muted = false;
this.$refs.videoPlayer.play();
});
},
};
</script>

<style lang="scss" scoped>
.Box {
width: 100%;
overflow: hidden;
}
.topBox {
width: 90%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
// background-color: rgba(255, 255, 255, 0.1);
}
.logoBox {
margin-top: 35px;
margin-left: 35px;
margin-bottom: 35px;
float: left;
overflow: hidden;
}
.logo {
float: left;
// width: 60px;
// height: 30px;
}
.logoTitle {
float: left;
line-height: 30px;
margin-left: 10px;
font-size: 22px;
}
.categoryBox {
height: 30px;
width: 600px;
float: left;
margin-top: 20px;
margin-left: 16%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.categoryitem {
width: 110px;
line-height: 30px;
color: #7d7d7d;
font-size: 15px;
// background-color: #16e9d6
}
.cutBox {
float: right;
margin-top: 35px;
margin-right: 50px;
overflow: hidden;
cursor: pointer;
}
.cutImg {
width: 30px;
height: 20px;
float: left;
margin-top: 10px;
margin-right: 10px;
}
.en {
float: left;
font-size: 15px;
}

.module_1 {
position: relative;
width: 100%;
// height: 1080px;
// background-color: aquamarine;
// background-image: url("../../assets/img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
margin-top: 80px;
background-color: #f1f4f7;
text-align: center;
.itemBox {
position: absolute;
bottom: 50px;
width: 50px;
height: 50px;
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
border-radius: 50%;
text-align: center;
padding: 20px;
transition: all 0.3s;
cursor: pointer;
&.left {
left: 250px;
}
&.right {
right: 250px;
}
img {
width: 100%;
height: 100%;
}
&:hover {
opacity: 0.8;
}
}
}
.module_2 {
height: 930px;
// height: 1080px;
background-color: #fff;
padding-top: 53px;
// padding-top: 133px;
text-align: center;
.title {
text-align: center;
font-size: 48px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #232324;
line-height: 62px;
margin-bottom: 44px;
}
img {
width: 1293px;
height: 798px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_3 {
height: 850px;
background-color: #ebeef7;
padding-top: 53px;
text-align: center;
.title {
text-align: center;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 82px;
}
.style {
text-align: center;
font-size: 24px;
letter-spacing: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
margin-bottom: 99px;
}
img {
width: 100%;
height: 527px;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
.module_4 {
height: 850px;
background-color: #fff;
padding-top: 26px;
padding-left: 116px;
text-align: center;
.imgBox {
position: relative;
width: 1669px;
height: 782px;
.textInsideBox {
position: absolute;
left: 50%;
top: 40px;
transform: translateX(-50%);
// margin-left: 570px;
z-index: 99;
.title {
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #4d4d4d;
line-height: 36px;
text-align: center;
margin-bottom: 94px;
}
.style {
font-size: 24px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
letter-spacing: 20px;
color: #4d4d4d;
line-height: 36px;
}
}
img {
width: 100%;
height: 100%;
opacity: 0.85;
transition: all 0.3s;
&:hover {
opacity: 1;
}
}
}
}
</style>

+ 10
- 0
src/router/index.js Visa fil

@@ -50,6 +50,16 @@ const routes = [
name: 'shadow', name: 'shadow',
component: () => import("../components/views/shadow"), component: () => import("../components/views/shadow"),
}, },
{
path: '/realTime',
name: 'realTime',
component: () => import("../components/views/realTime"),
},
{
path: '/realTimeC',
name: 'realTimeC',
component: () => import("../components/views/realTimeC"),
},
] ]


const router = new VueRouter({ const router = new VueRouter({


Laddar…
Avbryt
Spara