|
- <template>
- <div class="Box" id="top">
- <div class="module_1">
- <img
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/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 class="desc" v-if="characters == 1">
- <div>无需真人出镜,虚拟直播解决真人产能、IP归属等等现实中的问题</div>
- <div>能为您在各种场景下7*24工作</div>
- </div>
- <!-- 英文部分 -->
- <div class="title_item1" v-if="characters != 1">MetaManeuver</div>
- <div class="title_item1_y" v-if="characters != 1">
- The live broadcast virtual person is natural and lifelike,
- ultra-realistic hardly to tell the differences from real human being.
- </div>
-
- <div class="desc" v-if="characters != 1">
- <div>
- Virtual live broadcast solves real-world problems such as production
- capacity of real people, IP ownership, etc. by virtual digital human
- </div>
- <div>Can work for you 7*24 in various scenarios</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" v-if="characters == 1">真人无需出镜驱动数字人直播</div>
- <div class="title" v-if="characters != 1">
- Digital live broadcasting manipulated by AI, text, voice, video etc.to
- free real people workforce on camera.
- </div>
- <div class="imgBox">
- <li style="position: relative">
- <img
- v-if="characters == 1"
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2x.png"
- alt=""
- />
- <img
- v-if="characters != 1"
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList1@2xEnglish.png"
- alt=""
- />
- <div class="textInImg" v-if="characters != 1">中の人</div>
- </li>
- <li style="position: relative">
- <img
- v-if="characters == 1"
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2x.png"
- alt=""
- />
- <img
- v-if="characters != 1"
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList2@2xEnglish.png"
- alt=""
- />
- <div class="textInImg" v-if="characters != 1">
- Digital live streaming
- </div>
- </li>
- <li style="position: relative">
- <img
- v-if="characters == 1"
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2x.png"
- alt=""
- />
- <img
- v-if="characters != 1"
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/imgList3@2xEnglish.png"
- alt=""
- />
- <div class="textInImg" v-if="characters != 1">Toonman live</div>
- </li>
- <div class="redCard" v-if="characters == 1">无缝接入各主流平台</div>
- <div class="redCard" v-if="characters != 1">
- Seamless access to all platforms, tictok,intagram, facebook,wechat
- etc.
- </div>
- <div class="pinkCard" v-if="characters == 1">
- IP版权归属明确 无后顾之忧
- </div>
- <div class="pinkCard" v-if="characters != 1">
- No IP copyright concerns
- </div>
- <div class="blueCard" v-if="characters == 1">
- 出镜声形从此统一 打造沉淀企业IP
- </div>
- <div class="blueCard" v-if="characters != 1">
- Unified voice and appearance for digital IP of the precipitation
- enterprise will be created。
- </div>
- </div>
- </div>
-
- <div class="module_3">
- <div class="title" v-if="characters == 1">脚本驱动数字人直播</div>
- <<<<<<< HEAD
- <div class="title" v-if="characters != 1">Script-driven digital human live broadcast</div>
- <img class="title" v-if="characters == 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png" alt="" />
- <img class="title" v-if="characters != 1" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png" alt="" />
- =======
- <div class="title" v-if="characters != 1">
- Script-driven digital human live broadcast
- </div>
- <img
- v-if="characters == 1"
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive@2x.png"
- alt=""
- />
- <img
- v-if="characters != 1"
- src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/metavatar_shadow/scriptDrive_en@2x.png"
- alt=""
- />
- >>>>>>> ad918594528b2ee1797610746411709b03b41fec
- </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="characters == 1 ? rules : rulesEnglish"
- :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="email">
- <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,
-
- //
-
- 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);
- },
-
- 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: "/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");
- });
- },
- };
- </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: #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: 810px;
- background: #ffffff;
- padding-top: 32px;
- padding-left: 331px;
- padding-right: 306px;
-
- .title {
- text-align: center;
- margin-bottom: 52px;
- font-size: 36px;
- }
- .imgBox {
- display: flex;
- position: relative;
- justify-content: space-between;
- text-align: center;
- li {
- list-style: none;
- margin-right: 7px;
- .textInImg {
- position: absolute;
- top: 20px;
- left: 20px;
- width: 10px;
- font-size: 35px;
- line-height: 35px;
- color: #fff;
- font-weight: 900;
- transition: all 0.3s;
- }
- 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);
- }
- &:hover ~ .textInImg {
- transform: translateY(-20px);
- }
- }
- img:hover .textInImg {
- top: -5px;
- }
- }
- .redCard {
- position: absolute;
- left: -111px;
- bottom: 69px;
- width: 230px;
- // height: 50px;
- font-size: 18px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- text-align: center;
- 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: 700px;
- background-color: #ebeef7;
- padding-top: 33px;
- text-align: center;
- .title {
- text-align: center;
- font-size: 36px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #4d4d4d;
- line-height: 36px;
- margin-bottom: -25px;
- }
- img {
- width: 1446px;
- height: 638px;
- opacity: 0.85;
- transition: all 0.3s;
- &:hover {
- opacity: 1;
- }
- }
- }
- </style>
|