<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('Product')">
          {{ characters == 1 ? "产品能力" : "Product" }}
        </div>
        <div class="categoryitem" @click="goView('Technology')">
          {{ characters == 1 ? "创新技术" : "Technology" }}
        </div>
        <div class="categoryitem" @click="goView('Solutions')">
          {{ characters == 1 ? "解决方案" : "Solutions" }}
        </div>
        <div class="categoryitem" @click="goView('Cases')">
          {{ characters == 1 ? "经典案例" : "Cases" }}
        </div>
        <div class="categoryitem">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ characters == 1 ? "更多案例" : "AllCases"
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="turing">邃图灵</el-dropdown-item>
              <el-dropdown-item command="live">邃芒慧播</el-dropdown-item>
              <el-dropdown-item command="generate">邃芒慧生</el-dropdown-item>
              <el-dropdown-item command="shadow">邃芒慧影</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div class="categoryitem" @click="goView('aboutUs')">
          {{ 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>

    <div class="module_1">
      <img src="../../assets/img/BG@2x.png" width="100%" height="100%" />
      <div class="titleBox">
        <div class="title_item1" v-if="characters == 1">
          超写实！虚拟数字人创造者
        </div>
        <div class="title_item3" v-if="characters == 1">
          轻松创造您独一无二的数字人IP
        </div>

        <!-- <div class="title_item3" v-if="characters==1">创造生成 超真实 超写实 风格化 不同性别</div>
        <div class="title_item3" v-if="characters==1">多人种 分身化身随心创造</div> -->

        <div class="title_item1_y">Hyperrealism</div>
        <div class="title_item2" v-if="characters != 1">
          Digital human creator
        </div>
        <div class="title_item3" v-if="characters != 1">
          Easily create your unique digital IP
        </div>

        <div class="title_btn" @click="showBox">
          {{ characters == 1 ? "立刻体验" : "Try it now" }}
        </div>
      </div>
      <div class="md1" id="Product"></div>
    </div>

    <div class="module_2" id="module_2">
      <div class="characters_l">
        <div class="titleBox">
          <div class="title">
            {{ characters == 1 ? "Ai驱动" : "ai drive" }}
          </div>
        </div>
        <div class="ctnBox">
          <div class="title_ctn1">
            {{
              characters == 1
                ? "文字驱动数字人交互，面容生动表情自然，ai语音配合专业文案和音频素材"
                : "Text and AI language Sound driven digital human interaction, vivid face and natural expression,"
            }}
          </div>
          <div class="title_ctn1">
            {{
              characters == 1
                ? "让邃芒数字人学富五车，驾驭各种复杂场景"
                : "make Suimang digital people clever to driving various complex scenes"
            }}
          </div>
        </div>
      </div>

      <div class="characters_2">
        <div class="titleBox">
          <div class="title">
            {{ characters == 1 ? "真人驱动" : "human drive" }}
          </div>
        </div>

        <div class="ctnBox">
          <div class="title_ctn1">
            {{
              characters == 1
                ? "文字驱动数字人交互，面容生动表情自然，ai语音配合专业文案和音频素材让邃芒数字人学富五车，"
                : "Text and AI language Sound driven digital human interaction, vivid face and natural expression,"
            }}
          </div>
          <div class="title_ctn1">
            {{
              characters == 1
                ? "驾驭各种复杂场景"
                : "make Suimang digital people clever to driving various complex scenes"
            }}
          </div>
        </div>
      </div>
    </div>
    <div class="module_3" id="module_3">
      <div class="imgBox1">
        <img src="../../assets/img/module_3_1.png" alt />
      </div>
      <div class="imgBox2">
        <img src="../../assets/img/module_3_2.png" alt />
      </div>
    </div>
    <div class="module_4" id="module_4">
      <div class="btnBox1">
        <div class="btnText" @click="showBox">
          {{ characters == 1 ? "立刻体验" : "Try it now" }}
        </div>
      </div>
      <div class="btnBox2">
        <div class="btnText" @click="showBox">
          {{ characters == 1 ? "立刻体验" : "Try it now" }}
        </div>
      </div>
    </div>

    <div :class="characters == 1 ? 'module_5_0' : 'module_5_1'" id="Technology">
      <div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
        <div class="title">
          {{
            characters == 1 ? "快速 高效 完美" : "Fast   Efficient   Perfect"
          }}
        </div>
        <div class="paragraph">
          {{
            characters == 1
              ? "邃芒数字人通过StyleGAN和基于神经辐射场（NeRF）的场景表征 "
              : "Suimang Digital Human brings digital human creation into a new generation"
          }}
        </div>

        <!-- <div class="paragraph" v-if="characters != 1">
          User can experiences a completely automatic process of character
          creation, manipulation and intelligent interaction without any
          intervention.MetaGene provides high-resolution virtual digital human ,
          “digital twin”, symbolization characters editable freely rapidly.
        </div> -->

        <div class="paragraph">
          {{
            characters == 1
              ? "与容积渲染将数字人创造带入了全新世代！"
              : "through StyleGAN and neural radiation  field (NeRF) based scene"
          }}
        </div>

        <div class="paragraph">
          {{ characters == 1 ? "" : "representation and volume rendering! " }}
        </div>
        <div class="read_btn" @click="showBox">
          {{ characters == 1 ? "了解详情" : "Read more" }}
        </div>
      </div>

      <div class="md1" id="Solutions"></div>
    </div>

    <div class="module_6" id="module_6">
      <div class="title">
        {{
          characters == 1
            ? "让如此优秀的数字人服务于您的更多应用场景吧！"
            : "Let such excellent digital people serve more of your application scenarios!"
        }}
      </div>
      <div class="imgBox">
        <div
          class="itemBox"
          v-for="(item, index) in module_6_data"
          :key="index"
        >
          <img :src="item.url" alt />
          <p>{{ characters == 1 ? item.name : item.name_y }}</p>
        </div>
      </div>
    </div>

    <div class="module_7">
      <div class="fillBox">
        <div class="title">
          {{
            characters == 1
              ? "超写实数字人的互动全新体验"
              : "A new interactive experience of hyper-realistic digital people"
          }}
        </div>
        <div class="hintBox">
          <div class="triangle"></div>
          <div class="news1">
            {{ characters == 1 ? "你好，我是XXXX" : "Hello, I'm XXXX" }}
          </div>
        </div>
        <div class="hintBox_1">
          <div class="triangle"></div>
          <div class="news1">
            {{
              characters == 1
                ? "你会说英语吗？Avrli"
                : "Do you speak English? Avrli"
            }}
          </div>
        </div>
        <div class="hintBox">
          <div class="triangle"></div>
          <div class="news1">
            Which one would you like--this one or that one
          </div>
        </div>
        <div class="hintBox_1">
          <div class="triangle"></div>
          <div class="news1">
            {{
              characters == 1
                ? "你会说英语吗？Avrli"
                : "Do you speak English? Avrli"
            }}
          </div>
        </div>
        <div class="hintBox">
          <div class="triangle"></div>
          <div class="news1">
            {{
              characters == 1
                ? "据北京市气象局消息，丰台、石景山有雷阵雨天气"
                : "According to the Beijing Meteorological Bureau,"
            }}
          </div>
        </div>
        <div class="bnt_look" @click="showBox">
          {{ characters == 1 ? "立刻体验" : "Try it now" }}
        </div>
      </div>
    </div>

    <div class="module_8" id="Cases">
      <div class="title">SELECTED CASES</div>
      <div class="title_1">{{ characters == 1 ? "经典案例" : "" }}</div>
      <div class="xian"></div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in carouselLsit"
            :key="index"
          >
            <img class="swiper-slide-img" :src="item.url" />
          </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="tiktok">
        {{ characters == 1 ? "tiktok直播Rilloky" : "tiktokRilloky" }}
      </div>
      <div class="tiktok_ctn">
        {{
          characters == 1
            ? "随着元宇宙概念的升温，数字艺人开始广泛的出现在公众面前为人们所习惯。邃芒科技的AI养成路线，致力于打造超写实虚"
            : "With the warming of the concept of meta-universe, digital artists begin to appear widely in front of the public, and people are used to it. Jia Mang Technology's AI"
        }}
      </div>
    </div>

    <div class="module_9" id="aboutUs">
      <div class="weBox" @click="goPages('aboutUs')">
        <div class="weText">
          <div class="conBox">
            <div class="title">ABOUT ME</div>
            <div class="title_h" v-if="characters == 1">关于我们</div>
            <!-- <div :class="characters == 1 ? 'ctn1' : 'ctn'">
              {{
                characters == 1
                  ? "北京邃芒科技公司正式成立于2021年8月，团队组建于2018年10月。"
                  : "Metavatar is founded in August 2021, the team built up in year 2018. "
              }}
            </div> -->
            <div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
              {{
                characters == 1
                  ? "随着元宇宙概念的升温，数字艺人开始广泛的出现在公众面前为人们所习惯。邃芒科技的AI养成路线，致力于打造超写实虚拟形象，解决传统CG模型生产的IP不够真实的痛点，突破恐怖谷，用更低的成本实现影视工业级标准的直播和生产。 对于影视工业的其他痛点，人员密集型劳动高昂的成本，邃芒科技也给出了更有现代感的解决方案，工程师团队对于像素级的影视工业需求，设计出了针对于抠像、擦除、填补背景的专用模型，节约制作成本，缩短制作周期，优化制作流程。 工程师团队由博士后带队，集合了来自中科院、清华、北京邮电大学等高校的优秀人才，研究生比例超过团队50%以上。"
                  : "With the warming of the concept of meta-universe, digital artists begin to appear widely in front of the public, and people are used to it. Jia Mang Technology's AI cultivation route is dedicated to creating a super-realistic virtual image, solving the pain point that the IP produced by the traditional CG model is not real enough, With the warming of the concept of meta-universe, digital artists begin to appear widely in front of the public, and people are used to it. Jia Mang Technology's AI cultivation route is dedicated to creating a super-realistic virtual image, solving the pain point that the IP produced by the traditional CG model is not real enough, "
              }}
            </div>
            <!-- <div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
              {{
                characters == 1
                  ? "邃芒科技专注虚拟数字人，提供未来世界数字形象巨量需求的生产力与能力，依靠技术与商业双轮驱动为用户打开元宇宙大门。"
                  : "Metavatar focus on digital human sector, provides capability of producing the massive amount requirements for the future metaverse. Vision to be the first level company as a KEY to knock out the door of metaverse; Developing the leading technology and create customer value along the way."
              }}
            </div> -->
          </div>
        </div>
        <img src="../../assets/img/myS.png" alt class="weImg" />
      </div>

      <div class="timeBox">
        <div class="xian"></div>
        <div class="timeF">
          <div
            class="itemBox"
            v-for="(item, index) in timeLsit"
            :key="index"
            @click="timeFlag = index"
          >
            <div class="timeText">{{ item.title }}</div>
            <div class="ImgBox">
              <!-- <img
                :src="
                  timeFlag == index
                    ? require('../../assets/img/a.png')
                    : require('../../assets/img/h.png')
                "
                alt
              /> -->
              <div class="circle"></div>
            </div>
            <div class="ctn">
              {{ characters == 1 ? item.ctn1 : item.ctn1_y }}
            </div>
            <div class="ctn">
              {{ characters == 1 ? item.ctn2 : item.ctn2_y }}
            </div>
          </div>
        </div>
      </div>

      <div class="cooperationBox">
        <div class="titleBox">
          <div class="title">PARTNER</div>
          <div class="title_h" v-if="characters == 1">合作伙伴</div>
        </div>
      </div>

      <div class="cooperation">
        <div
          class="cooperationItem"
          v-for="(item, index) in partnerLsit"
          :key="index"
        >
          <img :src="item.url" alt />
        </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;
    },

    goPages(path) {
      this.$router.push(path);
    },

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

    handleCommand(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,
      view: (state) => state.publicObj.view,
    }),
  },

  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() {
    const id = this.$route.query.id;
    if (id) {
      this.$nextTick(() => {
        this.goView(id);
      });
    }
  },
};
</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;
}
.md1 {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 70px;
  width: 100%;
}
.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: #202020;
  .titleBox {
    width: 36%;
    position: absolute;
    top: 390px;
    left: 190px;
    overflow: hidden;
    color: #fff;
    .title_item1 {
      margin-bottom: 14px;
      font-size: 42px;
    }
    .title_item1_y {
      // margin-bottom: 14px;
      font-size: 42px;
    }
    .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: #fff;
      border-radius: 40px;
      border: #fff solid 3px;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: #16e9d6;
        border: #16e9d6 solid 3px;
      }
    }
  }
}
.module_2 {
  overflow: hidden;
  height: 260px;
  background-color: #202020;
  .characters_l {
    width: 49%;
    float: left;
    height: 100%;
    text-align: right;
    .titleBox {
      overflow: hidden;
    }
    .title {
      margin-top: 50px;
      font-size: 30px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #cacaca;
      padding-bottom: 26px;
      border-bottom: 1px solid #16e9d6;
      float: right;
    }
    .ctnBox {
      margin-top: 30px;
      .title_ctn1 {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #7e7e7e;
        margin-bottom: 8px;
      }
    }
  }
  .characters_2 {
    width: 49%;
    float: right;
    height: 100%;
    text-align: left;
    .titleBox {
      overflow: hidden;
      .title {
        margin-top: 50px;
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #cacaca;
        padding-bottom: 26px;
        border-bottom: 1px solid #16e9d6;
        float: left;
      }
    }
    .ctnBox {
      margin-top: 30px;
      .title_ctn1 {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #7e7e7e;
        margin-bottom: 8px;
      }
    }
  }
}
.module_3 {
  overflow: hidden;
  background-color: #202020;
  .imgBox1 {
    width: 49%;
    height: 570px;
    float: left;
    // background-color: #16e9d6;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .imgBox2 {
    width: 49%;
    height: 570px;
    float: right;
    // background-color: #16e9d6;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.module_4 {
  overflow: hidden;
  background-color: #202020;
  .btnBox1 {
    width: 49%;
    height: 240px;
    float: left;
    overflow: hidden;
    position: relative;
    .btnText {
      cursor: pointer;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      position: absolute;
      margin: auto;
      height: 60px;
      width: 220px;
      text-align: center;
      line-height: 60px;
      color: #16e9d6;
      border-radius: 40px;
      border: #16e9d6 solid 3px;
      font-size: 16px;
      transition: all 0.3s;
      &:hover {
        color: #fff;
        background-color: #16e9d6;
      }
    }
  }
  .btnBox2 {
    width: 49%;
    height: 240px;
    float: right;
    overflow: hidden;
    position: relative;
    .btnText {
      cursor: pointer;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      position: absolute;
      margin: auto;
      height: 60px;
      width: 220px;
      text-align: center;
      line-height: 60px;
      color: #16e9d6;
      border-radius: 40px;
      border: #16e9d6 solid 3px;
      font-size: 16px;
      transition: all 0.3s;
      &:hover {
        color: #fff;
        background-color: #16e9d6;
      }
    }
  }
}
.module_5_0 {
  height: 1080px;
  background-color: #010101;
  position: relative;
  overflow: hidden;
  background-image: url("../../assets/img/module_5_bg1.png");
  background-repeat: no-repeat;
  background-size: 92% 100%;
  background-position: 166% 20%;

  .titleBox {
    // position: absolute;
    // top: 26%;
    // left: 16%;
    margin-left: 220px;
    margin-top: 14%;
    width: 680px;
    .title {
      font-size: 48px;
      font-family: Inter;
      font-weight: 600;
      margin-bottom: 70px;
      color: #fff;
    }
    .paragraph {
      margin-bottom: 20px;
      font-weight: 400;
      color: #7e7e7e;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
    }
    .read_btn {
      margin-top: 36px;
      height: 60px;
      width: 220px;
      text-align: center;
      line-height: 60px;
      color: #16e9d6;
      border-radius: 40px;
      border: #16e9d6 solid 3px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: #fff;
        background-color: #16e9d6;
      }
    }
  }
  .titleBox1 {
    // position: absolute;
    // top: 20%;
    // left: 16%;
    margin-left: 220px;
    margin-top: 12%;
    width: 680px;
    .title {
      font-size: 44px;
      font-family: Inter;
      font-weight: 600;
      margin-bottom: 40px;
      color: #fff;
    }
    .paragraph {
      margin-bottom: 20px;
      font-weight: 400;
      color: #7e7e7e;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 20px;
    }
    .read_btn {
      margin-top: 36px;
      height: 60px;
      width: 220px;
      text-align: center;
      line-height: 60px;
      color: #16e9d6;
      border-radius: 40px;
      border: #16e9d6 solid 3px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.module_5_1 {
  height: 1080px;
  background-color: #010101;
  position: relative;
  overflow: hidden;
  background-image: url("../../assets/img/module_5_bg_cut.png");
  background-repeat: no-repeat;
  background-size: 92% 100%;
  background-position: 166% 20%;

  .titleBox {
    // position: absolute;
    // top: 26%;
    // left: 16%;
    margin-left: 220px;
    margin-top: 14%;
    width: 680px;
    .title {
      font-size: 48px;
      font-family: Inter;
      font-weight: 600;
      margin-bottom: 70px;
      color: #fff;
    }
    .paragraph {
      margin-bottom: 20px;
      font-weight: 400;
      color: #7e7e7e;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
    }
    .read_btn {
      margin-top: 36px;
      height: 60px;
      width: 220px;
      text-align: center;
      line-height: 60px;
      color: #16e9d6;
      border-radius: 40px;
      border: #16e9d6 solid 3px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: #fff;
        background-color: #16e9d6;
      }
    }
  }
  .titleBox1 {
    // position: absolute;
    // top: 20%;
    // left: 16%;
    margin-left: 220px;
    margin-top: 12%;
    width: 680px;
    .title {
      font-size: 44px;
      font-family: Inter;
      font-weight: 600;
      margin-bottom: 40px;
      color: #fff;
    }
    .paragraph {
      margin-bottom: 20px;
      font-weight: 400;
      color: #7e7e7e;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 20px;
    }
    .read_btn {
      margin-top: 36px;
      height: 60px;
      width: 220px;
      text-align: center;
      line-height: 60px;
      color: #16e9d6;
      border-radius: 40px;
      border: #16e9d6 solid 3px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: #fff;
        background-color: #16e9d6;
      }
    }
  }
}
.module_6 {
  height: 1080px;
  background-color: #fff;
  .title {
    text-align: center;
    font-size: 24px;
    color: #000;
    margin-top: 150px;
  }
  .imgBox {
    width: 1280px;
    height: 640px;
    margin: 130px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    .itemBox {
      width: 25%;
      height: 320px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      p {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 14px;
        margin: auto;
        color: #fff;
        width: 90%;
        font-size: 14px;
        font-family: Microsoft YaHei;
        line-height: 24px;
        font-weight: 400;
        text-align: center;
      }
    }
  }
}
.module_7 {
  height: 1000px;
  background-color: #f0f4f7;
  position: relative;
  background-image: url("../../assets/img/module_7_bg.png");
  background-repeat: no-repeat;
  background-size: 775px 1000px;
  background-position: 10% 10%;
  .fillBox {
    position: absolute;
    top: 90px;
    left: 60%;
    .title {
      font-size: 24px;
      margin-bottom: 30px;
    }
    .hintBox {
      overflow: hidden;
      margin-top: 46px;
      .triangle {
        width: 0;
        height: 0;
        border: 14px solid transparent;
        border-right-color: #fff;
        float: left;
        margin-top: 20px;
        transition: all 0.3s;
      }
      .news1 {
        padding: 0 40px;
        height: 68px;
        background: #ffffff;
        // box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
        border-radius: 12px;
        font-size: 18px;
        font-family: Inter;
        font-weight: 400;
        color: #232324;
        line-height: 62px;
        float: left;
        transition: all 0.3s;
        cursor: pointer;
      }
    }
    .hintBox_1 {
      overflow: hidden;
      margin-top: 46px;
      margin-left: 68px;
      .triangle {
        width: 0;
        height: 0;
        border: 14px solid transparent;
        border-right-color: #fff;
        float: left;
        margin-top: 20px;
      }
      .news1 {
        padding: 0 40px;
        height: 68px;
        background: #ffffff;
        // box-shadow: -1px 2px 4px 0px rgba(1, 3, 5, 0.1);
        border-radius: 12px;
        font-size: 18px;
        font-family: Inter;
        font-weight: 400;
        color: #232324;
        line-height: 62px;
        float: left;
        cursor: pointer;
      }
    }

    .bnt_look {
      margin-top: 110px;
      margin-left: 110px;
      width: 241px;
      height: 66px;
      border: 2px solid #000000;
      border-radius: 33px;
      font-size: 16px;
      font-family: Inter;
      font-weight: 600;
      color: #000000;
      line-height: 62px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: #16e9d6;
        border: #16e9d6 solid 2px;
      }
    }
  }
}
.module_8 {
  height: 1080px;
  background: #ffffff;
  .title {
    font-size: 30px;
    font-family: Inter;
    font-weight: 600;
    color: #191919;
    // line-height: 62px;
    margin-top: 80px;
    text-align: center;
    // margin-bottom: 40px;
  }
  .title_1 {
    text-align: center;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #191919;
    line-height: 62px;
    height: 62px;
  }
  .xian {
    width: 66px;
    height: 3px;
    background: #16e9d6;
    margin: 0 auto;
    margin-bottom: 60px;
  }
  .tiktok {
    font-size: 18px;
    font-family: Inter;
    font-weight: 600;
    color: #0f1114;
    line-height: 62px;
    text-align: center;
  }
  .tiktok_ctn {
    width: 559px;
    height: 44px;
    font-size: 14px;
    font-family: Inter;
    font-weight: 400;
    color: #797979;
    line-height: 30px;
    text-align: center;
    margin: 0 auto;
  }
}
.module_9 {
  background-color: #d7d8de;
  overflow: hidden;
  .weBox {
    margin-top: 130px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 180px;
    width: 1300px;
    height: 550px;
    cursor: pointer;
    transition: all 0.3s;
    .weText {
      width: 576px;
      height: 530px;
      background-color: #191919;
      float: left;
      .conBox {
        width: 500px;
        margin: 40px auto 100px auto;
        .title {
          font-size: 30px;
          font-family: Inter;
          font-weight: 400;
          color: #ffffff;
          line-height: 62px;
          text-align: right;
        }
        .title_h {
          height: 18px;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          text-align: right;
        }
        .ctn {
          // width: 434px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 24px;
          margin-top: 10px;
        }
        .ctn_c {
          // width: 434px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 22px;
          margin-top: 50px;
        }
        .ctn1 {
          width: 436px;
          height: 222px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 30px;
          margin-top: 40px;
          margin-left: auto;
          margin-right: auto;
        }
        .ctn_c1 {
          width: 436px;
          height: 222px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 30px;
          margin-top: 74px;
          margin-left: auto;
          margin-right: auto;
        }
      }
    }
    .weImg {
      width: 724px;
      height: 530px;
      float: left;
    }
    &:hover {
      transform: scale(1.1);
    }
  }
  .timeBox {
    // overflow: hidden;
    position: relative;
    margin-bottom: 90px;
  }
  .xian {
    width: 100%;
    height: 6px;
    background: #ffffff;
    opacity: 0.57;
    position: absolute;
    top: 97px;
    left: 0;
  }
  .timeF {
    width: 1300px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    .itemBox {
      width: 180px;
      height: 250px;
      border: 1px solid #ffffff;
      opacity: 0.8;
      border-radius: 24px;
      background: #ffffff;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
      .timeText {
        width: 200px;
        font-size: 16px;
        font-family: Inter;
        font-weight: 600;
        color: #313131;
        line-height: 30px;
        text-align: center;
        margin-top: 28px;
        // margin-bottom: 20px;
      }
      .ImgBox {
        width: 23px;
        height: 23px;
        margin: 30px auto 10px auto;
        // margin-bottom: 10px;
        .circle {
          width: 23px;
          height: 23px;
          background: url("../../assets/img/h.png");
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          background-position: center;
          transform: scale(0.9);
          transition: all 0.3s;
        }
        img {
          width: 23px;
          height: 23px;
        }
      }
      .ctn {
        width: 160px;
        // height: 20px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #313131;
        line-height: 24px;
        margin: 0 auto;
        text-align: center;
      }
      &:hover {
        opacity: 0.65;
        transform: scale(1.1);
        .circle {
          width: 23px;
          height: 23px;
          background: url("../../assets/img/a.png");
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          background-position: center;
          transform: scale(0.9);
        }
      }
    }
  }
  .cooperationBox {
    margin-bottom: 30px;
    .titleBox {
      display: flex;
      justify-content: center;
      .title {
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #0d0912;
        line-height: 62px;
      }
      .title_h {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #0d0912;
        line-height: 62px;
        margin-left: 10px;
      }
    }
  }
  .cooperation {
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 130px;
    .cooperationItem {
      width: 200px;
      height: 100px;
      // background-color: #f0f0f0;
      img {
        width: 100%;
        height: 100%;
        // margin: 20px 5%;
      }
    }
  }
}

.swiper-container {
  width: 100%;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  // display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}

.swiper-slide-img {
  width: 479px;
  height: 600px;
  cursor: pointer;
  opacity: 0.9;
  transition: all 0.3s;
  &:hover {
    opacity: 1;
    transform: scale(1.1);
  }
}

.topBox {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}
.logoBox {
  margin-top: 20px;
  margin-left: 35px;
  margin-bottom: 20px;
  float: left;
  overflow: hidden;
  cursor: pointer;
}
.logo {
  float: left;
  width: 60px;
  height: 30px;
}
.logoTitle {
  float: left;
  line-height: 30px;
  margin-left: 10px;
  font-size: 22px;
}
.categoryBox {
  float: left;
  display: flex;
  justify-content: space-between;
  height: 30px;
  margin-top: 20px;
  margin-left: 6%;
}
.categoryitem {
  line-height: 30px;
  color: #7d7d7d;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #16e9d6;
  color: #fff;
}
.categoryitem:hover {
  color: #16e9d6;
}
.cutBox {
  float: right;
  margin-top: 20px;
  margin-right: 50px;
  overflow: hidden;
  cursor: pointer;
}
.cutImg {
  width: 30px;
  height: 20px;
  float: left;
  margin-top: 6px;
  margin-right: 10px;
}
.en {
  float: left;
  font-size: 15px;
}
.el-select {
  width: 120px;
}
</style>
