<template>
  <div id="root">
    <div class="banner_top">
      <div class="content_container width_limit">
        <h1 class="title">移动端国际化翻译同步解决方案-V2</h1>
        <p class="title_desc">
          - 极具体验感的多平台翻译同步
          <br />
          &nbsp&nbsp- 开发专注上传和同步翻译内容
          <br />
          &nbsp&nbsp&nbsp&nbsp- 产品专注对内容进行准确翻译
        </p>
        <ul class="pannel">
          <li>支持Android</li>
          <li>支持iOS</li>
          <li>支持Vue-i18n</li>
          <li>支持PHP-laravel</li>
          <li>支持Flutter-i18n</li>
          <li>无侵入式对接</li>
          <li>支持多语言</li>
          <li>在线翻译服务</li>
        </ul>
        <div class="btn_container">
          <a target="_blank" href="https://juejin.cn/post/7321930742401105957">使用文档 NEW</a>
          <a href="#/translate/projects">控制台管理</a>
        </div>
      </div>
    </div>
    <div class="main width_limit">
      <p class="floor-title" data-v-de41adfa="">试用一下</p>
      <div class="hexin">
        <div class="hexin_item">
          <div>
            <div class="btn_container" style="justify-content: center;padding-bottom: 40px;">
              <a style="height: 40px; line-height: 40px;" :href="windowsUrl">下载桌面应用Windows版本({{ windowsVersion }})</a>
              <a style="height: 40px; line-height: 40px;" :href="macIntelUrl">下载桌面应用Mac-Intel版本({{ macIntelVersion }})</a>
              <a style="height: 40px; line-height: 40px;" :href="macArmUrl">下载桌面应用Mac-M1/M2/M3版本({{ macArmVersion }})</a>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="main width_limit">
      <p class="floor-title" data-v-de41adfa="">国际化翻译同步解决方案</p>
      <div class="fangan">
        <div class="fangan_left">
          <el-image style="border: 2px solid #64b5f6; border-radius: 4px"
            src="https://jokes-avatar.cretinzp.com/static/software/translate/pics/jiagoutu.jpg"></el-image>
        </div>
        <div class="fangan_right">
          <p class="fangan_title">方案流程</p>
          <p class="fangan_desc">1、注册账号，在控制台获取token</p>
          <p class="fangan_desc">
            2、创建项目，可为不同类型的项目创建不同项目
          </p>
          <p class="fangan_desc">3、开发下载桌面端同步应用，并配置相关参数</p>
          <p class="fangan_desc">
            4、开发上传翻译到云平台，通知产品进行翻译
          </p>
          <p class="fangan_desc">
            5、产品在管理后台进行翻译，翻译完成通知开发同步
          </p>
          <p class="fangan_desc">6、开发同步翻译内容到本地</p>
          <p class="fangan_title" style="margin-top: 15px">解决痛点</p>
          <p class="fangan_desc">
            1、传统方式需要自己整理本地翻译内容到Excel，流程复杂
          </p>
          <p class="fangan_desc">
            2、传统方式需要将翻译好的文档复制到本地项目，易出错
          </p>
          <p class="fangan_desc">3、开发需要频繁找产品确认翻译内容，效率低</p>
          <p class="fangan_desc">4、传统方式翻译步骤没有流程化，不可控</p>
        </div>
      </div>
    </div>
    <div class="main" style="position: relative; margin-top: 100px">
      <div class="resolve_bg"></div>
      <p class="floor-title" data-v-de41adfa="">方案优势</p>
      <div class="resolve width_limit">
        <div class="resolve_left">
          <div class="resolve_item">
            <h1 class="resolve_title">免费平台使用</h1>
            <p class="resolve_desc">
              仅需注册即可拥有独立的项目空间，无限制使用平台功能实现全平台翻译同步
            </p>
          </div>
          <div class="resolve_item">
            <h1 class="resolve_title">无项目侵入</h1>
            <p class="resolve_desc">
              对接无需对原有原生项目进行侵入，傻瓜式使用最大化减少接入成本
            </p>
          </div>
          <div class="resolve_item">
            <h1 class="resolve_title">多平台适用</h1>
            <p class="resolve_desc">
              支持Windows和Mac等常用开发环境的安装和接入，对接无压力
            </p>
          </div>
        </div>
        <div class="resolve_right">
          <div class="resolve_item">
            <h1 class="resolve_title">贴心的服务</h1>
            <p class="resolve_desc">
              平台处于试运行期间，针对客户使用过程中的问题和意见，积极响应，助力平台进步
            </p>
          </div>
          <div class="resolve_item">
            <h1 class="resolve_title">全平台多类型支持</h1>
            <p class="resolve_desc">
              平台能力可支持Android&iOS&Flutter&Vue&Php等多项目类型支持，可导入导出翻译内容
            </p>
          </div>
          <div class="resolve_item">
            <h1 class="resolve_title">功能齐全使用方便</h1>
            <p class="resolve_desc">
              开发仅需关注新增中文文案并完成翻译同步，产品仅需管理远端翻译内容，剩下的交给平台
            </p>
          </div>
        </div>
      </div>
    </div>

    <footer class="roll_footer">
      <div class="roll_footer_link">
        <a href="https://www.mxnzp.com" target="_blank">MXNZP.COM</a>|
        <a href="#/translate/projects" target="_blank">前往控制台</a>|
        <a href="https://www.mxnzp.com/about" target="_blank">关于我们</a>
      </div>
      <p>
        QQ:792075058&nbsp;&nbsp;&nbsp;&nbsp;邮箱:
        mxnzp_life@163.com&nbsp;&nbsp;&nbsp;&nbsp;Copyright © 2017-2024 All
        Rights Reserved.
      </p>
      <p>
        电点工作室/mxnzp.com&nbsp;&nbsp;&nbsp;&nbsp;<a target="_blank"
          style="color: rgba(255, 255, 255, 0.7); text-decoration: underline"
          href="https://beian.miit.gov.cn/">鄂ICP备17026449号-2</a>
      </p>
    </footer>
  </div>
</template>
<script>
import { appInfo } from "../../api/log/translate_v2";
export default {
  data() {
    return {
      windowsUrl: "",
      windowsVersion: "",
      macIntelUrl: "",
      macIntelVersion: "",
      macArmUrl: "",
      macArmVersion: ""
    };
  },
  mounted: function () {
    appInfo().then(res => {
      res.data.data.forEach(item => {
        if (item.type === "2") {
          this.macIntelUrl = item.url
          this.macIntelVersion = item.version
        } else if (item.type === "3") {
          this.macArmUrl = item.url
          this.macArmVersion = item.version
        } else if (item.type === "4") {
          this.windowsUrl = item.url
          this.windowsVersion = item.version
        }
      })
    }).catch(e => {

    })
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.banner_top {
  height: 720px;
  background: url("./../../../public/icons/home_bg.jpeg") no-repeat 50% / cover;
  position: relative;
}

.resolve_bg {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -100;
  right: 0;
  background: linear-gradient(8.97deg, #f8fcff 6.63%, #f9fcff 79.16%);
}

.content_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.width_limit {
  width: 1380px;
  margin: 0 auto;
}

.title {
  padding: 0;
  margin: 0;
  font-size: 48px;
  color: white;
  line-height: 63px;
  font-weight: 600;
}

.title_desc {
  font-size: 24px;
  line-height: 32px;
  color: #b6b5b7;
  padding: 18px 0;
  margin: 0;
}

.pannel {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 44px;
  width: 600px;
}

.pannel li {
  padding: 7px 12px;
  border: 1px solid #868588;
  border-radius: 4px;
  display: flex;
  margin-right: 10px;
  align-items: center;
  margin-bottom: 10px;
  justify-content: center;
  color: #b6b5b7;
}

.btn_container {
  display: flex;
  justify-content: flex-start;
}

.btn_container a {
  border-radius: 4px;
  font-size: 16px;
  line-height: 16px;
  padding: 10px 48px;
  color: inherit;
  white-space: nowrap;
  color: #3773f5;
  display: inline-block;
  border: 1px solid #3773f5;
  margin-right: 20px;
  text-align: center;
  color: #fff;
  background-color: #3773f5;
}

.floor-title {
  font-size: 40px;
  line-height: 53px;
  padding-top: 80px;
  padding-bottom: 40px;
  color: #000;
  text-align: center;
  font-weight: 600;
}

.resolve_title {
  font-weight: 700;
  font-size: 32px;
}

.resolve_desc {
  font-size: 20px;
  color: #333;
  line-height: 30px;
}

.resolve_item {
  margin-bottom: 70px;
}

.resolve {
  display: flex;
}

.resolve .resolve_left,
.resolve .resolve_right {
  flex: 1;
}

.resolve .resolve_left {
  padding-right: 200px;
}

.resolve .resolve_right {
  padding-left: 200px;
}

.fangan {
  display: flex;
}

.fangan .fangan_left,
.fangan .fangan_right {
  flex: 1;
}

.fangan .fangan_right {
  padding-left: 50px;
}

.fangan_title {
  font-size: 28px;
  line-height: 37px;
  color: #000;
  padding: 0;
  padding-bottom: 10px;
  font-weight: 550;
  margin: 0;
}

.fangan_desc {
  font-size: 18px;
  line-height: 36px;
  color: #666;
  margin: 0;
  padding: 0;
}

.hexin .hexin_item {
  padding: 10px 150px;
}

.roll_footer {
  margin-top: 50px;
  width: 100%;
  background-color: #333333;
  height: 120px;
  padding: 60px 0;
}

.roll_footer p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  text-align: center;
}

.roll_footer_link {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.roll_footer_link a {
  color: rgba(255, 255, 255, 0.7);
  display: inline-block;
  padding: 10px;
  font-size: 17px;
}
</style>