【珍惜时间】h5-tzl

接下来我们一起欣赏美丽的项目喽~
先放作者大大的giuthub地址
https://github.com/summonLi/h5-tzl
接下来我们运行项目看看

运行项目就是这个界面，我们看看代码里面有什么蹊跷的
原来代码中加了这一句，如果不是移动端打开的就直接跳转到官网了

 if(/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(navigator.userAgent)) {
      }else{
        window.location.href = 'http://www.miare-china.com/';
      }

接下来我们看看效果

首先我们看看main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store'
// import Mint from 'Mint-ui'
import { Tab, Tabs, Swipe, SwipeItem, Toast, Button, Popup, Pagination } from 'vant'
import 'vant/lib/index.css'
import '../static/js/flexible.js'

/**
 *监听浏览器点击返回前进操作动画
 *浏览器端使用需要注意路由path的创建，二级应该在一级的基础上添加
 *如一级/Home，则二级为/Home/Detail，依次往后加，如果是app的话可忽略以下代码
 */
let init = 0
window.addEventListener('popstate', function(e) {
  init++
  if (init < 2) {
    router.beforeEach((to, from, next) => {
      let arr1 = to.path.split('/')
      console.log('aaaa...1111',arr1)
      let arr2 = from.path.split('/')
      console.log('bbbbb....22222',arr2)
      if (arr1.length === 2) {
        
        if (arr1[1].length === 0) {
          arr1.splice(1, 1)
          console.log('ccccc',arr1)
        }
      }
      if (arr2.length === 2) {
        if (arr2[1].length === 0) {
          arr2.splice(1, 1)
        }
      }
      if (arr1.length < arr2.length) {
        router.toGoBack()
      } else {
        router.toGoIn()
      }
      next()
    })
  }
}, false)

Vue.use(Vuex)
// Vue.use(Mint)
Vue.use(Tab).use(Tabs).use(Swipe).use(SwipeItem).use(Toast).use(Button).use(Popup).use(Pagination)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

main.js中用popstate去监听浏览器返回还是前进
App.vue中挺有意思的

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      transitionName:''
    }
  },
  watch: {
    $route(to,form){//监听路由的变化
      console.log(this.$router.isLeft)
      if(this.$router.isLeft){
        this.transitionName = 'slideleft'
        console.log('....left..',to)
        console.log('1111',this.transitionName)
      }
      if(this.$router.isRight){
        this.transitionName = 'slideright'
         console.log('....right..',to)
         console.log('...this.transitionName..',this.transitionName)
      }
    }
  }
}
</script>

<style lang="less">
@import "~styles/variable.less";
#app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /*text-align: center;*/
   color: #2c3e50;
}
  .Router {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
     100%;
    height: 100%;
    background-color: @body-bg-color;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
  }
  .slideleft-enter,
  .slideright-leave-active {
    opacity: 1;
    transform: translate3d(90% 0, 0);
    -webkit-transform: translate3d(90%, 0, 0);
    -moz-transform: translate3d(90%, 0, 0);
  }
  .slideleft-leave-active,
  .slideright-enter {
    opacity: 1;
    transform: translate3d(-90% 0, 0);
    -webkit-transform: translate3d(-90%, 0, 0);
    -moz-transform: translate3d(-90%, 0, 0);
  }
</style>

App.vue去监听了路由的变化
接下来我们看store.js里面的
home.js中写了一个登录的状态处理的代码

import request from '@utils/request'

const home = {
  state: {
    token:'',
    userInfo: {}
  },

  mutations: {
    SET_TOKEN:(state, token) => {
      state.token = token
    },
    USER_INFO: (state, userinfo) => {
      state.userInfo = userinfo
    }
  },

  action: {
    Login({ commit }, userInfo){
      const userName = userInfo.userName.trim();
      return new Promise((resolve,reject) => {
        request({
          url: '/api',
          method: 'post',
          data: {
            'userName': userName,
            'password':userInfo.passwork
          }
        }).then(response => {
          commit('SET_TOKEN',response.data.token);
          commit('USER_INFO',response.data);
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}

router.js中封装了一些去哪个方向的函数

//router.js
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/pages/layout'//主框架

Vue.use(Router)

//需要左方向动画的路由用this.$router.toGo('***')
Router.prototype.toGo = function (path) {
  this.isLeft = true;
  this.isRight = false;
  this.push(path)
}

//需要右方向动画的路由用this.$router.goRight('***')
Router.prototype.goRight = function (path) {
  this.isLeft = false;
  this.isRight = true;
  this.push(path)
}

//需要返回按钮动画的路由用this.$router.goBack('***')
Router.prototype.goBack = function () {
  this.isLeft = false;
  this.isRight = true;
  this.go(-1)
}

//点击浏览器返回按钮执行，此时不需要路由回退
Router.prototype.toGoBack = function (path) {
  this.isLeft = false;
  this.isRight = true;
}

//点击浏览器前进按钮，此时不需要路由前进
Router.prototype.toGoIn = function (path) {
  this.isLeft = false;
  this.isRight = true;
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      redirect:'/home',
      children: [
        {
          path: '/home',
          name:'首页',
          component:(resolve) => require(['@/pages/main/home'],resolve)
        },
        {
          path: '/product',
          name:'产品中心',
          component:(resolve) => require(['@/pages/main/product'],resolve)
        },
        {
          path: '/news',
          name:'新闻资讯',
          component:(resolve) => require(['@/pages/main/news'],resolve)
        },
        {
          path: '/cooperation',
          name:'渠道合作',
          component:(resolve) => require(['@/pages/main/cooperation'],resolve)
        },
        {
          path: '/join',
          name:'人才招聘',
          component:(resolve) => require(['@/pages/main/join'],resolve)
        },
        {
          path: '/about',
          name:'关于我们',
          component:(resolve) => require(['@/pages/main/about'],resolve)
        },
        {
          path: '/contact',
          name:'联系我们',
          component:(resolve) => require(['@/pages/main/contact'],resolve)
        },
        {
          path:'/news/newsdetail/:id',//动态路由，传值
          name:'新闻资讯',
          component:(resolve) => require(['@/pages/main/newsdetail'],resolve)
        },
        {
          path:'/product/productdetail/:id',//动态路由，传值
          name:'产品中心',
          component:(resolve) => require(['@/pages/main/productdetail'],resolve)
        }
      ]
    },
    {
      path:'/subpages/goodsdetail',
      name: '商品详情',
      component:(resolve) => require(['@/pages/subpages/goodsdetail'],resolve)
    }
  ]
})

接下来我们是看对应的页面了
layout页面

//layout.vue
<template>
  <div class="page">
    <CommonHeader></CommonHeader>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
    import CommonHeader from '@/components/CommonHeader'
    export default {
        name: "Layout",
        data(){
          return {
            title: '首页'
          }
        },
        components: {
          CommonHeader
        },
        computed: {
            activeRoute (){
              return this.$route.path
            }
        }
    }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";
  .page {
    display: flex;
    flex-direction: column;
  }

</style>

这个公共头部的处理也挺有意思的

//CommonHeader
<template>
  <div class="header-tab">
    <div class="left-icon">
      <span @click="goBack" class="logo"></span>
    </div>
    <div class="tab-text">
      <span class="header-text">{{title}}</span>
    </div>
    <div class="right-icon" @click="showNav">
      <span class="set-icon"></span>
    </div>
    <div class="nav-box" v-show="isShowNav">
      <div class="nav-ul">
        <router-link class="nav-li" v-for="(item, index) in navList" :key="index" :to="item.path" :class="{'active': activeRoute == item.path}">{{item.name}}</router-link>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "CommonHeader",
      data(){
        return {
          title:'首页',
          isShowNav:false,//false隐藏，true显示
          navList: [
            {
              'path':'/home',
              'name': '首 页'
            },
            {
              'path':'/product',
              'name':'产品中心'
            },
            {
              'path':'/news',
              'name':'新闻资讯'
            },
            {
              'path':'/cooperation',
              'name':'渠道合作'
            },
            {
              'path':'/join',
              'name':'人才招聘'
            },
            {
              'path':'/about',
              'name':'关于我们'
            },
            {
              'path':'/contact',
              'name':'联系我们'
            }
          ],
        }
      },
      methods:{
        goBack(){
          this.$router.goBack()
        },
        showNav(){
          //显示菜单栏
          this.isShowNav = !this.isShowNav;
        }
      },
      computed: {
        activeRoute (){
          this.isShowNav = false;
          this.title = this.$route.name;
          console.log('...this.$route.path;',this.$route.path)
          return this.$route.path;
        }
      }
    }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";
  .header-tab {
    position: relative;
    text-align: center;
    display: flex;
    z-index: 1;
     100%;
    -webkit-box-shadow: 0.3px 0.9px 3px 0px rgba(10,2,4,0.22);
    -moz-box-shadow: 0.3px 0.9px 3px 0px rgba(10,2,4,0.22);
    box-shadow: 0.3px 0.9px 3px 0px rgba(10,2,4,0.22);
    .fs(@header-tab-size);
    background: @header-tab-bg;
    color: @header-tab-color;
    .h(88);
    .lh(88);
    .left-icon {
      flex: 1;
      position: relative;
      .logo {
        position: absolute;
        .bottom(10);
        .left(40);
        .w(28);
        .h(60);
        background-image: url("../assets/images/logo.png");
        -webkit-background-size: cover;
        background-size: cover;
      }
    }
    .tab-text {
      flex: 3;
      .header-text {
        font-family: PingFang-SC-Bold;
        .fs(36);
        font-weight: 600;
      }
    }
    .right-icon {
      flex: 1;
      position: relative;
      .set-icon {
        position: absolute;
        .bottom(23);
        .right(40);
        .w(55);
        .h(36);
        background-image: url("../assets/images/icon01.png");
        -webkit-background-size: cover;
        background-size: cover;
      }
    }
    .nav-box {
      position: absolute;
      .top(82);
      left: 0;
       100%;
      border-top: 1px solid #dddddd;
      background: rgba(239,239,239,0.9);
      .nav-ul {
        display: flex;
        flex-wrap: wrap;
        .nav-li {
           33.1%;
          .h(88);
          .lh(88);
          color: @header-tab-color;
          border-bottom: 1px solid #f6f6f6;
          border-right: 1px solid #f6f6f6;
        }
        .nav-li.active {
          color: #51c31f;
        }
        .nav-li:nth-child(3n) {
          border-right: none;
        }
      }
    }
  }
</style>

当然这个是公共footer的

//CommonFooter
<template>
  <div class="foot">
    <div class="foot-top">
      <ul class="foot-top-info-ul">
        <li class="foot-top-info-li">
          <div class="foot-top-info-title">帮助中心</div>
          <p>账号管理</p>
          <p>购物指南</p>
          <p>订单操作</p>
        </li>
        <li class="foot-top-info-li">
          <div class="foot-top-info-title">服务支持</div>
          <p>售后服务</p>
          <p>自助服务</p>
          <p>相关下载</p>
        </li>
        <li class="foot-top-info-li">
          <div class="foot-top-info-title">线下门店</div>
          <p>体验中心</p>
        </li>
        <li class="foot-top-info-li">
          <div class="foot-top-info-title">关于我们</div>
          <p>了解藤之露</p>
          <p>加入我们</p>
          <p>投资者关系</p>
        </li>
        <li class="foot-top-info-li">
          <div class="foot-top-info-title">关注我们</div>
          <p>新浪微博</p>
          <p>官方微信</p>
          <p>联系我们</p>
        </li>
      </ul>
    </div>
    <div class="foot-bottom">
      <div class="foot-bottom-con">
        <div class="foot-img">
          <img src="../assets/images/logofoot.png">
        </div>
        <div class="foot-bottom-l">
            <div class="foot-top-contact">
              <div class="foot-top-contact-phone">400-6062-316</div>
              <div class="foot-top-contact-time">周一至周日 8:00-18:00</div>
              <div class="foot-top-contact-tip">(仅收取市话费)</div>
              <div class="foot-top-contact-kefu"><img src="../assets/images/icon04.png"><span>人工客服</span></div>
            </div>
            <div class="foot-bottom-info-js">技术支持：广州闪电鲸科技有限公司</div>
            <p class="foot-bottom-info-beian">COPYRIGHT © 2019-2025 珠海御谷生物科技有限公司 版权所有粤公网安备粤ICP备19086519号-1</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "CommonFooter"
    }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";
  .foot-top {
     100%;
    background: #f9f9f9;
  }
  .foot-top-info-ul {
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    padding: 15px 0 5px 0;
  }
  .foot-top-info-li p {
    font-family: PingFang-SC-Regular;
    .fs(20);
    font-weight: normal;
    font-stretch: normal;
    line-height: 17px;
    letter-spacing: 0px;
    color: #666666;
    .mb(14);
    text-align: center;
    cursor: pointer;
  }
  .foot-top-info-title {
    font-family: PingFang-SC-Bold;
    .fs(24);
    font-weight: normal;
    font-stretch: normal;
    line-height: 17px;
    letter-spacing: 0px;
    color: #2e306b;
    .mb(30);
  }
  .foot-bottom-con {
    display: -webkit-box;
    display: flex;
    .padding(20,40)
  }
  .foot-img {
     125px;
    .h(269);
    overflow: hidden;
  }
  .foot-img img {
     100%;
  }

  .foot-bottom-l {
    .ml(25);
  }
  .foot-top-contact {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
  }
  .foot-top-contact-phone {
    font-family: PingFang-SC-Bold;
    .fs(36);
    font-weight: normal;
    font-stretch: normal;
    line-height: 17px;
    letter-spacing: 0px;
    color: #0b8f0e;
    .mb(15);
  }
  .foot-top-contact-time,.foot-top-contact-tip {
    font-family: PingFang-SC-Medium;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 17px;
    letter-spacing: 0px;
    color: #666666;
  }
  .foot-top-contact-kefu {
    border: 1px solid #0b8f0e;
    color: #0b8f0e;
    .w(147);
    .mt(14);
    text-align: center;
    padding: 5px 0;
  }
  .foot-top-contact-kefu img {
    wdith: 12px;
    height: 11px;
    display: inline-block;
  }
  .foot-bottom {
     100%;
    background: #e5eaed;
    height: 220px;
  }
  .foot-bottom-info-title {
    background: url(../assets/images/icon04.png) no-repeat center center;
     386px;
    height: 27px;
    margin: 0 auto;
    margin-bottom: 33px;
  }
  .foot-bottom-info-js,.foot-bottom-info-beian {
    font-family: PingFang-SC-Medium;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #696969;
    line-height: 17px;
  }
  .foot-bottom-info-js {
    .mt(29);
    .mb(19);
  }
</style>

接下来我们看home页面


功能点是轮播加跳转详情

//home.vue
<template>
  <div class="content-box">
    <div class="page-content">
      <div class="home-bannerBox">
        <van-swipe :autoplay="5000" :loop="true" indicator-color="#3cc27e">
          <van-swipe-item v-for="(image, index) in SwiperImg" :key="index">
            <img class="bannerImg" :src="image">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="index-intro">
        <div class="index-intro-content">
          <div class="index-intro-info">
            <div class="index-intro-info-title">藤の露</div>
            <p class="index-intro-text1">“藤の露”是一个专注做藤茶产品的品牌。“藤の露”系列产品应用目前较为先进的冷萃取工艺技术，能将野生藤茶中的成分和口味完全保留。</p>
            <p class="index-intro-text2">"FUJI NO TSUYU" is a brand dedicated to making Ampelopsis products. With the application of the advanced cold extraction technology, the series products of "FUJI NO TSUYU" can completely retain the ingredients and flavors of wild Ampelopsis and make instant tea powder and containing granules, thus creating a new era of tea products.</p>
            <div class="index-langIcon"><img src="../../assets/images/icon05.png"></div>
          </div>
          <div class="index-intro-info1">
            <div class="index-intro-left">
              <div class="index-intro-pro">
                <div class="index-intro-pro-title">红</div>
                <div class="index-intro-pro-con">
                  <div class="index-intro-pro-text">红袍黑藤</div>
                  <div class="index-intro-pro-des">高山嫩叶、醇厚茶香</div>
                </div>
              </div>
              <div class="index-intro-pro">
                <div class="index-intro-pro-title">玫</div>
                <div class="index-intro-pro-con">
                  <div class="index-intro-pro-text">玫瑰紫藤</div>
                  <div class="index-intro-pro-des">重瓣玫瑰、爱与美的诠释</div>
                </div>
              </div>
              <div class="index-intro-pro">
                <div class="index-intro-pro-title">明</div>
                <div class="index-intro-pro-con">
                  <div class="index-intro-pro-text">明前绿藤</div>
                  <div class="index-intro-pro-des">明前嫩叶、色翠香幽</div>
                </div>
              </div>
            </div>
            <div class="index-intro-right">
              <div class="index-intro-pro">
                <div class="index-intro-pro-title">酒</div>
                <div class="index-intro-pro-con">
                  <div class="index-intro-pro-text">酒藤知己</div>
                  <div class="index-intro-pro-des">轻养生藤茶、健康好伴侣</div>
                </div>
              </div>
              <div class="index-intro-pro">
                <div class="index-intro-pro-title">醉</div>
                <div class="index-intro-pro-con">
                  <div class="index-intro-pro-text">醉藤你</div>
                  <div class="index-intro-pro-des">有酒相伴、生活更美好</div>
                </div>
              </div>
              <div class="index-intro-pro">
                <div class="index-intro-pro-title">金</div>
                <div class="index-intro-pro-con">
                  <div class="index-intro-pro-text">金藤爽</div>
                  <div class="index-intro-pro-des">满口清凉、滋润咽喉</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index-tc-intro">
        <img class="index-tc-intro-imgbg" src="../../assets/images/bg04.png">
        <div class="index-tc-intro-box">
          <div class="index-tc-intro-info">
            <div class="index-tc-intro-title"><span class="index-tc-intro-citeL"></span>藤茶 大自然的恩赐<span class="index-tc-intro-citeR"></span></div>
            <p class="index-tc-intro-des">藤茶，俗称端午茶、长寿藤、藤婆茶、龙须茶。此茶色泽绿，起白霜，初入口微苦，回甘快而持久。土家族人已有3000年的藤茶饮用历史，他们因藤茶而长寿，因藤茶而健康，神奇的土家藤茶已经成为茶家族里一枚绚丽璀璨的明珠。</p>
          </div>
        </div>
      </div>
      <div class="index-pro">
        <div class="index-pro-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">新品推荐</span>
              <span class="index-pro-ywtitle">New Arrivals</span>
            </div>
          </div>
          <div class="index-pros">
            <div class="index-pro-box">
              <div class="index-pro-imgbox">
                <div class="index-pro-imgbg-line"></div>
                <div class="index-pro-pic"><img src="../../assets/images/pic02.png"></div>
              </div>
              <div class="index-pro-info">
                <div class="index-pro-info-title">醉藤你</div>
                <p class="des1">含化型即溶茶</p>
                <p>一款直接含化的茶</p>
                <p>应酬时口服，让你“肝”之如饴</p>
                <p class="index-pro-info-morebox"><span class="index-more-line1"></span><span class="index-more-line2"></span><span class="index-more-line3"></span><span class="index-more-text" @click="goProductdetail(2)">查看更多</span></p>
              </div>
              <div class="index-pro-icon"><img src="../../assets/images/icon03.png"></div>
            </div>
            <div class="index-pro-box">
              <div class="index-pro-icon"><img src="../../assets/images/icon03.png"></div>
              <div class="index-pro-info second">
                <div class="index-pro-info-title">金藤爽</div>
                <p class="des1">含化型即溶茶</p>
                <p>倒入口中直接含化</p>
                <p>一股清凉从口腔蔓延到咽喉</p>
                <p class="index-pro-info-morebox second"><span class="index-more-text" @click="goProductdetail(1)">查看更多</span><span class="index-more-line1"></span><span class="index-more-line2"></span><span class="index-more-line3"></span></p>
              </div>
              <div class="index-pro-imgbox">
                <div class="index-pro-imgbg-line second"></div>
                <div class="index-pro-pic second"><img src="../../assets/images/pic01.png"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index-ad">
        <img src="../../assets/images/bg03.png">
      </div>
      <div class="index-news">
        <div class="index-news-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">新闻资讯</span>
              <span class="index-pro-ywtitle">New Information</span>
            </div>
          </div>
          <div class="index-news-con">
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/pic03.png">
              </div>
              <div class="index-news-info">
                <div class="index-news-info-title cm-ellipsis-1">酒藤知己映初心</div>
                <p class="index-news-info-des cm-ellipsis-2">茶，源于中国，经历千百年岁月蹉跎已经成为了中华文化的核心之一，发展至今已经涵盖了,岁月蹉跎已经成为了中华文化的核心之一</p>
                <div class="index-news-info-more" @click="goNewsDetaile(1)">查看更多</div>
              </div>
            </div>
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/pic03.png">
              </div>
              <div class="index-news-info">
                <div class="index-news-info-title cm-ellipsis-1">酒藤知己映初心</div>
                <p class="index-news-info-des cm-ellipsis-2">2019年8月22日，珠海御谷生物科技参加酒藤知己映初心活动珠海御谷生物科技参加酒藤知己映初心活动。。。</p>
                <div class="index-news-info-more" @click="goNewsDetaile(1)">查看更多</div>
              </div>
            </div>
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/pic03.png">
              </div>
              <div class="index-news-info">
                <div class="index-news-info-title cm-ellipsis-1">酒藤知己映初心</div>
                <p class="index-news-info-des cm-ellipsis-2">2019年8月22日，珠海御谷生物科技参加酒藤知己映初心活动珠海御谷生物科技参加酒藤知己映初心活动。。。</p>
                <div class="index-news-info-more" @click="goNewsDetaile(1)">查看更多</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>
    </div>
  </div>
</template>

<script>
  import CommonFooter from '@/components/CommonFooter'
  import { Toast } from 'vant'
  export default {
    name: "home",
    data() {
        return {
          title: '首页',
          active: 2,
          show: false,
          SwiperImg: [
            require('../../assets/images/banner01.png'),
            require('../../assets/images/banner01.png'),
            require('../../assets/images/banner01.png')
          ]
        }
    },
    created(){

    },
    methods:{
      goProductdetail(id){
        this.$router.toGo('/product/productdetail/'+id);
      },
      goToast(){
        this.show = true
      },
      goNewsDetaile(id){
        this.$router.toGo('/news/newsdetail/'+id);
      }
    },
    components:{
      CommonFooter
    }
  }
</script>

<style scoped lang="less">
  @import "../../styles/index.less";
  @import "../../styles/variable.less";
  .page-content{
    .home-bannerBox {
       100%;
      .van-swipe {
         100%;
        height: 100%;
        .bannerImg {
           100%;
          height: 100%;
          pointer-events: none;
        }
      }
    }
  }
  .index-intro {
     100%;
    background: #ffffff;
  }
  .index-intro-content {
    margin: 50px auto;
  }
  .index-intro-info {
    .w(671);
    background-image: url(../../assets/images/bg01.png);
    box-shadow:0 4px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    .padding(30,0);
    margin: 0 auto;
  }
  .index-intro-info-title {
    text-align: center;
    font-family: PingFang-SC-Medium;
    .fs(30);
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
    font-weight: 600;
    .mb(18);
  }

  .index-intro-left:before {
    position:absolute;
    content:"";
    bottom:12px;
    left:6px;
    top:80%;
    37%;
    background:#b9b9b9;
    z-index:-1;
    -webkit-box-shadow: 0 20px 15px #b9b9b9;
    -moz-box-shadow: 0 20px 15px #b9b9b9;
    box-shadow: 0 20px 15px #b9b9b9;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);

  }
  .index-intro-right:before {
    position:absolute;
    content:"";
    bottom:12px;
    right: 6px;
    top:80%;
    37%;
    background:#b9b9b9;
    z-index:-1;
    -webkit-box-shadow: 0 20px 15px #b9b9b9;
    -moz-box-shadow: 0 20px 15px #b9b9b9;
    box-shadow: 0 20px 15px #b9b9b9;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
  }
</style>

product页面基本是纯静态的

//product
<template>
  <div class="content-box">
    <div class="page-content">
      <div class="news-banner">
        <img src="../../assets/images/bannerproduct.png">
      </div>
      <div class="index-news">
        <div class="index-news-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">藤茶系列</span>
              <span class="index-pro-ywtitle">Ampelopsis tea series</span>
            </div>
          </div>
          <div class="product-con">
            <div class="product-con-top">
              <div class="product-top-left">
                <div class="product-top-left-img"><img src="../../assets/images/pic05.png"></div>
                <div class="product-top-left-info">
                  <div class="product-top-left-title cm-ellipsis-1">醉藤你</div>
                  <div class="product-top-left-mtitle cm-ellipsis-1">含化型即溶茶</div>
                  <p class="cm-ellipsis-1">含化冲泡两用</p>
                  <p class="cm-ellipsis-1">商务人士交际应酬好伴侣</p>
                  <p class="cm-ellipsis-1">先苦后甜“肝”之如饴</p>
                  <div class="product-top-left-btn" @click="goProductdetail(2)">查看详情 &gt;&gt;</div>
                </div>
              </div>
              <div class="product-top-left">
                <div class="product-top-left-info">
                  <div class="product-top-left-title cm-ellipsis-1">金藤爽</div>
                  <div class="product-top-left-mtitle cm-ellipsis-1">含化型即溶茶</div>
                  <p class="cm-ellipsis-1">含化冲泡两用</p>
                  <p class="cm-ellipsis-1">一条入口 咽喉倍感舒爽</p>
                  <p class="cm-ellipsis-1">轻装出行 方便携带</p>
                  <div class="product-top-left-btn" @click="goProductdetail(1)">查看详情 &gt;&gt;</div>
                </div>
                <div class="product-top-left-img"><img src="../../assets/images/pic06.png"></div>
              </div>
            </div>
            <div class="product-con-bottom">
              <div class="product-bottom-list" @click="goProductdetail(3)">
                <img class="product-bottom-pic" src="../../assets/images/pic07.png">
                <div class="product-bottom-info">
                  <div class="prouct-bottom-infotxt">
                    <div class="product-bottom-info-title cm-ellipsis-1">轻养型即溶茶·酒藤知己</div>
                    <div class="product-bottom-info-des cm-ellipsis-1">呵护‘益’生 健康随行</div>
                  </div>
                </div>
              </div>
              <div class="product-bottom-list" @click="goProductdetail(4)">
                <img class="product-bottom-pic" src="../../assets/images/pic08.png">
                <div class="product-bottom-info">
                  <div class="prouct-bottom-infotxt">
                    <div class="product-bottom-info-title cm-ellipsis-1">风味型即溶茶·明前绿藤</div>
                    <div class="product-bottom-info-des cm-ellipsis-1">明前嫩叶 口感清雅 </div>
                  </div>
                </div>
              </div>
              <div class="product-bottom-list" @click="goProductdetail(5)">
                <img class="product-bottom-pic" src="../../assets/images/pic09.png">
                <div class="product-bottom-info">
                  <div class="prouct-bottom-infotxt">
                    <div class="product-bottom-info-title cm-ellipsis-1">风味型即溶茶·玫瑰紫藤</div>
                    <div class="product-bottom-info-des cm-ellipsis-1">重瓣玫瑰 花香四溢</div>
                  </div>
                </div>
              </div>
              <div class="product-bottom-list" @click="goProductdetail(6)">
                <img class="product-bottom-pic" src="../../assets/images/pic10.png">
                <div class="product-bottom-info">
                  <div class="prouct-bottom-infotxt">
                    <div class="product-bottom-info-title cm-ellipsis-1">风味型即溶茶·红袍黑藤</div>
                    <div class="product-bottom-info-des cm-ellipsis-1">精选大红袍 底蕴浓厚</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index-news">
        <div class="index-news-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">其他产品</span>
              <span class="index-pro-ywtitle">Other products</span>
            </div>
          </div>
          <div class="product-con">
            <div class="product-con-bottom">
              <div class="product-bottom-list" @click="goProductdetail(7)">
                <img class="product-bottom-pic" src="../../assets/images/pic11.png">
                <div class="product-bottom-info">
                  <div class="prouct-bottom-infotxt">
                    <div class="product-bottom-info-title cm-ellipsis-1">藤之露茶具·碧波水漾</div>
                    <div class="product-bottom-info-des cm-ellipsis-1">如波似纹 晶莹剔透</div>
                  </div>
                </div>
              </div>
              <div class="product-bottom-list" @click="goProductdetail(8)">
                <img class="product-bottom-pic" src="../../assets/images/pic12.png">
                <div class="product-bottom-info">
                  <div class="prouct-bottom-infotxt">
                    <div class="product-bottom-info-title cm-ellipsis-1">藤之露配套饮水机</div>
                    <div class="product-bottom-info-des cm-ellipsis-1">方便快捷 安全可靠</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>
    </div>
  </div>
</template>

<script>
  import CommonFooter from '@/components/CommonFooter'
  export default {
    name: "product",
    data(){
      return {

      }
    },
    components:{
      CommonFooter
    },
    mounted(){
    },
    methods:{
      goProductdetail(id){
        if(id == 8) {
          this.$toast("暂无该产品")
        }else{
          this.$router.toGo('/product/productdetail/'+id);
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";

</style>

news页面有个分页

//news.vue
<template>
  <div class="content-box">
    <div class="page-content">
      <div class="news-banner">
        <img src="../../assets/images/bannernews.png">
      </div>
      <div class="index-news">
        <div class="index-news-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">新闻资讯</span>
              <span class="index-pro-ywtitle">New Information</span>
            </div>
          </div>
          <div class="index-news-con">
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/pic03.png">
              </div>
              <div class="index-news-info">
                <div class="index-news-info-title cm-ellipsis-1">酒藤知己映初心</div>
                <p class="index-news-info-des cm-ellipsis-2">茶，源于中国，经历千百年岁月蹉跎已经成为了中华文化的核心之一，发展至今已经涵盖了,岁月蹉跎已经成为了中华文化的核心之一</p>
                <div class="index-news-info-more" @click="goNewsDetaile(1)">查看更多</div>
              </div>
            </div>
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/pic03.png">
              </div>
              <div class="index-news-info">
                <div class="index-news-info-title cm-ellipsis-1">酒藤知己映初心</div>
                <p class="index-news-info-des cm-ellipsis-2">2019年8月22日，珠海御谷生物科技参加酒藤知己映初心活动珠海御谷生物科技参加酒藤知己映初心活动。。。</p>
                <div class="index-news-info-more" @click="goNewsDetaile(2)">查看更多</div>
              </div>
            </div>
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/pic03.png">
              </div>
              <div class="index-news-info">
                <div class="index-news-info-title cm-ellipsis-1">酒藤知己映初心</div>
                <p class="index-news-info-des cm-ellipsis-2">2019年8月22日，珠海御谷生物科技参加酒藤知己映初心活动珠海御谷生物科技参加酒藤知己映初心活动。。。</p>
                <div class="index-news-info-more" @click="goNewsDetaile">查看更多</div>
              </div>
            </div>
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/pic03.png">
              </div>
              <div class="index-news-info">
                <div class="index-news-info-title cm-ellipsis-1">酒藤知己映初心</div>
                <p class="index-news-info-des cm-ellipsis-2">2019年8月22日，珠海御谷生物科技参加酒藤知己映初心活动珠海御谷生物科技参加酒藤知己映初心活动。。。</p>
                <div class="index-news-info-more" @click="goNewsDetaile">查看更多</div>
              </div>
            </div>
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/pic03.png">
              </div>
              <div class="index-news-info">
                <div class="index-news-info-title cm-ellipsis-1">酒藤知己映初心</div>
                <p class="index-news-info-des cm-ellipsis-2">2019年8月22日，珠海御谷生物科技参加酒藤知己映初心活动珠海御谷生物科技参加酒藤知己映初心活动。。。</p>
                <div class="index-news-info-more" @click="goNewsDetaile">查看更多</div>
              </div>
            </div>
          </div>
          <div>
            <van-pagination
              v-model="currentPage"
              :show-page-size="3"
              :total-items="30"
              :items-per-page="6"
              :prev-text="prev"
              :next-text="next"
              force-ellipses
              @change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>
    </div>
  </div>
</template>

<script>
    import CommonFooter from '@/components/CommonFooter'
    export default {
        name: "news",
        data(){
          return {
            currentPage:1,
            prev:'<',
            next:'>'
          }
        },
        methods: {
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          },
          goNewsDetaile(id){
            this.$router.toGo('/news/newsdetail/'+id);
          }
        },
        components:{
          CommonFooter
        }
    }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";

</style>
<style lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";
  .van-pagination {
    justify-content: center;
    text-align: center;
    .fs(24);
    height: 22px;
    .van-pagination__item {
       22px;
      min- 22px;
      height: 22px;
      line-height: 22px;
      color: #ffffff;
      margin-right: 5px;
      background-color: #999999;
      flex: none;
    }
  }
  .van-pagination .van-pagination__item--active {
    background: #8fc31f!important;
    color: #ffffff;
  }
  .van-pagination__prev {
    margin-right: 10px!important;
  }
  .van-pagination__next {
    margin-left: 5px;
  }
</style>

newsdetail页面

<template>
  <div class="content-box">
    <div class="page-content">
      <div class="news-banner">
        <img src="../../assets/images/bannernews.png">
      </div>
      <div class="index-news">
        <div class="index-news-content newsdetail-contentbox">
          <div class="newsdetail-titlebox">
            <div class="newsdetail-title">郭玉琦：速溶藤茶开创中国茶品新时代</div>
<!--            <div class="newsdetail-goback">返回 &gt;&gt;</div>-->
          </div>
          <div class="newsdetail-time">发布时间： 2019-08-28 14:52:40 | 来源：中国网食品</div>
          <div class="newsdetail-content">
            <p>茶，源于中国，经历千百年岁月蹉跎已经成为了中华文化的核心之一，发展至今已经涵盖了六大类数百个品种，并且自唐宋以来就远渡重洋，一度被视为来自东方的至宝，然而如今伴随着经济发展，生活节奏的加快，以年轻人为代表的群体逐渐难以静下心来按照中华传统的规矩来品茶，同时又受到以咖啡为代表的西方饮品大力冲击，中国茶亟需复兴！</p>
            <p>尽管在不断的发展过程中，为了简化饮茶步骤，适应快节奏生活，一批批茶包，茶饮料等产品开始走进市场，但是从根本上讲，完全无法呈现茶叶的原汁原味，也无法保留茶中的有益成分，反倒是为了迎合人们的喜爱，大量使用糖和食品添加剂调味，并不利于身体健康。</p>
            <p>如今珠海御谷生物科技有限公司董事总经理郭玉琦先生向我们介绍了以中国藤茶为源开发的藤の露系列产品，以藤茶为本，通过萃取技术完美保留了中国茶的色香味和各种对人体有益的有效成分，又通过标准化的生产流程，为我们带来了方便，健康，实惠的新时代茶产品。</p>
            <img src="../../assets/images/news01.png">
            <div class="newsdetail-imgdes">珠海御谷生物科技有限公司董事总经理郭玉琦先生</div>
            <p>藤茶并不为大众所熟知，从根本上讲，藤茶似茶而非茶，原本是生长在张家界云雾山海拔800至1500米的一种野生藤科草本植物，因富含对身体十分有益的黄酮成分而走进了人们的视野，而经过不断的实验研究，将藤茶开发成了真正的茶产品未来将走进千家万户。</p>
            <p>郭玉琦先生介绍,藤の露系列以藤茶为本源，根据产品定位不同可以分为三类： 第一类是三款传统口味速溶茶产品，即为女性量身打造的“玫瑰紫藤”；为喜欢醇厚南方茶的顾客设计的“红袍黑藤”和适应大众群体的“明前绿藤”，均由 70％的藤茶和30%的传统茶而制成，特别的是产品采用了合作团队研发的冷萃技术，能够100%提取茶中成分，并且完整保留茶叶的色香味。</p>
            <img src="../../assets/images/news02.png">
            <div class="newsdetail-imgdes">藤の露速溶茶产品</div>
            <p>第二类也是一款速溶茶产品—酒藤知己，是采用冷萃技术提取生产的的速溶纯藤茶产品。根据对于藤茶的研究，其具有一定缓解饮酒后身体不适的功能，因此顾名思义，本产品就如同饮酒的知己伴侣一样，作为一款健康饮品，为身体保驾护航。</p>
            <p>第三类是研制的两款含化颗粒产品，即醉藤你和金藤爽。以泡茶饮用为例，茶叶在沏泡过程中，有效成分并不能完全溶出，而废弃的茶渣中往往还还残留很多有益成分，因此受到中国传统擂茶和日本抹茶启发，产品应用超细破壁技术，将茶叶完全粉碎，并添加薄荷脑等成分制成含化颗粒，微粒入口即化，短短数分钟，茶中精华就能为人体所吸收，尤其配合藤茶中富含的黄酮，二氢杨梅素等成分，不仅有益身体健康，还能缓解饮酒造成的身体负担。</p>
            <img src="../../assets/images/news03.png">
            <div class="newsdetail-imgdes">藤の露速溶茶产品</div>
            <p>产品原料新颖，设计独特，更重要的是这是国内第一次成功进行茶产品的标准化生产，以速溶茶为例，采用独立小包装，每小袋2g可沏泡250mL。这对消费者来讲，无疑是化繁为简，大大方便了日常饮茶，能使越来越多的人重新拾起中国茶，重新品味中国茶，再次将中华茶文化传承下去；对于茶品行业来讲，这也是史无前例的，自古中国茶因为品类繁多，因此难以进行统一标准的工业化生产，这为新时代茶产品的生产制造开创了先河。</p>
            <img src="../../assets/images/news04.png">
            <div class="newsdetail-imgdes">珠海御谷生物科技有限公司总裁曹晓峰先生</div>
            <p>不仅仅产品受人瞩目，在包装上也下足了功夫，封面融合了我国著名抽象画艺术家的艺术作品，将传统与现代相结合，将茶文化与印象派艺术相结合，将鲜艳的色彩同朴实中国茶进行碰撞，简约又不失瑰丽。同时郭玉琦先生表示，这是一系列真正面对普通百姓的产品，因此响应国家勤俭节约的政策号召，藤の露系列坚决抵制过度包装，一切化繁为简，通过健康的产品，实惠的价格树立口碑，走向千家万户。  </p>
            <img src="../../assets/images/news05.png">
            <div class="newsdetail-imgdes">藤の露系列产品精美包装</div>
            <p>藤の露系列产品通过发布会亮相以后，将通过线上京东，天猫等网络电商平台和线下以“千城万店”为规划，建设体验生活馆相结合的方式进行推广，正式进入市场，一场现代茶产品的改革正在悄然进行，中华茶文化的传承和升华指日可待！</p>
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>
    </div>
  </div>
</template>

<script>
    import CommonFooter from '@/components/CommonFooter'
    export default {
        name: "news",
        data(){
          return {
            currentPage:1,
            prev:'<',
            next:'>'
          }
        },
        mounted(){
          console.log(this.$route.params.id);//获取路由的参数
        },
        methods: {
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          }
        },
        components:{
          CommonFooter
        }
    }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";

</style>
<style lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";
  .van-pagination {
    justify-content: center;
    text-align: center;
    .fs(24);
    height: 22px;
    .van-pagination__item {
       22px;
      min- 22px;
      height: 22px;
      line-height: 22px;
      color: #ffffff;
      margin-right: 5px;
      background-color: #999999;
      flex: none;
    }
  }
  .van-pagination .van-pagination__item--active {
    background: #8fc31f!important;
    color: #ffffff;
  }
  .van-pagination__prev {
    margin-right: 10px!important;
  }
  .van-pagination__next {
    margin-left: 5px;
  }
</style>

接下来是cooperation页面

//cooperation
<template>
  <div class="content-box">
    <div class="page-content">
      <div class="news-banner">
        <img src="../../assets/images/bannercooperation.png">
      </div>
      <div class="index-news">
        <div class="index-news-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">渠道合作</span>
              <span class="index-pro-ywtitle">Channel cooperation</span>
            </div>
          </div>
          <div class="cooperation-info">
            <p>藤之露系列即溶茶，在品牌推广、营销管理、督导培训、售后服务等全方面支持加盟商，强化藤之露品牌在加盟区域内的综合影响力的同时，不断协助加盟商获取更多发展空间。</p>
            <p>联系人：郭先生    加盟电话：19928336699</p>
            <p>联系地址：广东省珠海市香洲区兴华路106号</p>
          </div>
        </div>
      </div>
      <div class="cooperation-ideaBox">
        <div class="cooperation-idea-con">
          <div class="cooperation-idea-li">
            <div class="cooperation-idea-index">01</div>
            <div class="cooperation-idea-text">统一的经营理念</div>
          </div>
          <div class="cooperation-idea-li">
            <div class="cooperation-idea-index">02</div>
            <div class="cooperation-idea-text">注重产品的品质</div>
          </div>
          <div class="cooperation-idea-li">
            <div class="cooperation-idea-index">03</div>
            <div class="cooperation-idea-text">大力度的品牌支持</div>
          </div>
          <div class="cooperation-idea-li">
            <div class="cooperation-idea-index">04</div>
            <div class="cooperation-idea-text">实现活动落地支持</div>
          </div>
          <div class="cooperation-idea-li">
            <div class="cooperation-idea-index">05</div>
            <div class="cooperation-idea-text">自我提升进修机会</div>
          </div>
          <div class="cooperation-idea-li">
            <div class="cooperation-idea-index">06</div>
            <div class="cooperation-idea-text">可持续的产品开发</div>
          </div>
        </div>
      </div>
      <div class="index-news-content">
        <div class="cm-title-box" style="padding-top: 30px;">
          <img class="cm-title-topimg" src="../../assets/images/icon08.png">
          <div class="index-pro-title-textbox cm-title-bgbox">
            <span class="index-pro-zwtitle">加盟须知</span>
            <span class="index-pro-ywtitle">Affiliate Policy</span>
          </div>
        </div>
        <div class="cooperation-info pconter">
          <p>认同藤之露品牌文化；</p>
          <p>了解公司和加盟商的关系，愿意服从公司管理；</p>
          <p>对消费需求有一定了解，具备市场营销意识和店铺管理知识；</p>
          <p>具有一定的经济、投资实力；</p>
          <p>具有良好的商业信誉及商业道德。</p>
        </div>
      </div>
      <div class="cooperation-leavemsg">
        <div class="cooperation-leavemsg-con">
          <div class="cooperation-leavemsg-title">加盟留言</div>
          <div class="cooperation-leavemsg-info">
            <div class="cooperation-leavemsg-info-inputbox">
              <span>姓名：</span>
              <input class="cooperation-leavemsg-info-input" type="text" name="name" autocomplete="off">
            </div>
            <div class="cooperation-leavemsg-info-inputbox">
              <span>电话：</span>
              <input class="cooperation-leavemsg-info-input" type="text" name="phone" autocomplete="off">
            </div>
            <div class="cooperation-leavemsg-info-inputbox">
              <span>留言：</span>
              <textarea class="cooperation-leavemsg-info-input cooperation-textarea" type="text" name="name" autocomplete="off"></textarea>
            </div>
            <div class="cooperation-leavemsg-info-btnbox">
              <span class="cooperation-leavemsg-info-btn">提 交</span>
              <span class="cooperation-leavemsg-info-tip">*提交留言后会有专门给您联系！</span>
            </div>
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>
    </div>
  </div>
</template>

<script>
  import CommonFooter from '@/components/CommonFooter'
    export default {
      name: "cooperation",
      components:{
        CommonFooter
      }
    }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";
</style>

接下来是join页面

//join.vue
<template>
  <div class="content-box">
    <div class="page-content">
      <div class="news-banner">
        <img src="../../assets/images/bannerjoin.png">
      </div>
      <div class="index-news">
        <div class="index-news-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">人才理念</span>
              <span class="index-pro-ywtitle">Talent Concept</span>
            </div>
          </div>
          <div class="join-intro">
            <p class="p1">秉持“尊重人的价值、开发人的潜能、升华人的心灵”人才工作宗旨，我们希望在这里，普通的人变成优秀的人，优秀的人变成卓越的人，源源不断的人在这里实现自己的人生梦想。</p>
            <div class="p2">
              <p class="join-intro-spanT">尊重人的价值</p>
              <p class="join-intro-span">倡导企业价值与员工价值的共同成长，随着企业的发展，员工也获得与自身付出相适应的报酬与岗位，实现价值认可。</p>
              <p>要让员工因有御谷生物科技的工作经历而产生御谷生物品牌效应，拥有更高的市场价值。</p>
            </div>
            <div class="p3">
              <p class="join-intro-spanT">开发人的潜能</p>
              <p class="join-intro-span">御谷把人才发展置于战略高度，不断给员工提供学习的机会、工作的机会、挑战自我的机会，这是御谷对人最大的尊重，对员工最大的善。</p>
              <p>御谷努力优化人才选拔、培养、使用、保留机制，强调业绩导向使用人，科学评价选拔人，全方位多层次培养人，充分挖掘人的潜能，做到人尽其才。</p>
            </div>
            <div class="p4">
              <p class="join-intro-spanT">升华人的心灵</p>
              <p class="join-intro-span">遵循“一切以人为本，人口驱动增长，尊重人文精神，改善人们生活” 的经营理念，御谷所有业务活动为人们生活得更好而存在。这是御谷人工作、生活、成长的意义，也是御生人更高层次的精神追求。</p>
              <p>御谷通过文化培训、价值观塑造、机制激励、工作历练等方式，营造一种催人奋进、促人成长的氛围，激发员工的事业心、责任感、使命感，引领员工探索工作、生命的意义，致力于更高层次的精神升华，实现超越个人利益之上的追求。</p>
            </div>

            <div class="cm-title-box">
              <img class="cm-title-topimg" src="../../assets/images/icon08.png">
              <div class="index-pro-title-textbox cm-title-bgbox">
                <span class="index-pro-zwtitle">人才引进</span>
                <span class="index-pro-ywtitle">Talent introduction</span>
              </div>
            </div>
            <div class="join-recruitment">
              <div class="join-recruitment-box">
                <div class="join-recruitment-title">岗位名称：平面设计<span class="join-down" :class="isShow?'join-up':''" @click="onHide"></span></div>
                <div class="join-recruitment-info" v-show="isShow">
                  <div class="join-recruitment-info-title">岗位名称： 平面设计</div>
                  <div class="join-recruitment-info-stile">岗位职责：</div>
                  <p>1、协助负责公司品牌相关及周边延展的平面设计；</p>
                  <p>2、协助线下会议、品牌推广等活动，协助制作相关的配套设计；</p>
                  <p>3、协助采购物料制作输出；</p>
                  <p>4、协助负责线上市场推广物料设计；</p>
                  <p>5、完成领导交办的其他工作任务。</p>
                  <div class="join-recruitment-info-stile">任职要求：</div>
                  <p>1、本科及以上学历，美术相关专业；</p>
                  <p>2、能熟练使用Photoshop/illustrator/Coreldrew/等设计软件；</p>
                  <p>3、主动性高、耐心细致，能准确表达设计思路，</p>
                  <p>4、具备良好的团队精神和沟通能力，责任心强。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>
    </div>
  </div>
</template>

<script>
  import CommonFooter from '@/components/CommonFooter'
  export default {
    name: "join",
    data(){
      return {
        isShow: true
      }
    },
    methods:{
      onHide(){
        this.isShow = !this.isShow;
      }
    },
    components:{
      CommonFooter
    }
  }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";
</style>

about页面

//about
<template>
  <div class="content-box">
    <div class="page-content">
      <div class="news-banner">
        <img src="../../assets/images/bannerabout.png">
      </div>
      <div class="index-news">
        <div class="index-news-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">公司简介</span>
              <span class="index-pro-ywtitle">Company Profile</span>
            </div>
          </div>
          <div class="about-intro">
            <p class="p1">珠海御谷生物科技有限公司组建于2009年，坐落在有着“中国浪漫之城”之称的广东省珠海市。本公司是一家集养生食品的研发、生产、销售于一体的创新型企业，主要产品有藤之露品牌即溶茶系列产品、御生品牌健康饮料系列产品。</p>
            <p class="p2">我们秉承品质是企业生命线的理念，凭借良好的管理模式、先进的生产工艺及完善的检测手段，严把质量控制关，各项产品质量符合国家食品标准及出口要求。目前，我们的产品越来越被国内外广大客户所喜爱。</p>
            <p class="p3">我们非常重视技术研发的投入，凝聚全员智慧，奋力攻坚克难，取得了令人骄傲和值得赞颂的成绩。本公司在日本大阪设有研发中心，并且在产品开发上与多家日本知名公司有合作关系。</p>
            <p class="p4">公司下设行政部、生管部、品控部、研发部、营销部、技术服务部，销售服务网络辐射至全国20多个省、市、自治区，以及日本、东南亚地区。</p>
            <p class="p4">热忱欢迎国内外客户前来我司参观指导，珠海御谷生物科技有限公司全体员工期待与您的真诚合作，谢谢！</p>
          </div>
          <div class="index-news-con">
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/icon13.png">
              </div>
              <div class="index-news-info about-info">
                <div class="index-news-info-title about-info-title">核心理念</div>
                <p class="index-news-info-des about-info-des">以“诚信、责任、敬业、创新、共赢”为企业核心理念。</p>
              </div>
            </div>
            <div class="index-news-box">
              <div class="index-news-info about-info">
                <div class="index-news-info-title about-info-title">使命</div>
                <p class="index-news-info-des about-info-des">依托现代生物科技和持续创新能力，让自然和科学结合，打造差异化的健康产品，倡导快乐生活，立志成为健康行业的领先品牌！</p>
              </div>
              <div class="index-news-img">
                <img src="../../assets/images/icon14.png">
              </div>
            </div>
            <div class="index-news-box">
              <div class="index-news-img">
                <img src="../../assets/images/icon15.png">
              </div>
              <div class="index-news-info about-info">
                <div class="index-news-info-title about-info-title">愿景</div>
                <p class="index-news-info-des about-info-des">致力于创造更健康、更和谐、更美好的生活。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>
    </div>
  </div>
</template>

<script>
    import CommonFooter from '@/components/CommonFooter'
    export default {
      name: "about",
      components:{
        CommonFooter
      }
    }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";
</style>

contact页面

//contact.vue
<template>
  <div class="content-box">
    <div class="page-content">
      <div class="news-banner">
        <img src="../../assets/images/bannercontact.png">
      </div>
      <div class="index-news">
        <div class="index-news-content">
          <div class="cm-title-box">
            <img class="cm-title-topimg" src="../../assets/images/icon08.png">
            <div class="index-pro-title-textbox cm-title-bgbox">
              <span class="index-pro-zwtitle">联系我们</span>
              <span class="index-pro-ywtitle">New Information</span>
            </div>
          </div>
          <div class="contact-map">
            <div class="contact-mapbox" id="container"><img src="../../assets/images/pic04.png"></div>
            <div class="contact-map-text">御谷生物科技有限公司所在地理位置图</div>
          </div>
          <div class="contact-info">
            <div class="contact-info-des">
              <img class="contact-info-icon" src="../../assets/images/icon10.png" title="广东省珠海市香洲区兴华路106号">
              <div class="contact-info-text">广东省珠海市香洲区兴华路106号</div>
            </div>
            <div class="contact-info-des">
              <img class="contact-info-icon" src="../../assets/images/icon11.png" title="电话：400-6062-316">
              <div class="contact-info-text">电话：400-6062-316</div>
            </div>
            <div class="contact-info-des">
              <img class="contact-info-icon" src="../../assets/images/icon12.png" title="周一到周五 09：00-18：00">
              <div class="contact-info-text">周一到周五 09：00-18：00</div>
            </div>
          </div>
        </div>
      </div>
      <CommonFooter></CommonFooter>
    </div>
  </div>
</template>

<script>
  import CommonFooter from '@/components/CommonFooter'
    export default {
        name: "contact",
        components:{
          CommonFooter
        }
    }
</script>

<style scoped lang="less">
  @import "~styles/index.less";
  @import "~styles/variable.less";

</style>