wutt
/
manHourHousekeeper


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="../css/element-uiCss.css">
  <script src="../js/vue.min.js"></script>
  <script src="../js/element-ui.js"></script>
  <script src="./js/setRem.js"></script>
</head>
<body>
  <div id="app">
    <div class="headerView">
      <div class="headerView-left">
        <div class="header-logo">
          <img id="logo" src="./image/logos.jpg" class="img" alt="">
          <!-- <img id="logo" src="./image/logo.jpg" class="img" alt=""> -->
          <!-- <img src="./image/logo.png" class="img" alt=""> -->
        </div>
        <div class="header-list" @mouseleave="mouseleave('left')">
          <div class="header-item" @mouseenter="mouseenter('product', true)" @mouseleave="mouseleave('product')">产品矩形</div>
          <div v-for="(item, index) in leftItemList" :key="index" @mouseenter="mouseenter('left', index)" :class="`${item.class}`">
            <a :href="item.value" target="_top" :class="`${ leftItemIndex == index ? 'item-hover' : '' }`"> {{ item.label }} </a>
          </div>
        </div>
      </div>
      <div class="headerView-right">
        <div class="header-list" @mouseleave="mouseleave('right')" v-if="showRight">
          <div :class="`header-item`" @mouseenter="mouseenter('right', 1)" v-if="urlFiled != 'workshop'">
            <a :href="rightCilckUrl[urlFiled] && rightCilckUrl[urlFiled].signIn" :class="`${ rightItemIndex == 1 ? 'item-hover' : '' }`" target="_top">立即注册</a>
          </div>
          <div :class="`header-item`" @mouseenter="mouseenter('right', 0)">
            <a :href="rightCilckUrl[urlFiled] && rightCilckUrl[urlFiled].logIn" :class="`${ rightItemIndex == 0 ? 'item-hover' : '' }`" target="_top">后台登陆</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品矩形 -->
    <div class="headerProduct" v-if="productFlag" @mouseenter="mouseenter('product', true)" @mouseleave="mouseleave('product')">
      <div class="content">
        <div class="product">
          <div class="product-title">火石企业办公套件</div>
          <div class="product-list" @mouseleave="mouseleave('other')">
            <div :class="`product-item ${otherItemIndex == index ? 'hove' : ''}`" v-for="(item, index) in otherList" :key="index" @click="toPath(item)" @mouseenter="mouseenter('other', index)">
              <a :href="item.path" target="_top">{{ item.label }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
      el: "#app",
      data: {
          leftItemIndex: null,
          rightItemIndex: null,
          otherItemIndex: null,
          productFlag: false,
          productTimer: null,
          leftItemList: [
            { label: '客户评价', value: '../index.html#customer', class: 'header-item' },
            { label: '手机版', value: '../mobile.html', class: 'header-item' },
            { label: '产品定价', value: '../index.html#pricing', class: 'header-item' },
            { label: '关于我们', value: '../about.html', class: 'header-item' },
            { label: '企业动态', value: '../dynamic.html', class: 'header-item' },
          ],
          otherList: [
            { label: '工时管家', path: '../index.html' },
            { label: '随访管家', path: '../followup.html' },
            { label: '项目管家', path: '../project.html' },
            { label: '客户管家', path: '../customerNew.html' },
            { label: '生产车间管家', path: '../workshop.html' },
          ],
          showRight: true,
          urlFiled: 'index',
          rightCilckUrl: {
            index: { signIn: 'http://worktime.ttkuaiban.com/#/register', logIn: 'http://worktime.ttkuaiban.com/#/login' },
            followup: { signIn: 'http://clinic.ttkuaiban.com/#/register', logIn: 'http://clinic.ttkuaiban.com/#/login' },
            project: { signIn: 'http://worktime.ttkuaiban.com/#/register', logIn: 'http://worktime.ttkuaiban.com/#/login' },
            customerNew: { signIn: '#', logIn: '#' },
            workshop: { signIn: '', logIn: 'http://workshop.ttkuaiban.com' },
            mobile: { signIn: 'http://worktime.ttkuaiban.com/#/register', logIn: 'http://worktime.ttkuaiban.com/#/login' },
          }
      },
      mounted () {
          this.processingData()
      },
      methods: {
        processingData() {
          const urls = window.parent.location.href
          const filed = urls.match(/\/([^\/]+)\.html$/) && urls.match(/\/([^\/]+)\.html$/)[1];
          const strList = ['dynamic', 'about']
          this.urlFiled = filed
          this.showRight = !strList.includes(filed)
        },
        toPath(item) {
          console.log(item, '<==== 看看数据')
        },
        mouseenter(type, index) {
          if(type == 'left') {
            this.leftItemIndex = index
          }
          if(type == 'right') {
            this.rightItemIndex = index
          }
          if(type == 'other') {
            this.otherItemIndex = index
          }
          if(type == 'product') {
            if(this.productTimer) {
              clearTimeout(this.productTimer)
            }
            this.productFlag = true
          }
        },
        mouseleave(type) {
          if(type == 'left') {
            this.leftItemIndex = null
          }
          if(type == 'right') {
            this.rightItemIndex = null
          }
          if(type == 'other') {
            this.otherItemIndex = null
          }
          if(type == 'product') {
            this.productTimer = setTimeout(() => {
              this.productFlag = false
            }, 200)
          }
        }
      },
  })
</script>
</html>