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