nuxtProject/pages/solution/privatization.vue

<template>
  <div class="client-exam-page client-platform-page">
    <!-- 广告图位置 -->
    <div class="client-banner-box">
      <div
        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="client-platform-banner"></div>
      <h4>青谷企业私有化部署</h4>
      <p>专属服务器、数据加密，更安全稳定；独享云服务，速度更快</p>
      <onlineInformationBtn />
    </div>

    <!--  私有化部署优势  -->
    <div class="client-private-youshi">
      <ul>
        <li>
          <i></i>
          <div>
            <h4>数据私密安全</h4>
            <p>企业级技术框架；数据私有化隔离；数据存储备份机制；算法、秘钥双重保险，数据安全可靠；独享云服务，速度更快，性能更优。</p>
          </div>
        </li>
        <li>
          <i></i>
          <div>
            <h4>企业自主掌握</h4>
            <p>企业可完全自主掌握，轻松实现人员管理、权限管理；账号与席位轻松绑定，入职迅速，离职安全，避免认为数据事故。</p>
          </div>
        </li>
        <li>
          <i></i>
          <div>
            <h4>第三方接口对接</h4>
            <p>支持和第三方OA、HR、ERP、教务系统、微信、钉钉等对接。</p>
          </div>
        </li>
        <li>
          <i></i>
          <div>
            <h4>可定制开发</h4>
            <p>系统拥有极其强大的扩展技术。在这套扩展技术体系中，企业可以在此基础上定制任意功能，扩充目前的功能架构，满足企业自身发展的需求。</p>
          </div>
        </li>
      </ul>
    </div>

    <!--  私有化部署方案  -->
    <div class="client-private-fangan">
      <h4>私有化部署解决方案</h4>
      <div>
        <span :class="{active: curActive === 1}" @click="curActive === 1">专属服务器部署</span>
        <span :class="{active: curActive === 2}" @click="curActive === 2">私有服务器部署</span>
      </div>

      <div v-if="curActive === 1">
        <img src="#">
        <div>
          <p>将青谷考培系统部署版独立部署到企业专属阿里云/腾讯云服务器中，享受公有云功能与服务的同时，又具备数据隔离的优势，适用于大多数中小型企业。</p>
          <ul>
            <li>更易于拓展</li>
            <li>数据安全可靠</li>
            <li>降低人工成本，无需运维</li>
          </ul>
        </div>
      </div>
      <div v-if="curActive === 2">
        <img src="#">
        <div>
          <p>将青谷考陪系统部署版部署到企业内部私有云服务器中，企业完全自主掌握，适用于通信，金融等对数据安全性要求更高的企业。</p>
          <ul>
            <li>公司内部局域网加速，编辑访问更丝滑</li>
            <li>私有服务器企业自主管理，数据物理安全和防泄密风险进一步增强</li>
          </ul>
        </div>
      </div>


    </div>

    <!--  保护服务  -->
    <div class="client-private-service">
      <ul>
        <li>
          <h4>企业需求诊断</h4>
          <i></i>
          <p>了解企业实际情况，设计专属需求解决方案</p>
        </li>
        <li>
          <h4>实施项全员培训</h4>
          <i></i>
          <p>为企业培训讲解，全员快速上手系统，信息统一，沟通透明同步</p>
        </li>
        <li>
          <h4>部署全程保障</h4>
          <i></i>
          <p>技术专家全程负责，提供完整的部署方案，完成高质量交付</p>
        </li>
        <li>
          <h4>全周期服务指导</h4>
          <i></i>
          <p>高效运营团队使用支持，售后服务及时响应</p>
        </li>
      </ul>
    </div>

    <!--  立即咨询  -->
    <div class="client-zixun-code">
      <h4>立即扫码资讯，领取您的专属解决方案</h4>
      <img src="#" alt="">
      <p>扫码添加客服微信</p>
    </div>
  </div>
</template>

<script>
import chanPinTiYan from "~/components/common/chanPinTiYan";
import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import newsComp2 from "~/components/common/newsComp2";
import {BannerImgs} from "~/defaultConfig";

/**
 * @ 解决方案 -> 私有化部署
 */
export default {
  name: "privatization",
  layout:   'templateB',
  components: { chanPinTiYan, freeTrialBtn, onlineInformationBtn, newsComp2},
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.siyouhuabushu}),
    ];
    const [ res2] = await Promise.all(arr);
    return {
      bannerList: res2.data.data || [],
    }
  },
  data() {
    return {
      curActive: 1
    }
  }
}
</script>

<style scoped>

</style>