caimei-authentic-website-ross/layouts/default.vue

<template>
  <div>
    <!-- 顶部导航栏 start -->
    <nav class="header navbar">
      <div class="container">
        <div class="navbar-header">
          <a href="/" class="logo">
            <h1>艾斯佰丽</h1>
            <img src="/img/logo.png" alt="艾斯佰丽" class="only-pc" />
            <img src="/img/logo3.png" alt="艾斯佰丽" class="only-mobile" />
          </a>
          <div
            class="only-mobile navbar-toggle active"
            data-toggle="collapse"
            data-target="#navbar-collapse"
            aria-expanded="false"
          >
            <span class="name">菜单</span>
            <span class="icon-bar"></span>
          </div>
        </div>
        <div id="navbar-collapse" class="navbar-collapse">
          <ul class="nav clearfix">
            <li
              :class="{ dropdown: nav.children, active: isActive(nav) }"
              v-for="nav in navbar"
              :key="nav.link"
            >
              <template v-if="nav.children">
                <a
                  class="dropdown-toggle only-mobile"
                  data-toggle="dropdown"
                  href="javascript:void(0)"
                  >{{ nav.name }}
                </a>
                <a :href="nav.link" class="only-pc" :target="nav.target">
                  <span>{{ nav.name }}</span>
                  <span>{{ nav.subname }}</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="only-mobile">
                    <a :href="nav.link" :target="nav.target">{{ nav.name }}</a>
                  </li>
                  <template v-for="subNav in nav.children">
                    <li v-if="subNav.children" :key="subNav.link">
                      <a href="javascript:void(0)" class="submenu-toggle">{{
                        subNav.name
                      }}</a>
                      <ul class="dropdown-submenu clearfix">
                        <li v-for="lastNav in subNav.children" :key="lastNav.link">
                          <a :href="lastNav.link" :target="lastNav.target">{{
                            lastNav.name
                          }}</a>
                        </li>
                      </ul>
                    </li>
                    <li v-else :key="subNav.link">
                      <a :href="subNav.link" :target="subNav.target">{{ subNav.name }}</a>
                    </li>
                  </template>
                </ul>
              </template>
              <template v-else>
                <a :href="nav.link">
                  <span>{{ nav.name }}</span>
                  <span>{{ nav.subname }}</span>
                </a>
              </template>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 顶部导航栏 end -->

    <nuxt />

    <!-- 底部区域 start -->
    <div class="footer">
      <div class="container clearfix">
        <div class="logo only-mobile">
          <img src="/img/logo3.png" alt="" />
          <img src="/img/logo-ross.png" alt="" />
        </div>
        <div class="title only-mobile">关于我们</div>
        <div class="section">
          <div class="logo only-pc">
            <img src="/img/logo3.png" alt="" />
            <img src="/img/logo-ross.png" alt="" />
          </div>
          <div class="item contact">
            <!--ACEBELLE生物科技（深圳）有限公司（ROS'S中国区总代理）-->
            深圳艾斯佰丽生物科技有限公司
          </div>
          <div class="item address">广东省深圳市福田区卓越世纪中心四号楼32层</div>
          <div class="item mobile">0755-23769340</div>
          <div class="item site">http://www.spainross.com</div>
        </div>
        <ul class="nav first">
          <!-- <li><a href="/about">艾斯佰丽</a></li> -->
          <li><nuxt-link to="/about.html">艾斯佰丽</nuxt-link></li>
          <li><a href="/brand.html">品牌中心</a></li>
          <li><a href="/product/binary-premium.html">binary premium</a></li>
          <li><a href="/product/kestos.html">kestos T2</a></li>
          <li><a href="/product/intradermik.html">intradermik</a></li>
          <li><a href="/product/rollaction.html">rollaction</a></li>
        </ul>
        <ul class="nav second">
          <li><a href="/product/mesobiolift.html">Mesobiolift RF</a></li>
          <li><a href="/product/diactivplus.html">Diactivplus</a></li>
          <li>
            <a href="https://zp.caimei365.com/12/ross" target="_blank">正品认证系统</a>
          </li>
          <li><a href="/cooperative.html">合作加盟</a></li>
          <li><a href="/contact.html">联系我们</a></li>
        </ul>
        <div class="qrcode-content">
          <div class="qrcode">
            <img src="/img/qrcode1.png" alt="二维码" />
            <div class="tip">西班牙ROS'S</div>
          </div>
          <div class="qrcode">
            <img src="/img/qrcode2.png" alt="二维码" />
            <div class="tip">正品认证系统</div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="copyright">
        <a href="https://www.caimei365.com/" target="_blank"
          >本网站由采美365网提供技术支持</a
        >
        <span>Copyright ©2019</span>
        <span>acebelleshenzhen.com</span>
        <span
          >版权所有
          <a href="https://beian.miit.gov.cn/" target="_blank"
            >粤ICP备2020131296号</a
          ></span
        >
      </div>
      <div style="width: 300px; margin: -12px auto; padding: 20px 0;display: flex;">
        <a
          target="_blank"
          href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030402006354"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
          ><img src="/img/beian.png" style="float: left" />
          <p
            style="float: left;height: 20px;line-height: 20px; margin: 0px 0px 0px 5px;color: #939393 !important;"
          >
            粤公网安备 44030402006354号
          </p></a
        >
      </div>
    </div>
    <!-- 底部区域 end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      navbar: [
        {
          name: "首页",
          link: "/index.html",
          target: "_self",
          subname: "Home",
        },
        {
          name: "艾斯佰丽",
          link: "/about.html",
          target: "_self",
          subname: "About Us",
        },
        {
          name: "品牌中心",
          link: "/brand.html",
          target: "_self",
          subname: "Brand",
          children: [
            {
              name: "ROS'S介绍",
              link: "/brand/ross.html",
              target: "_self",
            },
            {
              name: "产品系列",
              target: "_self",
              children: [
                {
                  name: "Binary Premium",
                  link: "/product/binary-premium.html",
                  target: "_self",
                },
                {
                  name: "Diactivplus",
                  link: "/product/diactivplus.html",
                  target: "_self",
                },
                {
                  name: "Intradermik",
                  link: "/product/intradermik.html",
                  target: "_self",
                },
                {
                  name: "Mesobiolift RF",
                  link: "/product/mesobiolift.html",
                  target: "_self",
                },
                {
                  name: "Rollaction",
                  link: "/product/rollaction.html",
                  target: "_self",
                },
                {
                  name: "Kestos T2",
                  link: "/product/kestos.html",
                  target: "_self",
                },
              ],
            },
            {
              name: "案例展示",
              link: "/case.html",
              target: "_self",
            },
            {
              name: "授权认证",
              link: "https://zp.caimei365.com/12/ross",
              target: "_blank",
            },
          ],
        },
        {
          name: "合作客户",
          link: "/cooperation.html",
          target: "_self",
          subname: "Cooperation",
          children: [
            {
              name: "品牌实力",
              link: "/cooperation.html?index=1",
              target: "_self",
            },
            {
              name: "提供支持",
              link: "/cooperation.html?index=2",
              target: "_self",
            },
            {
              name: "服务模式",
              link: "/cooperation.html?index=3",
              target: "_self",
            },
            {
              name: "在线咨询",
              link: "/cooperation.html?index=4",
              target: "_self",
            },
          ],
        },
        {
          name: "新闻动态",
          link: "/news.html",
          target: "_self",
          subname: "News",
        },
        {
          name: "联系我们",
          link: "/contact.html",
          target: "_self",
          subname: "Contact Us",
          children: [
            {
              name: "联系方式",
              link: "/contact/consult.html",
              target: "_self",
            },
            {
              name: "人才招聘",
              link: "/contact/job.html",
              target: "_self",
            },
          ],
        },
      ],
    };
  },
  methods: {
    isActive(nav) {
      // return window.location.href.indexOf(nav) > -1
      return this.$route.fullPath.indexOf(nav.link) > -1;
    },
  },
};
</script>