初始化网站代码

src/views/HomePage.vue

@@ -0,0 +1,168 @@
+<template>
+  <page class="home-page">
+    <zui-header>
+      <logo type="xiaoyanyun" href="/"></logo>
+        <h4 class="zui-logo-text">
+         |&nbsp;&nbsp;记账专家
+         <br/>|&nbsp;&nbsp;健康帮手
+        </h4>
+         <div class="zui-rightcol" @click="openMenu" style="color: #0b8ba5;">◄目录►</div>
+         <drop-list :config="configData" ref="droplist"></drop-list>
+         <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>
+    </zui-header>
+    <div class="banner vivify fadeIn">
+      <h1 class="vivify popIn">
+        <span class="br"></span>科学记账、量入为出，健康档案、守护未来
+      </h1>
+      <h3 class="vivify popIn">技术引领，服务为基础，科技为核心</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>好用·易用·终生免费>></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>专业·准确·高效>></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>后顾无忧·持续创新>></h4>
+      </a>
+    </div>
+    <div class="service">
+      <h1>
+        您身边的资产记账专家、健康档案好帮手
+      </h1>
+      <h3>
+        专业、高效，满足您的记账需求、健康记录
+      </h3>
+      <h4>
+        无需下载，永久免费！
+      </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>为您提供24小时不间断服务。</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>
+         提供个人记账、健康档案系统解决方案
+       </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,
+        carouselPerPage: (Util.os.android || Util.os.iPhone) ? 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:8080/admin/", '_blank');
+        }else if(e=="health"){
+          window.open("http://152.136.151.187:81/intc/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:'/'})
+      },
+      goinvest: function () {
+        window.open("http://152.136.151.187:82/#/", '_blank');
+      },
+      goresource: function () {
+       this.$router.push({path:'/resource'})
+      },
+      gohealth: function () {
+        window.open("http://152.136.151.187:81/#/", '_blank');
+      },
+    }
+
+  }
+</script>

src/views/callus.vue

@@ -0,0 +1,114 @@
+<template>
+  <page class="home-page">
+    <zui-header>
+      <logo type="xiaoyanyun" href="/"></logo>
+        <h4 class="zui-logo-text">
+         |&nbsp;&nbsp;记账专家
+         <br/>|&nbsp;&nbsp;健康帮手
+        </h4>
+         <div class="zui-rightcol" @click="openMenu" style="color: #0b8ba5;">◄目录►</div>
+         <drop-list :config="configData" ref="droplist"></drop-list>
+         <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>
+    </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,
+        carouselPerPage: (Util.os.android || Util.os.iPhone) ? 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:8080/admin/", '_blank');
+        }else if(e=="health"){
+          window.open("http://152.136.151.187:81/intc/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:'/'})
+      },
+      goinvest: function () {
+        window.open("http://152.136.151.187:82/#/", '_blank');
+      },
+      goresource: function () {
+       this.$router.push({path:'/resource'})
+      },
+      gohealth: function () {
+        window.open("http://152.136.151.187:81/#/", '_blank');
+      },
+    }
+
+  }
+</script>

src/views/less/home-page.less

@@ -0,0 +1,283 @@
+.home-page {
+  .banner {
+    text-align: center;
+    padding: 180px 20px;
+    background: url('../img/zhichou-banner.jpg') center no-repeat;
+    background-size: cover;
+    position: relative;
+    overflow: hidden;
+    img {
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: auto;
+      margin: 0 auto;
+      position: absolute;
+    }
+    h1 {
+      color: #fff;
+      font-size: 42px;
+      margin: 0;
+    }
+    h3 {
+      color: #fff;
+      font-size: 24px;
+      margin-top: 28px;
+    }
+  }
+  .nav {
+    padding-left: 0;
+    list-style: none;
+    max-width: 1065px;
+    margin: 20px auto 0 auto;
+    a {
+      float: left;
+      margin: 17px;
+      width: 320px;
+      color: #32ADC6;
+      text-align: center;
+      display: block;
+      padding: 60px 0 40px 0;
+      border: 1px solid #32ADC6;
+      position: relative;
+      &:hover {
+        text-decoration: none;
+        .watermark {
+          color: #fff !important;
+        }
+        .zui-logo {
+          display: none;
+        }
+        .zui-logo.mobile {
+          display: block;
+        }
+      }
+      &.zhichou:hover {
+        color: #fff;
+        background: #35A3BA;
+      }
+      &.hr:hover {
+        color: #fff;
+        background: #6AC2B5;
+      }
+      &.plus:hover {
+        color: #fff;
+        background: #35A3BA;
+      }
+      .watermark {
+        top: 0;
+        left: 0;
+        opacity: .1;
+        font-size: 70px;
+        line-height: 70px;
+        position: absolute;
+        &.blue {
+          color: #35A3BA;
+        }
+        &.green {
+          color: #00d6b2;
+        }
+      }
+      .zui-logo {
+        display: block;
+        margin: 0 auto;
+      }
+      .zui-logo.mobile {
+        display: none;
+      }
+      h3 {
+        font-size: 24px;
+        margin-top: 15px;
+      }
+      p {
+        font-size: 18px;
+        margin-top: 14px;
+      }
+      &.hr {
+        color: #6AC2B5;
+        border-bolor: #6AC2B5;
+      }
+      &.plus {
+        color: #35A3BA;
+        border-color: #35A3BA;
+      }
+    }
+  }
+  .join-zhichou {
+    color: #32ADC6;
+    font-size: 16px;
+    text-align: center;
+    width: 100%;
+    display: block;
+    margin: 30px 0 165px 0;
+  }
+  .service {
+    padding: 72px 0;
+    text-align: center;
+    h1 {
+      color: #6AC2B5;
+      font-size: 52px;
+      line-height: 70px;
+    }
+    h3 {
+      color: #000;
+      font-size: 40px;
+      margin-top: 15px;
+    }
+    h4 {
+      font-size: 29px;
+      line-height: 32px;
+      font-weight: normal;
+      margin-top: 40px;
+    }
+  }
+
+  .apply-hr {
+    color: #fff;
+    text-align: center;
+    background: #6AC2B5;
+    padding: 49px 0 50px 0;
+    h2 {
+      font-size: 39px;
+    }
+    h4 {
+      font-size: 29px;
+      font-weight: normal;
+      margin-top: 20px;
+    }
+  }
+  .features {
+    background: #DEF0EF;
+    padding: 50px 0;
+    ul{
+      max-width: 500px;
+      margin: 0 auto;
+      li {
+        margin-top: 20px;
+        padding: 10px 0 10px 100px;
+        position: relative;
+        img {
+          width: 60px;
+          top: 15px;
+          left: 0;
+          position: absolute;
+        }
+        h4 {
+          font-size: 25px;
+          font-weight: bold;
+        }
+        p {
+          font-size: 25px;
+          font-weight: normal;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 420px) {
+  .home-page {
+    .banner {
+      padding: 80px 20px;
+      h1 {
+        font-size: 24px;
+        .br {
+          display: block;
+        }
+      }
+      h3 {
+        font-size: 12px;
+      }
+    }
+    .nav {
+      margin: 35px auto 0 auto;
+      a {
+        float: none;
+        width: 270px;
+        margin: 25px auto;
+        padding: 32px 20px;
+        &.zhichou {
+          color: #fff;
+          background: #32ADC6;
+        }
+        &.hr {
+          color: #fff;
+          background: #6AC2B5;
+        }
+        &.plus {
+          color: #fff;
+          background: #236579;
+        }
+        .watermark {
+          color: #fff !important;
+        }
+        .zui-logo {
+          width: 110px;
+          display: none;
+        }
+        .zui-logo.mobile {
+          display: block;
+        }
+        h3 {
+          font-size: 16px;
+          margin-top: 10px;
+        }
+        h4 {
+          font-size: 12px;
+        }
+      }
+    }
+    .join-zhichou {
+      margin: 0 0 30px 0;
+    }
+    .service{
+      padding: 36px 0;
+      h1{
+        font-size: 24px;
+        line-height: 35px;
+      }
+      h3{
+        font-size: 18px;
+      }
+      h4{
+        font-size: 14px;
+        line-height: 24px;
+        margin-top: 20px;
+      }
+    }
+    .features{
+      padding: 32px 0;
+      ul{
+        max-width: 300px;
+        li{
+          margin-top: 0;
+          padding-left: 55px;
+          img{
+            width: 35px;
+          }
+          h4{
+            font-size: 18px;
+          }
+          p{
+            font-size: 14px;
+          }
+        }
+      }
+    }
+
+    .apply-hr{
+      padding: 25px 0;
+      h2{
+        font-size: 20px;
+      }
+      h4{
+        font-size: 14px;
+        margin-top: 5px;
+      }
+    }
+    .apply-hr-form{
+      padding: 20px 0;
+    }
+  }
+}

src/views/resource.vue

@@ -0,0 +1,121 @@
+<template>
+  <page class="home-page">
+    <zui-header>
+      <logo type="xiaoyanyun" href="/"></logo>
+        <h4 class="zui-logo-text">
+         |&nbsp;&nbsp;记账专家
+         <br/>|&nbsp;&nbsp;健康帮手
+        </h4>
+         <div class="zui-rightcol" @click="openMenu" style="color: #0b8ba5;">◄目录►</div>
+         <drop-list :config="configData" ref="droplist"></drop-list>
+         <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>
+    </zui-header>
+    <div class="service">
+      <h1>
+        资料下载->系统介绍->使用手册
+      </h1>
+      <h3>
+        专业、高效，满足您的记账需求、健康记录
+      </h3>
+    </div>
+    <div class="features">
+      <ul>
+        <li>
+          <img :src="feature3"/>
+          <h4>记账平台</h4>
+          <p> 
+            <a href="/" target="_blank">系统介绍</a>&nbsp;&nbsp; 
+            <a href="/" target="_blank">使用手册下载</a>
+          </p>
+        </li>
+        <li>
+          <img :src="feature4"/>
+          <h4>健康档案</h4>
+          <p> 
+          <a href="/" target="_blank">系统介绍</a>&nbsp;&nbsp; 
+          <a href="/" target="_blank">使用手册下载</a>
+        </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,
+        carouselPerPage: (Util.os.android || Util.os.iPhone) ? 1 : 2,
+        configData : {
+            position: {  // 设置显示位置，position
+              top: '60px',
+              right: '15px',
+              bottom: '',
+              left: ''
+            },
+            width: '40%', // 设置宽度
+            list: [ // 设置下拉列表数据和对应的点击事件
+            {text: '首页', action: this.gocallus},
+              {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:8080/admin/", '_blank');
+        }else if(e=="health"){
+          window.open("http://152.136.151.187:81/intc/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:82/#/", '_blank');
+      },
+      goresource: function () {
+       this.$router.push({path:'/resource'})
+      },
+      gohealth: function () {
+        window.open("http://152.136.151.187:89/#/", '_blank');
+      },
+    }
+
+  }
+</script>