<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>
