intc-website/src/views/callus.vue

<template>
  <page class="home-page">
    <zui-header>
      <logo type="xiaoyanyun" href="/"></logo>
        <h4 class="zui-logo-text">
          <a href="http://152.136.151.187:8080/admin/" target="_blank">|&nbsp;&nbsp;记账</a><a href="http://152.136.151.187:82/#/" target="_blank">专家</a>
         <br/>|&nbsp;&nbsp;健康帮手
        </h4>
        <div v-show="mobileShow" class="rightcol" @click="openMenu" style="color: #0b8ba5;">◄目录►</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('health')">健康档案</zui-button>
         <zui-button @click="onButtonClick('invest')">记账平台</zui-button>
         <zui-button @click="onButtonClick('home')">首页</zui-button>
      </div>
    </zui-header>
    <div class="service">
      <h1>
        联系我们->注册账号->免费使用
      </h1>
      <h3>
        专业、高效，满足您的记账需求、健康记录
      </h3>
    </div>
    <div class="features">
      <ul>
        <li>
          <img :src="feature1"/>
          <h4>联系方式</h4>
          <p>17753252359</p>
        </li>
        <li>
          <img :src="feature2"/>
          <h4>微信</h4>
          <p>intcqd</p>
        </li>
     </ul>
    </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.wechat|| 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.gocallus},
              {text: '记账平台', action: this.goinvest},
              {text: '健康档案', action: this.gohealth},
              {text: '资料下载', action: this.goresource},
              {text: '联系我们', action: this.gocallus}
            ]
        }
      }
    },
    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=="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()
      },
      gocallus: function () {
       this.$router.push({path:'/callus'})
      },
      goinvest: function () {
        window.open("http://152.136.151.187:86/#/", '_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>