<template>
  <div class="Box" id="top">
    <div class="module_1">
      <video ref="video" src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" />
      <div class="titleBox">
        <div class="title_item1" v-if="characters == 1">打造企业自主数字人IP 数字资产增值价值</div>
        <div class="title_item3" style="margin-top: 5px" v-if="characters == 1">实时创作 帮助您快速定义形象</div>
        <div class="title_item3" style="margin-top: 5px" v-if="characters == 1">自由生成 超真实，超写实，风格化多种风格</div>
        <div class="title_item3" style="margin-top: 5px" v-if="characters == 1">不同性别 多人种 分身化身随心创造</div>

        <div class="title_item1_y" v-if="characters != 1">Explore the possibilities of Virtual Human IP, Empower your business with digital assets</div>
        <div class="title_item3" v-if="characters != 1">Effortless Character Variety: Rapidly Create and Customize Ultra-Realistic, Stylized, or Tailored Characters with Our Automated System</div>
        <div class="title_item3" v-if="false">Automatic creation process, speed up character defined from months to hours</div>
        <div class="title_item3" v-if="false">Diversity character types, ultra-realistic, stylized or customized freely</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" id="module_2" :class="characters != 1 ? 'mb10' : ''">
      <div class="characters_l">
        <div class="titleBox">
          <div class="title">
            {{ characters == 1 ? '多模态驱动' : 'Multimodal AI manipulation' }}
          </div>
        </div>
        <div class="ctnBox">
          <div class="title_ctn1">
            {{
              characters == 1 ? '用户仅需输入文字或语音，即可实现智能全自动的内容生产（AIGC）' : 'Multimodal Input: Seamlessly Manipulate Virtual Humans through Text and Audio in Multiple Languages'
            }}
          </div>
          <div class="title_ctn1">
            {{ characters == 1 ? '呈现出色的真实感和流畅度，卓越的自然度，自动辨认支持多语言' : 'Unleash Realism with Metavatar AlGC: High-Resolution, Naturally Vivid Character Movements' }}
          </div>
          <div v-if="characters != 1" class="title_ctn1" style="margin-bottom: 50px">
            {{ 'Bring new intelligence experience for user far more exciting than ever in few minutes' }}
          </div>
        </div>
      </div>

      <div class="characters_2">
        <div class="titleBox">
          <div class="title">
            {{ characters == 1 ? '中之人驱动' : '“中の人”manipulation' }}
          </div>
        </div>

        <div class="ctnBox">
          <div class="title_ctn1">
            {{ characters == 1 ? '用户通过输入视频，即可快速替换各种背景下的视频，短片，影视剧人物' : 'Elevating Vtuber Manipulation with "中の人" Capability for Unmatched Expression' }}
          </div>
          <div class="title_ctn1">
            {{ characters == 1 ? '实现数字内容生产大幅节省成本提高生产效率，提供丰富的体验' : 'On-Demand Video Generation and Content Broadcasting for Complex Cases' }}
          </div>
          <div v-if="characters != 1" class="title_ctn1" style="margin-bottom: 20px">
            {{ 'Cost-Saving and Extendable User Experience for Digital Content Production' }}
          </div>
        </div>
      </div>
    </div>

    <div class="module_3" id="module_3">
      <div class="imgBox1" @click="goSetVedio(isPlayed)">
        <img v-if="isPlayed" class="play" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/play.png" title="click to play" />
        <img v-else class="play" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png" title="click to pause" />
        <video ref="videoII" src="https://video.metavatar.cc/sv/3564ae64-18841d254a8/3564ae64-18841d254a8.mp4" />
      </div>
      <!-- <div class="imgBox2">
        <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_3_2.png" alt />
      </div> -->
      <div class="imgBox2" @click="goSetVedio2(isPlayed2)">
        <img v-if="isPlayed2" class="play" style="left: 42%" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/play.png" title="click to play" />
        <img v-else class="play" style="left: 42%" src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/pause.png" title="click to pause" />
        <video ref="videoIII" src="https://video.metavatar.cc/sv/549c903-18843089e4c/549c903-18843089e4c.mp4" />
      </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="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="characters == 1 ? 'module_5_0' : 'module_5_1'" id="Technology">
      <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg3.png" alt="" />
      <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg_cut.png" alt="" /> -->
      <div :class="characters == 1 ? 'titleBox' : 'titleBox1'">
        <div class="title">
          {{ characters == 1 ? 'Metavatar 核心技术' : 'Metavatar Key Technologies' }}
        </div>
        <div class="paragraph">
          {{
            characters == 1
              ? 'Metavatar是邃芒科技自主研发的自动化数字人平台，基于GAN、Stable Diffusion、NeRF和多模态合成技术，结合NLP和知识图谱能力，实现了数字人全链路的智能全自动内容生产（AIGC）。Metavatar平台能够无需人工干预，自动创建形象、驱动数字人、生成视频，并实现智能交互的全流程。'
              : 'Metavatar is an automated digital human platform developed by a talented group of engineers and researchers. It leverages advanced technologies like GAN (Generative Adversarial Network), Stable Diffusion, NeRF (Neural Radiation Field), multimodal synthesis, NLP, and knowledge graph capabilities. This powerful AI-driven platform enables automatic generation of high-resolution virtual digital humans, known as "digital twins," with the ability to be easily manipulated and interacted with intelligently. '
          }}
        </div>

        <div class="paragraph">
          {{
            characters == 1
              ? 'Metavatar实时创造高分辨率的虚拟数字人形象和数字分身，并支持自由编辑和风格化。它不仅能通过语音、文字、视频等多种方式驱动数字人，生成实时的高质量视频内容，还通过先进技术手段降低前端算力需求，解决直播等实时场景的复杂问题。用户可以灵活利用Metavatar的功能，生成多样化的内容，满足其需求。'
              : 'Users can experience a seamless and fully automated process of character creation, manipulation, and intelligent interaction without any manual intervention. Metavatar offers flexible editing options, allowing users to freely modify symbolized characters and generate generative images, videos, and broadcasts.'
          }}
        </div>

        <div class="paragraph">
          {{
            characters == 1
              ? 'Metavatar赋予数字人智能交互的能力，通过语音、文字和用户的互动，使生成的形象具备智能化。它能够协助处理实际业务中的问题，并帮助完成各种场景任务。用户可以通过与数字人的互动，获得个性化的服务和解决方案，提高工作效率和用户体验。'
              : 'Not only does Metavatar provide real-time, high-quality video content generation through various input methods like voice, text, and video, but it also ensures compatibility and cost efficiency, particularly in complex scenarios such as live broadcasting. By reducing the computing power required at the front-end, Metavatar makes generative digital humans affordable and accessible.'
          }}
        </div>
        <div class="paragraph" v-if="characters != 1">
          {{
            'Moreover, Metavatar empowers digital humans with interactive abilities, enabling them to intelligently interact with users and assist in solving real-world business problems and completing tasks.'
          }}
        </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 ? '丰富的场景解决方案' : 'Metavatar solutions for variety use cases' }}
      </div>
      <div class="imgBox">
        <div class="itemBox" v-for="(item, index) in module_6_data" :key="index">
          <img :src="item.url" alt />
          <p class="title">{{ characters == 1 ? item.name : item.name_y }}</p>
          <p :class="characters == 1 ? 'des' : 'des_y'">
            {{ characters == 1 ? item.des : item.des_y }}
          </p>
        </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">
        <div class="weText">
          <div class="conBox">
            <div class="title_h" v-if="characters == 1">关于我们</div>
            <div class="title" v-if="characters != 1">About Us</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'" :style="characters == 1 ? 'margin-top: 30px' : ''">
              {{ 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
                  ? `通过3年迭代形成AIGC技术为基础的数字人全生产流程，拥有业界顶尖AI形象生成和驱动技术，积累了独有的亚洲超现实数字人数据资产，已成功商用于工业级影视、品牌商和直播。团队均来自科研机构及一流院所，拥有来自悉尼科技大学, 北邮，中科院，清华的博士硕士团队和行业内一流人才，硕博士占比 > 60%。并在人工智能顶级会议和期刊上发表文章十余篇，包括CVPR、ICCV、ECCV、 ACMMM、TIP、TNNLS等，人工智能顶级竞赛中斩获多项人脸、人体感知竞赛冠军，拥有自主的知识产权和专利两项。`
                  : 'Over the past three years, Metavatar has continuously evolved its production process for digital humans, leveraging cutting-edge AI technology. With our industry-leading AI image generation and driving technology, we have amassed a distinctive collection of Asian surreal digital human data assets. These assets have proven successful in industrial-grade film and television productions, brand ownership, and live broadcasting.Our team comprises highly skilled professionals from esteemed scientific research institutions and top-tier universities such as UTS, BUPT, CAS, Tsinghua University. Our talented team members possess advanced degrees, including PhDs and Masters, and are recognized as first-class talents within the industry.'
              }}
            </div>
            <!-- style="white-space: pre-wrap" 可用于解析""内的 \n -->
            <div :class="characters == 1 ? 'ctn_c1' : 'ctn_c'">
              {{
                characters == 1
                  ? `邃芒科技专注虚拟数字人，提供未来世界数字形象巨量需求的生产力与能力，依靠技术与商业双轮驱动为用户打开元宇宙大门。`
                  : 'Metavatar is poised to lead the digital human sector, catering to the future metaverse＇s massive requirements. Our vision is to become a key player, driving innovation and delivering customer value in this transformative landscape.'
              }}
            </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="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/me.png" alt class="weImg" />
      </div>

      <div class="timeBox">
        <div class="xian"></div>
        <!-- ---------------------------------------------- -->
        <!-- <div class="timeF">
          <div
            class="itemBox"
            @mouseenter="enterSwiper(index)"
            @mouseleave="leaveSwiper"
            :class="swiperIndex == index ? 'hoverBox' : ''"
            v-for="(item, index) in timeLsit"
            :key="index"
            @click="timeFlag = index">
            <div class="timeText">{{ item.title }}</div>
            <div class="ImgBox">
              <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 class="timeF">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide itemBox" v-for="(item, index) in timeLsit" :key="index">
                <div class="timeText">{{ item.title }}</div>
                <div class="ImgBox">
                  <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="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>

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

      <div class="cooperation" v-if="characters == 1">
        <div class="cooperationItem" v-for="(item, index) in partnerLsit" :key="index">
          <img :src="item.url" />
        </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="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 { Swiper, SwiperSlide } from 'swiper';
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      isPlayed: true,
      isPlayed2: true,
      // 轮播图效果
      swiperIndex: 0,
      timer: null,
      //零时存放
      charactersMy: 1,
      languageLsit: [
        {
          name: 'Cn',
          value: 1,
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/cn.jpeg'
        },
        {
          name: 'En',
          value: 2,
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/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: '请先输手机号',
            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,
      module_6_data: [
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/demo_4.png',
          name: '教育',
          name_y: 'Education',
          des: '创新和丰富的学习体验',
          des_y: 'Innovative & Enrichinng the learning experience'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/demo_3.png',
          name: '金融',
          name_y: 'Finance',
          des: '加强客户服务，通过新颖的互动方式与客户搭建沟通桥梁',
          des_y: 'Enhancing Customer Service and Engaging Client Relations with Interactive Solutions'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/demo_5.png',
          name: ' 电商',
          name_y: 'E-commerce',
          des: '7*24全天候数字员工线上销售和品牌推广',
          des_y: '24/7 Online Employee Sales and Brand Promotionn'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/demo_7.png',
          name: '零售与品牌',
          name_y: 'Retail',
          des: '数字广告代言人以前所未有的方式打造品牌',
          des_y: 'Reinventing Branding with Digital Ad Endorsers'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/demo_1.png',
          name: '技术服务',
          name_y: 'Avatar Tech Provider',
          des: '可以将创造的数字人形象、行为和全部交互轻松的部署到自己的应用服务中',
          des_y: 'Empowering Applications with Metavatar＇s Avatar Creation, Manipulation, and Interactive Capabilities'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/demo_2.png',
          name: '娱乐',
          name_y: 'Entertainment',
          des: '让您在元宇宙中拥有时尚靓丽的数字孪生',
          des_y: 'Elevating the Excitement with Digital Twins, Stylish Visuals, and Stunning Avatars in the Metaverse'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/demo_6.png',
          name: '影视特效 ',
          name_y: 'Special Effects',
          des: '通过Ai技术在电影特效中使用虚拟角色，极大的提高了效率，加强视觉效果',
          des_y: 'Revolutionizing Movie Special Effects with AI-Powered Avatars for Enhanced Production'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/demo_8.png',
          name: '公共服务与信息域国防支撑',
          name_y: 'Public Sector',
          des: '当人们需要帮助和助手时，数字公共服务人员24*7随时为您的繁重工作待命',
          des_y: '24/7 Virtual Public Service Employees for Efficient Assistance and Support'
        }
      ],
      carouselLsit: [
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel1.png'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel2.png'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png'
        }
      ],
      partnerLsit: [
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/partner1.png',
          path: ''
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/partner2.png',
          path: ''
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/partner3.png',
          path: ''
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/partner4.png',
          path: ''
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/partner5.png',
          path: ''
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/partner6.png',
          path: ''
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/partner7.png',
          path: ''
        }
      ],
      timeLsit: [
        {
          title: '2018年10月',
          ctn1_y: 'Team built up in Oct. 2018',
          // ctn2_y: "Team built up in Oct. 2018",
          ctn1: '团队组建'
          // ctn2: "团队组建"
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/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: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
          title: '2021年8月',
          ctn1_y: 'Metavatar built up in Aug, 2021',
          // ctn2_y: "Metavatar built up in Aug, 2021",
          ctn1: '邃芒科技成立'
          // ctn2: "邃芒科技成立",
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
          title: '2022年1月',
          ctn1_y: 'Angel fund in Jan, 2022',
          // ctn2_y: "Angel fund in Jan, 2022",
          ctn1: '获得天使轮融资'
          // ctn2: "获得天使轮融资",
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
          title: '2022年5月',
          ctn1_y: 'Beta of MetaGene published in May,2021',
          // ctn2_y: "Beta of MetaGene published in May,2021",
          ctn1: '内部产品',
          ctn2: 'MetaGene V1完成'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
          title: '2022年6月',
          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的内容生产项目'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
          title: '2022年11月',
          ctn1_y: 'MetaGene published, Metavatar runs from research to products stage in December 2022.',
          ctn1: '邃芒“慧”系列产品首款“慧生”研发完成，',
          ctn2: '标志邃芒从技术交付开始迈向产品阶段。'
        },
        {
          url: 'https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/carousel3.png',
          title: '2023年3月',
          ctn1_y: 'Built up Stable Diffusion pipline, Generative AI & text prompting, all metavatar digital human are much more intelligent.Beta of MetaNuver pulished in Feb 2023',
          ctn1: '邃芒开始全面拥抱stable diffusion，连接大模型，',
          ctn2: '所有数字人拥有智慧大脑。“慧影“beta研发完成。'
        }
      ]
    };
  },
  methods: {
    ...mapActions(['setCharacters']),
    // 鼠标进入轮播图
    enterSwiper(index) {
      this.stopTimer();
      this.swiperIndex = index;
    },
    // 鼠标离开轮播图
    leaveSwiper() {
      this.startTimer();
    },
    // 轮播图自增
    startTimer() {
      let that = this;
      that.timer = setInterval(() => {
        that.swiperIndex++; // index 自增 1
        if (that.swiperIndex >= that.timeLsit.length) {
          that.swiperIndex = 0;
        }
      }, 1000); // 每 3 秒执行一次
    },
    // 清除定时器
    stopTimer() {
      clearInterval(this.timer); // 清除计时器
    },
    change(value) {
      console.log(value);
      this.setCharacters(value);
    },

    goSetVedio(flag) {
      if (flag) {
        this.$refs['videoII'].play();
      } else {
        this.$refs['videoII'].pause();
      }
      this.isPlayed = !flag;
    },
    goSetVedio2(flag) {
      if (flag) {
        this.$refs['videoIII'].play();
      } else {
        this.$refs['videoIII'].pause();
      }
      this.isPlayed2 = !flag;
    },
    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: '/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);
            });
        }
      });
    },
    getLanguage() {
      const Browser_Agent = navigator.userAgent;
      // 浏览器为IE的情况
      if (Browser_Agent.indexOf(' MSIE ') != -1) {
        const a = navigator.browserLanguage;
        if (a != 'zh-cn') {
          // 英文网站
          console.log('英文网站');
          this.setCharacters(2);
        }
      }
      // 浏览器非IE的情况
      else {
        const b = navigator.language;
        if (b != 'zh-CN') {
          // 英文网站
          console.log('英文网站');
          this.setCharacters(2);
        }
      }
      // 获取当前网络ip地址
      this.$axios.get('https://ipv4.icanhazip.com/').then(async res => {
        let ip = res.data;
        // 获取当前ip地址首字段
        console.log('ip地址为', ip);
      });
    }
  },
  computed: {
    ...mapState({
      characters: state => state.publicObj.characters,
      view: state => state.publicObj.view
    })
  },

  mounted() {
    // 在组件挂载后开始计时器
    this.startTimer();
    // console.log();
    new Swiper('.swiper-container', {
      // slidesPerView: 6,
      // spaceBetween: 30,
      // centeredSlides: true,
      // loop: true,
      // autoplay: true,
      // loopFillGroupWithBlank: true,
      // slidesPerGroup: 1,
      // loopedSlides: 5,

      slidesPerView: 6,
      spaceBetween: 30,
      loop: false,
      autoplay: { disableOnInteraction: false }, // 解决点击按钮自动轮播失效问题

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

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

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar'
      }
    });
  },
  created() {
    this.getLanguage();
    const goView = this.$route.query.goView;
    if (goView) {
      console.log(true);
      this.$nextTick(() => {
        this.goView(goView);
      });
    }
  },
  beforeDestroy() {
    // 在组件销毁前清除计时器
    this.stopTimer();
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  // width: 300px;
  margin-bottom: 20px;
}
.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("https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  margin-top: 80px;

  background-color: #202020;
  .titleBox {
    width: 45%;
    position: absolute;
    top: 390px;
    left: 190px;
    overflow: hidden;
    color: #fff;
    .title_item1 {
      margin-bottom: 30px;
      font-size: 42px;
    }
    .title_item1_y {
      margin-bottom: 30px;
      font-size: 42px;
    }

    .title_item2 {
      margin-bottom: 20px;
      font-size: 42px;
    }
    .title_item3 {
      font-size: 18px;
      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: 18px;
        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: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #7e7e7e;
        margin-bottom: 8px;
      }
    }
  }
}
.mb10 {
  padding-bottom: 20px;
  // margin-top: 40px;
}
.module_3 {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  background-color: #202020;
  .imgBox1,
  .imgBox2 {
    background-color: #fff;
    position: relative;
    float: left;
    width: 49%;
    height: 570px;
    cursor: pointer;
    .play {
      position: absolute;
      top: 42%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      z-index: 99;
      transition: all 0.3s;
      transform: scale(10);
      opacity: 0;
    }
    // background-color: #16e9d6;
    video {
      width: 100%;
      height: 100%;
    }
    &:hover {
      .play {
        transform: scale(1);
        opacity: 1;
      }
    }
  }
  .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: 180px;
    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: 180px;
    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 {
  position: relative;
  transition: all 0.3s;
  img {
    position: absolute;
    top: 0;
    left: 40%;
    z-index: 1;
    max-width: 100%;
    height: 100%;
    transition: all 0.3s;
  }
  // height: 880px;
  height: 760px;
  background-color: #010101;
  position: relative;
  overflow: hidden;
  // background-image: url("https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg1.png");
  // background-image: url('https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg_cut.png');
  background-repeat: no-repeat;
  background-size: 92% 100%;
  background-position: 166% 20%;

  .titleBox {
    position: absolute;
    z-index: 2;
    // position: absolute;
    // top: 26%;
    // left: 16%;
    margin-left: 220px;
    margin-top: 5%;
    width: 680px;
    .title {
      font-size: 48px;
      font-family: Inter;
      font-weight: 600;
      margin-bottom: 20px;
      color: #fff;
    }
    .paragraph {
      text-indent: 2em;
      margin-bottom: 20px;
      font-weight: 400;
      color: #7e7e7e;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
    }
    .read_btn {
      margin-top: 76px;
      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 {
  position: relative;
  transition: all 0.3s;
  img {
    position: absolute;
    top: 0;
    left: 47%;
    z-index: 1;
    max-width: 100%;
    height: 100%;
    transition: all 0.3s;
  }
  // height: 880px;
  height: 810px;
  background-color: #010101;
  position: relative;
  overflow: hidden;
  // background-image: url("https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg1.png");
  // background-image: url('https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg_cut.png');
  background-repeat: no-repeat;
  background-size: 92% 100%;
  background-position: 166% 20%;

  .titleBox1 {
    position: absolute;
    z-index: 2;
    // position: absolute;
    // top: 26%;
    // left: 16%;
    margin-left: 220px;
    margin-top: 5%;
    width: 980px;
    .title {
      font-size: 48px;
      font-family: Inter;
      font-weight: 600;
      margin-bottom: 20px;
      color: #fff;
    }
    .paragraph {
      margin-bottom: 20px;
      font-weight: 400;
      color: #7e7e7e;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 30px;
    }
    .read_btn {
      margin-top: 46px;
      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_5_1 {
//   position: relative;
//   img {
//     position: absolute;
//     top: 0;
//     left: 20%;
//     z-index: 1;
//     max-width: 100%;
//     height: 100%;
//   }
//   // height: 880px;
//   height: 880px;
//   background-color: #010101;
//   position: relative;
//   overflow: hidden;
//   // background-image: url("https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg1.png");
//   // background-image: url('https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/module_5_bg_cut.png');
//   background-repeat: no-repeat;
//   background-size: 92% 100%;
//   background-position: 166% 20%;

//   .titleBox1 {
//     position: absolute;
//     z-index: 2;
//     // 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 {
  margin-top: -100px;
  height: 800px;
  // height: 1080px;
  background-color: #fff;
  .title {
    text-align: center;
    font-size: 34px;
    color: #000;
    margin-top: 150px;
  }
  .imgBox {
    width: 1280px;
    height: 640px;
    margin: 50px auto 0 auto;
    display: flex;
    flex-wrap: wrap;

    .itemBox {
      width: 25%;
      height: 320px;
      position: relative;
      opacity: 0.8;
      overflow: hidden;
      transform: scale(0.9);
      transition: all 0.3s;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
      .title {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 14px;
        margin: auto;
        color: #fff;
        width: 90%;
        font-size: 20px;
        font-family: Microsoft YaHei;
        line-height: 24px;
        font-weight: 400;
        text-align: center;
        transition: all 0.3s;
      }
      .des {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition: all 0.3s;
        padding: 15px;
        font-size: 18px;
      }
      .des_y {
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 22px;
        width: 240px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        opacity: 0;
        transform: translate(-50%, -50%);
        transition: all 0.3s;
        padding: 18px;
        font-size: 18px;
      }
      &:hover {
        border-radius: 10px;
        transform: scale(1.05);
        opacity: 1;
        .title {
          opacity: 0;
        }
        .des {
          // font-size: 18px;
          opacity: 1;
        }
        .des_y {
          // font-size: 18px;
          opacity: 1;
        }
      }
    }
  }
}
.module_7 {
  height: 900px;
  background-color: #f0f4f7;
  position: relative;
  background-image: url('https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/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: 70px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;
    width: 1300px;
    height: 550px;
    cursor: pointer;
    transition: all 0.3s;
    .weText {
      width: 576px;
      height: 530px;
      background-color: #191919;
      float: left;
      // padding: 20px;
      .conBox {
        text-indent: 2em;
        width: 520px;
        padding: 20px 20px 0;
        // margin: 20px 20px 100px 20px;
        .title {
          text-indent: 0em;

          text-indent: 0em;
          font-size: 30px;
          font-family: Inter;
          font-weight: 400;
          color: #ffffff;
          margin-bottom: -10px;
          // line-height: 62px;
          // text-align: right;
        }
        .title_h {
          text-indent: 0em;
          font-size: 30px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          // text-align: right;
          margin-bottom: 20px;
        }
        .ctn {
          // width: 434px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 24px;
          margin-top: 10px;
        }
        .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_c {
          width: 100%;
          text-indent: 0;
          // width: 434px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 22px;
          margin-top: 20px;
        }

        .ctn_c1 {
          // width: 436px;
          // height: 222px;
          width: 100%;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #7e7e7e;
          line-height: 30px;
          margin-top: 20px;
          // margin-left: auto;
          // margin-right: auto;
        }
      }
    }
    .weImg {
      width: 724px;
      height: 530px;
      float: left;
    }
    &:hover {
      transform: scale(1.03);
    }
  }
  .timeBox {
    // overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    &:hover .swiper-button-prev {
      opacity: 1;
      border-radius: 50%;
      background-color: #ccc;
    }
    &:hover .swiper-button-next {
      opacity: 1;
      border-radius: 50%;
      background-color: #ccc;
    }
  }
  .xian {
    width: 100%;
    height: 6px;
    background: #ffffff;
    opacity: 0.57;
    position: absolute;
    top: 97px;
    left: 0;
  }
  .timeF {
    position: relative;

    ::v-deep .swiper-container {
      margin-top: -20px;
      width: 100%;
      height: 350px !important;
      padding-top: 20px !important;
    }
    ::v-deep .swiper-slide {
      width: 189px !important;
      height: 320px !important;
    }
    ::v-deep .swiper-button-next {
      position: absolute;
      top: 140px;
      right: -80px;
      width: 70px;
      height: 70px;
      opacity: 0;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
      transition: all 0.3s;
    }
    ::v-deep .swiper-button-prev {
      position: absolute;
      top: 140px;
      left: -80px;
      width: 70px;
      height: 70px;
      opacity: 0;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
      transition: all 0.3s;
      // &:hover {
      //   opacity: 1;
      //   border-radius: 50%;
      //   background-color: #ccc;
      // }
    }
    // ::v-deep .swiper-button-disabled {
    //   opacity: 0.5;
    // }
    width: 1300px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    .itemBox {
      display: block;
      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('https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/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('https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/a.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          background-position: center;
          transform: scale(0.9);
        }
      }
    }
    .hoverBox {
      opacity: 0.65 !important;
      transform: scale(1.1) !important;
      .circle {
        width: 23px !important;
        height: 23px !important;
        background: url('https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/a.png') !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-position: center !important;
        transform: scale(0.9) !important;
      }
    }
  }
  .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: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;
    background-color: #ffffff;
    border-radius: 30px;
    overflow: hidden;

    .cooperationItem {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: center;

      vertical-align: bottom;
      width: 180px;
      height: 100px;
      padding: 0 20px;
      // background-color: #f0f0f0;
      img {
        // margin: 20px 5%;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}

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