<template>
  <div class="home">
    <!-- 主页第一个分块 -->
    <section class="home-1">
      <!-- 头部背景图 -->
      <section class="home-bg">
        <header>
          <img class="header-left" src="../images/Home/home_logo.png" alt />
          <div class="header-right">
            <span class="header-login cursor-pointer" @click="toLoginPanel()"
              >登录 / 注册</span
            >
            <span class="header-btn cursor-pointer" @click="toLoginPanel(true)"
              >免费试用</span
            >
          </div>
        </header>
        <div class="bg-layout">
          <div class="bg-content">
            <span class="bg-content-title">33复杂美</span>
            <span class="bg-content-text"
              >核心技术CHAIN33区块链底层开源，构建数字一体化生态体系</span
            >
            <div class="bg-search">
              <input
                v-model="hashText"
                class="bg-search-input"
                type="text"
                placeholder="请输入溯源码"
              />
              <span class="search-btn cursor-pointer" @click="searchHash"
                >点击搜索</span
              >
            </div>
          </div>
          <div class="bg-phone"></div>
        </div>
      </section>
      <!-- 优势 -->
      <section class="advantage">
        <div class="advantage-in">
          <span class="advantage-in-title">领先级技术研发</span>
          <br />
          <span class="advantage-in-text"
            >已累计申请近 200项区块链发明专利，与阿里、腾讯同列全球专利数排名前
            10。</span
          >
        </div>
        <div class="advantage-in">
          <span class="advantage-in-title">专业化团队运营</span>
          <br />
          <span class="advantage-in-text"
            >作为专业的区块链解决方案服务商，引入不同国家的技术专家、电商创业者等行业精英。</span
          >
        </div>
        <div class="advantage-in">
          <span class="advantage-in-title">500强合作伙伴</span>
          <br />
          <span class="advantage-in-text"
            >已为海航海平线、美的金融、电力巨头等多家世界 500
            强企业正式上线区块链项目。</span
          >
        </div>
      </section>
      <!-- 功能展示 -->
      <section class="features">
        <div class="features-left"></div>
        <div class="features-right">
          <span class="features-title">功能展示</span>
          <div class="features-content">
            <div
              v-for="(item, index) in featuresContent"
              :key="index"
              class="features-content-in"
            >
              <i class="features-content-in-icon iconfont">&#xe628;</i>
              <span class="features-content-in-text">{{ item.text }}</span>
            </div>
          </div>
        </div>
      </section>
    </section>
    <!-- 主页第二个模块 我们的优势 -->
    <section class="home-2">
      <img class="home-2-icon" src="../../../assets/images/Home/home-2-icon.png" alt />
      <span class="home-title">我们的优势</span>
      <div class="home-2-in">
        <div class="content">
          <div
            class="content-in"
            v-for="(item, index) in ourAdvantages"
            :key="index"
          >
            <!--<i class="content-in-icon iconfont" v-html="item.icon"></i>-->
            <img
              class="advantage-icon2"
              :class="'advantage-icon' + index"
              :src="item.src"
            />
            <span class="content-in-title">{{ item.title }}</span>
            <span class="content-in-text">{{ item.text }}</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 企业独立部署 -->
    <section class="home-3">
      <span class="home-title">企业独立部署</span>
      <div class="home-3-in">
        <div class="home-3-in-left">
          <div
            class="content cursor-pointer"
            :class="{ 'content-click': currentDeploy === index }"
            v-for="(item, index) in deploys"
            @click="currentDeploy = index"
            :key="index"
          >
            <span class="content-title">{{ item.title }}</span>
            <span class="content-text">{{ item.text }}</span>
          </div>
        </div>
        <img
          class="home-3-in-right"
          v-show="currentDeploy === 0"
          src="../../../assets/images/Home/home3_baner3.png"
          alt
        />
        <img
          class="home-3-in-right"
          v-show="currentDeploy === 1"
          src="../../../assets/images/Home/home3_baner1.png"
          alt
        />
        <img
          class="home-3-in-right"
          v-show="currentDeploy === 2"
          src="../../../assets/images/Home/home3_baner2.png"
          alt
        />
      </div>
    </section>
    <!-- 适用行业 -->
    <section class="home-4">
      <span class="home-title">适用行业</span>
      <div class="home-4-in">
        <i
          class="home-4-in-img cursor-pointer iconfont"
          :style="industryLeft.style"
          @click="nextIndustry(`right`)"
          v-html="industryLeft.icon"
        />
        <div class="content">
          <div
            :style="industryStyle.style"
            class="content-in"
            v-for="(item, index) in industrys"
            :key="index"
          >
            <i
              class="content-in-icon iconfont"
              :style="[{ background: item.color }]"
              v-html="item.icon"
            ></i>
            <span class="content-in-title">{{ item.title }}</span>
            <span class="content-in-text">{{ item.text }}</span>
          </div>
        </div>
        <i
          class="home-4-in-img cursor-pointer iconfont"
          :style="industryRight.style"
          @click="nextIndustry(`left`)"
          v-html="industryRight.icon"
        />
      </div>
    </section>
    <!-- 免费试用上链查 -->
    <section class="home-5">
      <span class="home-5-title">免费试用上链查</span>
      <span class="home-5-text"
        >不需要注册和审批只需手机登录就可以直接使用</span
      >
      <span class="home-5-btn cursor-pointer" @click="$router.push(`/login`)"
        >免费使用</span
      >
    </section>
    <!-- 底部 -->
    <footer class="footer">
      <div class="footer-in">
        <div class="footer-block footer-phone">
          <div class="footer-block-in">
            <div class="content-title">公司电话</div>
            <div class="content-title-line"></div>
            <div class="content-text">0571-81671360</div>
          </div>
        </div>
        <div class="footer-block footer-email">
          <div class="footer-block-in">
            <div class="content-title">联系邮箱</div>
            <div class="content-title-line"></div>
            <div class="content-text">support@33.cn</div>
          </div>
        </div>
        <div class="footer-block footer-addr">
          <div class="footer-block-in">
            <div class="content-title">联系地址</div>
            <div class="content-title-line"></div>
            <div class="content-text">杭州市西湖区东部软件园6号楼702</div>
          </div>
        </div>
        <div class="footer-block footer-qs">
          <div class="footer-block-in">
            <div class="content-title">商业合作</div>
            <div class="content-title-line"></div>
            <div class="content-text">
              <img
                class="footer-qs-img"
                src="../images/Home/qr.png"
                alt="二维码"
              />
              客服二维码
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-property-decorator";
let UrlPrefixObj = require("@/config/UrlPrefix");
export default class Home extends Vue {
  public featuresContent = [
    { text: `产品资料隐私性` },
    { text: `团队权限管理` },
    { text: `定期维护更新` },
    { text: `专业技术支持` },
    { text: `全程自定义` },
    { text: `全程协同合作` },
  ];
  public hashText = ``;
  // 我们的优势
  public ourAdvantages = [
    {
      src: require("../../../assets/images/Home/advantage1_szhfwcz.png"),
      icon: `&#xe61e;`,
      title: `数字化防伪存证`,
      text: `区块链共识算法、非对称加密、分布式存储等技术特性，存证安全加密，溯源真实。`,
    },
    {
      src: require("../../../assets/images/Home/advantage2_qzqsjjk.png"),
      icon: `&#xe632;`,
      title: `全周期数据监控`,
      text: `上链数据无法作弊、不可篡改，从源头控制数据，实现存证全生命周期监控。`,
    },
    {
      src: require("../../../assets/images/Home/advantage3_djdsycz.png"),
      icon: `&#xe61b;`,
      title: `多节点溯源见证`,
      text: `高质量溯源系统稳定可靠，存证关键控制点提供警告、预防、管控提示，数据可控。`,
    },
    {
      src: require("../../../assets/images/Home/advantage4_zdyslmb.png"),
      icon: `&#xe61c;`,
      title: `自定义上链模板`,
      text: `个性化模板自由定制，类目产品任意添加，数字化一体存证，操作更灵活。`,
    },
    {
      src: require("../../../assets/images/Home/advantage5_dcbgxlz.png"),
      icon: `&#xe617;`,
      title: `低成本高效流转`,
      text: `上链即生成专属二维码，有效提高协调效率，线上线下易流转，降低传播成本。`,
    },
    {
      src: require("../../../assets/images/Home/advantage6_ganfhtx.png"),
      icon: `&#xe61a;`,
      title: `高安全防护体系`,
      text: `多维度、多层防护确保系统技术安全，保障产品及服务的无系统性风险运作。`,
    },
  ];
  // 企业独立部署
  public deploys = [
    {
      title: `增量更新`,
      text: `信息上链后可持续录入，多次上链，上传更便捷。`,
    },
    {
      title: `用户管理`,
      text: `管理员统一设用户权限，专人专责，管理更规范。`,
    },
    {
      title: `权限交接`,
      text: `现有工作信息一键移交，尽在掌握，操作更简单。`,
    },
  ];

  public currentDeploy = 0; // 当前选中的企业部署

  public industryStyle = {
    style: {}, // transform移动
    width: 252, // 盒子的宽度
    margin: 100, // 盒子间距
    currentNum: 0, // 当前移动了多少
    currentIndex: 0, // 当前显示的最左边是哪个
    box: 3, // 一次显示几个盒子
  };
  // 使用行业
  public industrys = [
    {
      color: `#15CBBA`,
      icon: `&#xe62f;`,
      title: `商品上链`,
      text: `对商品实现从源头的信息采集记录，原料来源追溯、⽣产过程、加⼯环节、仓储信息、检验批次、物流周转、到第三⽅质检、海关出⼊境、防伪鉴证的全程可追溯。`,
    },
    {
      color: `#6587FD`,
      icon: `&#xe62e;`,
      title: `证书上链`,
      text: `各种教育资质证书均可上链，将个人学习、培训记录和证书存放在区块链数据库中，使得证书验证更加安全、有效，保证学习记录和证书的真实性并永久保存。`,
    },
    {
      color: `#FFA475`,
      icon: `&#xe645;`,
      title: `文章上链`,
      text: `上链后文章将永久被记录在区块链上，不可篡改且不可删除，区块链文章为原创文章作者应有的版权保驾护航，让维权更简单。`,
    },
    {
      color: `#FF7575`,
      icon: `&#xe631;`,
      title: `古董字画存证`,
      text: `上链后赋予每一件艺术品独一无二的身份信息，即便在交易流转过程中也可进行信息追加，让赝品、仿品无可乘之机，有效保障艺术品交易双方利益。`,
    },
  ];
  public mounted() {
    this.industryStyle.currentIndex = 1;
  }

  // 左边按钮是否可已点击
  get industryLeft() {
    const isFlag =
      this.industryStyle.currentIndex >=
      this.industrys.length - this.industryStyle.box + 1;
    return {
      icon: !isFlag ? `&#xe61f;` : `&#xe622;`,
      style: { color: !isFlag ? `#EFEFEF` : `#9DA0D6` },
      isFlag: isFlag,
    };
  }
  // 右边按钮是否可以点击
  get industryRight() {
    const isFlag = this.industryStyle.currentIndex <= 1;
    return {
      icon: !isFlag ? `&#xe621;` : `&#xe620;`,
      style: { color: !isFlag ? `#EFEFEF` : `#9DA0D6` },
      isFlag: isFlag,
    };
  }
  // 点击轮播切换
  public nextIndustry(type: string) {
    const industryStyle = this.industryStyle;
    if (type === `left`) {
      if (this.industryLeft.isFlag) return;
      industryStyle.currentNum =
        industryStyle.currentNum - (industryStyle.width + industryStyle.margin);
      industryStyle.currentIndex++;
    } else {
      if (this.industryRight.isFlag) return;
      industryStyle.currentNum =
        industryStyle.currentNum + (industryStyle.width + industryStyle.margin);
      industryStyle.currentIndex--;
    }
    industryStyle.style = {
      transform: `translateX(${industryStyle.currentNum}px)`,
    };
  }

  toLoginPanel(isRegister: boolean) {
    this.$router.push(`/signIn`);
  }

  public searchHash() {
    if (this.hashText.trim() === "") {
      window.open(UrlPrefixObj.model.CHAIN_BROWSER_URL_PREFIX);
    } else {
      window.open(
        UrlPrefixObj.model.CHAIN_BROWSER_URL_PREFIX +
          "product?hash=" +
          this.hashText
      );
    }
  }
}
</script>

<style lang="less" scoped>
.home-search-placeholder() {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(192, 192, 192, 1);
  line-height: 28px;
}
.home-title {
  display: block;
  width: 100%;
  text-align: center;
  height: 42px;
  font-size: 30px;
  font-family: PingFangSC-Light;
  font-weight: 300;
  color: rgba(53, 53, 53, 1);
  line-height: 42px;
}

.home {
  min-width: 1200px;
}

.home-1 {
  padding-bottom: 100px;
  background: linear-gradient(
    180deg,
    rgba(234, 245, 255, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  .home-bg {
    width: 100%;
    min-width: 1200px;
    min-height: 724px;
    height: 36.77vw;
    background-image: url("../../../assets/images/Home/banner.png");
    background-size: cover;
    header {
      width: 100%;
      height: 50px;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header-left {
        margin-left: 200px;
        width: 101px;
      }
      .header-right {
        display: flex;
        text-align: center;
        margin-right: 200px;
        line-height: 36px;
        padding: 10px 0;
        .header-login {
          color: white;
          margin-right: 40px;
        }
        .header-btn {
          text-align: center;
          width: 106px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 2px 10px 0px rgba(63, 121, 254, 0.52);
          border-radius: 36px;
          color: #7b4ee5;
        }
      }
    }
    .bg-content {
      width: 465px;
      height: 350px;
      position: absolute;
      top: 100px;
      left: 54%;
      transform: translate(-562.5px, 0);

      z-index: 1;
    }
    .bg-content-title {
      display: block;
      color: white;
      padding-top: 80px;
      font-size: 30px;
    }
    .bg-content-text {
      display: block;
      color: white;
      margin-top: 15px;
      font-size: 32px;
      opacity: 0.3;
    }
    .bg-search {
      width: 390px;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border-radius: 20px;
      margin: 55px 0 0 0;
      padding: 0 6px 0 20px;
      display: flex;
      align-items: center;
      .bg-search-input {
        width: 300px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        background: white;
        color: #797d84;
        border-width: 0;
        border-radius: 0;
        vertical-align: middle;
      }
      .bg-search-input::placeholder {
        color: #c0c0c0;
      }
      .bg-search-input:focus {
        border-width: 0;
        outline: none;
      }
      .search-btn {
        width: 102px;
        height: 32px;
        margin-left: 10px;
        background: rgba(21, 203, 186, 1);
        border-radius: 20px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 32px;
      }
    }
    .bg-phone {
      width: 1340px;
      height: 498px;
      background-image: url("../images/Home/banner-phone.png");
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      left: 45%;
      top: 94px;
      transform: translate(-680px, 0);
    }
  }
  .advantage {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .advantage-in {
      width: 350px;
      height: 350px;
      background-size: 100% 100%;
      text-align: center;
      .advantage-in-title {
        display: inline-block;
        margin-top: 160px;
        font-size: 20px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        line-height: 28px;
      }
      .advantage-in-text {
        display: block;
        width: 66%;
        margin: 10px auto;
        font-size: 14px;
        opacity: 0.6;
        font-family: PingFangSC-Regular;
        color: rgba(74, 74, 74, 1);
        line-height: 30px;
      }
      &:nth-child(1) {
        background-image: url("../../../assets/images/Home/advantage1.png");
      }
      &:nth-child(2) {
        background-image: url("../../../assets/images/Home/advantage2.png");
      }
      &:nth-child(3) {
        background-image: url("../../../assets/images/Home/advantage3.png");
      }

      transition: all 0.2s linear;
    }

    .advantage-in:hover {
      cursor: pointer;
      transform: scale(1.1);
      transition: all 0.2s linear;
    }
  }
  .features {
    width: 1200px;
    height: 240px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(
      90deg,
      rgba(69, 71, 111, 1) 0%,
      rgba(103, 106, 171, 1) 100%
    );
    border-radius: 20px;
    border: 1px solid rgba(151, 151, 151, 1);
    .features-left {
      width: 296px;
      height: 196px;
      margin-left: 100px;
      background: linear-gradient(
        312deg,
        rgba(144, 147, 236, 1) 0%,
        rgba(255, 255, 255, 1) 100%
      );
      background-image: url("../../../assets/images/Home/features.png");
      background-size: 100% 100%;
    }
    .features-right {
      width: 520px;
      height: 196px;
      margin-right: 100px;
      .features-title {
        font-size: 20px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 28px;
      }
      .features-content {
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        .features-content-in {
          width: 240px;
          height: 43px;
          margin: 5px;
          background: #4f4e82;
          line-height: 43px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          &:nth-child(2n-1) {
            margin-left: 0;
          }
          .features-content-in-icon {
            width: 34px;
            height: 28px;
            color: #14cbba;
            opacity: 1;
            font-size: 20px;
            margin-left: 20px;
            margin-bottom: 12px;
          }
          .features-content-in-text {
            width: 112px;
            height: 22px;
            font-size: 16px;
            margin-left: 10px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(162, 157, 202, 1);
            line-height: 22px;
          }
        }
      }
    }
  }
}
.home-2 {
  width: 100%;
  margin-top: -80px;
  .home-2-icon {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    transform: translateY(144px);
  }
  .home-2-in {
    margin-top: 10px;
    width: 100%;
    height: 684px;
    background-image: url("../../../assets/images/Home/home2.png");
    background-size: 100% 100%;
    .content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .content-in {
        margin-top: 150px;
        width: 28%;
        &:nth-child(n + 4) {
          margin-top: 50px;
        }
        .content-in-icon {
          display: block;
          color: #7a7de7;
          font-size: 50px;
        }
        .advantage-icon2 {
          max-width: 60px;
          max-height: 60px;
        }
        .advantage-icon1 {
          max-width: 55px;
          max-height: 55px;
        }
        .advantage-icon3 {
          max-width: 50px;
          max-height: 50px;
        }
        .advantage-icon5 {
          max-width: 55px;
          max-height: 55px;
        }

        .content-in-title {
          margin-top: 10px;
          display: block;
          height: 56px;
          font-size: 20px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 28px;
        }
        .content-in-text {
          display: block;
          width: 290px;
          height: 51px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(162, 157, 202, 1);
          line-height: 17px;
        }
      }
    }
  }
}
.cursor-pointer {
  cursor: pointer;
}
.home-3 {
  width: 100%;
  height: 640px;
  background-image: url("../../../assets/images/Home/home3.png");
  background-position: right center;
  background-repeat: no-repeat;
  .home-3-in {
    width: 1200px;
    margin: 75px auto;
    display: flex;
    justify-content: space-between;
    .home-3-in-left {
      .content {
        width: 404px;
        height: 95px;
        padding-top: 25px;
        padding-left: 30px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.19);
        &:nth-child(n + 2) {
          margin-top: 12px;
        }
        .content-title {
          display: block;
          width: 224px;
          height: 23px;
          font-size: 20px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(39, 34, 105, 1);
          line-height: 28px;
        }
        .content-text {
          display: block;
          margin-top: 15px;
          width: 281px;
          height: 41px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(125, 117, 176, 1);
          line-height: 20px;
        }
      }

      transition: all 0.2s linear;
    }
    .home-3-in-left > .content {
      opacity: 0.3;
    }
    .home-3-in-left > .content-click {
      opacity: 1;
      cursor: pointer;
      transform: scale(1.1);
      transition: all 0.2s linear;
    }

    .home-3-in-right {
      width: 680px;
      height: 380px;
      margin-left: 20px;
    }
  }
}
.home-4 {
  width: 100%;
  .home-4-in {
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .iconfont {
      font-size: 30px;
    }

    .home-4-in-img {
      display: block;
      width: 54px;
      height: 37px;
      text-align: center;
      line-height: 37px;
    }
    .content {
      width: 976px;
      height: 300px;
      display: flex;
      flex-wrap: nowrap;
      overflow: hidden;
      .content-in {
        flex-shrink: 0;
        width: 252px;
        height: 290px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 10px 20px 0px rgba(106, 92, 255, 0.16);
        border-radius: 6px;
        transition: transform 0.6s;
        .content-in-icon {
          display: block;
          margin: 40px auto 0 auto;
          width: 82px;
          height: 82px;
          color: white;
          line-height: 82px;
          text-align: center;
          border-radius: 50%;
          font-size: 40px;
        }
        .content-in-title {
          display: block;
          margin: 15px auto 0 auto;
          width: 100%;
          height: 22px;
          font-size: 16px;
          text-align: center;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(53, 53, 53, 1);
          line-height: 22px;
        }
        .content-in-text {
          display: block;
          margin: 15px auto 0 auto;
          width: 199px;
          height: 82px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(162, 157, 202, 1);
          line-height: 17px;
        }
        .content-in-move {
          display: block;
          margin: 0 auto;
          width: 29px;
          height: 17px;
          font-size: 13px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(21, 203, 186, 1);
          line-height: 17px;
        }
        &:nth-child(1) {
          margin-left: 10px;
        }
        &:nth-child(n + 2) {
          margin-left: 100px;
        }
      }
    }
  }
}
.home-5 {
  margin-top: 100px;
  width: 100%;
  height: 501px;
  background-image: url("../../../assets/images/Home/db.png");
  background-size: 100% 100%;
  .home-5-title {
    display: block;
    margin: 0 auto;
    padding-top: 100px;
    width: 238px;
    height: 48px;
    font-size: 34px;
    font-family: PingFangSC-Light;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    line-height: 48px;
  }
  .home-5-text {
    display: block;
    margin: 0 auto;
    padding-top: 20px;
    width: 336px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Light;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
  }
  .home-5-btn {
    display: block;
    margin: 40px auto 0 auto;
    width: 148px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-family: PingFangSC-Light;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    background: linear-gradient(
      90deg,
      rgba(24, 204, 187, 1) 0%,
      rgba(3, 208, 188, 1) 100%
    );
    text-align: center;
    border-radius: 25px;
  }
}

.footer {
  margin-top: -130px;
  width: 100%;
  height: 112px;
  background: rgba(59, 53, 98, 1);

  text-align: center;

  .footer-in {
    display: inline-block;
    width: 1200px;
    text-align: center;
  }
  .footer-block {
    color: white;
    width: 265px;
    height: 92px;
    line-height: 92px;
    text-align: left;
    display: inline-block;

    vertical-align: bottom;
  }
  .footer-block-in {
    display: inline-block;
    line-height: 16px;
    vertical-align: bottom;
  }
  .footer-block .content-title {
    display: inline-block;

    color: white;
    opacity: 0.5;
    font-size: 12px;
  }
  .footer-block .content-text {
    display: inline-block;

    position: relative;
    overflow: visible;

    font-size: 14px;

    &::before {
      position: absolute;
      top: 3px;
      left: -20px;

      display: inline-block;
      content: "";
      width: 10px;
      height: 10px;
      border: 1px solid #526069;
      border-radius: 50%;
    }
  }
  .footer-block .content-title-line {
    height: 1px;
    width: 20px;
    background-color: #c5cfe8;
    margin: 4px 0 18px 0;
  }
  .footer-addr {
    padding-right: 40px;
  }
  .footer-qs {
    width: 200px;
    .footer-qs-img {
      position: absolute;
      top: -60px;
      left: 104px;
      display: inline-block;
      width: 92px;
      height: 92px;
    }
  }
}
.bg-layout {
  overflow: hidden;
}
@media screen and (max-width: 1200px) {
  .home-1 .home-bg .bg-phone {
    width: 1000px;
    height: 372px;
    left: 50px;
    top: 94px;
    transform: translate(0, 0);
  }
}
@media screen and (min-width: 1200px) {
  .home-1 .home-bg .bg-phone {
    width: 80vw;
    height: 29.73vw;
    left: 10vw;
    top: 94px;
    transform: translate(0, 0);
  }
}
</style>

