<template>
  <page class="home-page">
    <zui-header>
      <logo type="xiaoyanyun" href="/"></logo>
      <h4 v-show="webShow" class="zui-logo-text">
         <a style="text-decoration: none;" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
         <a style="text-decoration: none;" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
         <a style="text-decoration: none;" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;茅台预约</a>
        </h4>
        <div v-show="mobileShow" class="rightcol" @click="openMenu" style="color: #0b8ba5;font-size: 14px;">◄目录►</div>
        <div  v-show="mobileShow" class="rightcol"> 
          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:86/#/" target="_blank">&nbsp;&nbsp;记账平台</a>
          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:89/#/" target="_blank">&nbsp;&nbsp;健康档案</a>
          <a style="text-decoration: none;font-size: 12px;" href="http://152.136.151.187:90/#/" target="_blank">&nbsp;&nbsp;茅台预约</a>
        </div>
         <drop-list :config="configData" ref="droplist"></drop-list>
         <div v-show="webShow">
         <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
         <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
         <!-- <zui-button @click="onButtonClick('imaotai')">茅台预约</zui-button>
         <zui-button @click="onButtonClick('health')">健康档案</zui-button>
         <zui-button @click="onButtonClick('invest')">记账平台</zui-button> -->
         <zui-button @click="onButtonClick('home')">首页</zui-button>
      </div>
    </zui-header>
    <div class="banner vivify fadeIn">
      <h1 class="vivify popIn">
        <span class="br"></span>科学记账&nbsp;&nbsp;量入为出
      </h1> 
      <br>
       <h1 class="vivify popIn">
        <span class="br"></span>健康档案&nbsp;&nbsp;守护未来
      </h1>
      <br>
      <h1 class="vivify popIn">
        <span class="br"></span>茅台预约&nbsp;&nbsp;解放双手
      </h1>
      <h3 class="vivify popIn">技术引领&nbsp;&nbsp;服务为基础&nbsp;&nbsp;用户为核心&nbsp;&nbsp;需求为导向</h3>
    </div>
    <div class="nav clear">
      <a class="zhichou vivify popIn">
        <div class="watermark blue">记账</div>
        <logo type="zhongtai"></logo>
        <logo class="mobile" type="mzhichou"></logo>
        <h3>解决个人记账难题</h3>
        <h4>好用&nbsp;&nbsp;易用&nbsp;&nbsp;免费</h4>
      </a>
      <a class="hr vivify popIn delay-200">
        <div class="watermark green">服务</div>
        <logo type="hr"></logo>
        <logo class="mobile" type="mhr"></logo>
        <h3>健康档案管理专家</h3>
        <h4>专业&nbsp;&nbsp;准确&nbsp;&nbsp;高效</h4>
      </a>
      <a class="plus vivify popIn delay-400">
        <div class="watermark blue">预约</div>
        <logo type="plus"></logo>
        <logo class="mobile" type="mplus"></logo>
        <h3>茅台预约得力助手</h3>
        <h4>自动预约&nbsp;&nbsp;后顾无忧</h4>
      </a>
    </div>
    <div class="service">
      <h1>
        记账专家、健康帮手、预约助手
      </h1>
      <h3>
        满足您的记账需求、健康记录、茅台预约
      </h3>
      <h4 style="color: red;">
        无需下载，永久免费！
      </h4>
    </div>
    <div class="features">
      <ul>
        <li>
          <img :src="feature1"/>
          <h4>记账管理</h4>
          <p>最专业的个人记账服务。</p>
        </li>
        <li>
          <img :src="feature2"/>
          <h4>健康档案</h4>
          <p>满足健康档案记录需求。</p>
        </li>
        <li>
          <img :src="feature3"/>
          <h4>茅台预约</h4>
          <p>提供安全高效自动预约。</p>
        </li>
        <li>
          <img :src="feature4"/>
          <h4>产品服务</h4>
          <p>全天尽享服务贴心之旅‌‌。</p>
        </li>
     </ul>
    </div>
    <!-- <div class="customer-case-logo">
       <img :src="companyLogo"/>
       <img class="mobile" :src="mcompanyLogo"/>
     </div> -->
     <div class="apply-hr">
       <h2>
         智聪科技 技术领先 服务周到 诚信赢天下
       </h2>
       <h4>
         提供个人资产记账、健康档案管理、i茅台APP自动预约系统解决方案
       </h4>
     </div>
    <zui-footer/>
  </page>
</template>
<script>
  import './less/home-page.less'
  import Logo from '../components/Logo'
  import Page from '../components/Page'
  import ZuiHeader from '../components/Header'
  import ZuiFooter from '../components/Footer'
  import ZuiButton from '../components/Button'
  import feature1 from '../assets/img/feature1.png'
  import feature2 from '../assets/img/feature2.png'
  import feature3 from '../assets/img/feature3.png'
  import feature4 from '../assets/img/feature4.png'
  import Util from '../Util'
  import DropList from 'vue-droplist'
  export default{
    components: {Page, Logo, ZuiHeader, ZuiFooter,ZuiButton,DropList},
    data () {
      return {
        feature1: feature1,
        feature2: feature2,
        feature3: feature3,
        feature4: feature4,
        mobileShow: false,
        webShow: true,
        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2,
        configData : {
            position: {  // 设置显示位置，position
              top: '60px',
              right: '15px',
              bottom: '',
              left: ''
            },
            width: '40%', // 设置宽度
            list: [ // 设置下拉列表数据和对应的点击事件
            {text: '首页', action: this.gohome},
              // {text: '记账平台', action: this.goinvest},
              // {text: '健康档案', action: this.gohealth},
              // {text: '茅台预约', action: this.goimaotai},
              {text: '资料下载', action: this.goresource},
              {text: '联系我们', action: this.gocallus}
            ]
        }
      }
    },
    created() {
    this.init()
  },
   methods: {
      onButtonClick: function (e) {
        if(e=="callus"){
            this.$router.push({path:'/callus'})
        }else if(e=="invest"){
          window.open("http://152.136.151.187:88/login", '_blank');
        }else if(e=="imaotai"){
          window.open("http://152.136.151.187:88/login", '_blank');
        } else if(e=="health"){
          window.open("http://152.136.151.187:81/hrms/login", '_blank');
        }
        else if(e=="resource"){
            this.$router.push({path:'/resource'})
        }else{
            this.$router.push({path:'/'})
        }
      },
      openMenu: function () {
       this.$refs.droplist.show()
      },
      gohome: function () {
       this.$router.push({path:'/'})
      },
      gocallus: function () {
       this.$router.push({path:'/callus'})
      },
      goinvest: function () {
        window.open("http://152.136.151.187:86/#/", '_blank');
      },
      goimaotai: function () {
        window.open("http://152.136.151.187:90/#/", '_blank');
      },
      goresource: function () {
       this.$router.push({path:'/resource'})
      },
      gohealth: function () {
        window.open("http://152.136.151.187:89/#/", '_blank');
      },
      init: function () {
        if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){
          this.webShow=false
          this.mobileShow=true
        }else{
          this.webShow=true
          this.mobileShow=false
        }
      
      },
    }

  }
</script>
<style scoped lang="less">
.rightcol{
  display: flex;
  float: right;
  line-height: 30px;
  margin: 15px 10px 0 0;
  min-width: 50px;
  font-weight: bold;
  color: #32adc6;
}
</style>
