大更新

src/App.vue

@@ -11,7 +11,7 @@ export default {
   name: 'App',
   data() {
     return {
-      routes: ['industry', 'special', 'production', 'trade', 'fish', 'disease', 'enterprise'],
+      routes: ['home', 'industry', 'special', 'production', 'trade', 'fish', 'disease', 'enterprise', 'flow'],
       cur: 0,
       timer: null,
       timeOuter: null,
@@ -19,11 +19,11 @@ export default {
     }
   },
   mounted() {
-    // this.$router.push({
-    //   name: this.routes[this.cur]
-    // })
-    // this.setTimer()
-    // document.body.addEventListener('mousemove', this.removeTimer)
+    this.$router.push({
+      name: this.routes[this.cur]
+    })
+    this.setTimer()
+    document.body.addEventListener('mousemove', this.removeTimer)
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -49,14 +49,17 @@ export default {
   },
   watch: {
     $route(to, from) {
-      if (to.name === 'home') {
-        clearInterval(this.timer)
-        clearTimeout(this.timeOuter)
-        this.timer = null
-        this.cur = 0
-      } else {
+      if (to.name && this.cur != this.routes.indexOf(to.name)) {
         this.cur = this.routes.indexOf(to.name)
       }
+      // if (to.name === 'home') {
+      //   clearInterval(this.timer)
+      //   clearTimeout(this.timeOuter)
+      //   this.timer = null
+      //   this.cur = 0
+      // } else {
+      //   this.cur = this.routes.indexOf(to.name)
+      // }
     }
   }
 }

src/router/index.js

@@ -12,6 +12,7 @@ const GDDisease = () => import('@/views/guangdong/gd-disease') // 广东 - 疫
 const GDFish = () => import('@/views/guangdong/gd-fish') // 广发 - 罗非鱼专题
 const GDIndustry = () => import('@/views/guangdong/gd-industry') // 广东 - 产业分析专题
 const GDSpecial = () => import('@/views/guangdong/gd-special') // 广东 - 特色种苗专题
+const GDFlow = () => import('@/views/guangdong/gd-flow') // 广东 - 操作流程
 
 Vue.use(Router)
 
@@ -19,7 +20,7 @@ export default new Router({
   routes: [
     {
       path: '/',
-      redirect: '/industry'
+      redirect: '/home'
     },
     {
       path: '/home',
@@ -61,6 +62,11 @@ export default new Router({
       name: 'enterprise',
       component: GDEnterprise
     },
+    {
+      path: '/flow',
+      name: 'flow',
+      component: GDFlow
+    },
     // {
     //   path: '/main',
     //   name: 'main',

src/views/guangdong/components/title.vue

@@ -38,6 +38,7 @@ export default {
   min-width 60%
   margin 0 auto
   height 4.2rem
+  cursor pointer
   >img
     position absolute
     width 100%

src/views/guangdong/gd-flow.vue

+<template>
+  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
+    <ThemeTitle class="theme">操作流程</ThemeTitle>
+    <div class="box">
+      <div v-for="(item, index) in list" :key="item.name" :class="`dot dot${index + 1}`" @mouseenter="showOne(index)" @mouseleave="startMove">
+        <span v-if="index > 5 && index != cur"/>
+        <img v-else-if="index > 5 && index == cur" src="@/assets/images/flow-point.png"/>
+        <p :class="cur == index ? 'on' : '' ">{{item.name}}</p>
+        <span v-if="index <= 5 && index != cur"/>
+        <img v-else-if="index <= 5 && index == cur" src="@/assets/images/flow-point.png"/>
+      </div>
+      <div class="outer">
+        <span class="move-dot"/>
+        <div class="inner">
+          <div class="detail" :style="`background-image: url(${require('@/assets/images/flow-card-bg.png')})`">
+            <img v-for="(img, i) in ((list[cur] && list[cur].imgs) || []) " :key="i" :src="require(`@/assets/images/screenshots/${img}.png`)" />
+          </div>
+      </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeTitle from './components/title'
+export default {
+  name: 'GDFlow',
+  components: {
+    ThemeTitle,
+  },
+  data() {
+    return {
+      list: [
+        {
+          name: '养殖者注册',
+          imgs: ['1-1', '1-2', '1-3'],
+        },
+        {
+          name: '原良种实名认证',
+          imgs: ['2-1', '2-2'],
+        },
+        {
+          name: '发布供应信息',
+          imgs: ['3-1'],
+        },
+        {
+          name: '平台展示供应信息',
+          imgs: ['4-1', '4-2', '4-3']
+        },
+        {
+          name: '养殖业者下单',
+          imgs: ['5-1']
+        },
+        {
+          name: '原良种企业确认订单',
+          imgs: ['6-1']
+        },
+        {
+          name: '养殖业者支付订单',
+          imgs: ['7-1']
+        },
+        {
+          name: '原良种企业发货',
+          imgs: ['8-1']
+        },
+        {
+          name: '养殖业者确认收货',
+          imgs: ['9-1']
+        },
+        {
+          name: '原良种收款',
+          imgs: ['10-1']
+        },
+        {
+          name: '养殖业者订单评论',
+          imgs: ['11-1', '11-2']
+        },
+      ],
+      cur: 0,
+      timer: null,
+    }
+  },
+  mounted() {
+    this.startMove()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+    this.timer = null
+  },
+  methods: {
+    showOne(i) {
+      clearInterval(this.timer)
+      this.cur = i
+    },
+    startMove() {
+      this.timer = setInterval(() => {
+        this.cur += 1
+        if (this.cur > this.list.length) {
+          this.cur = 0
+        }
+      }, 4000)
+    },
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+#container
+  $gd-layout()
+  grid-template-areas \
+    '.theme.'\
+    'box box box'
+  grid-template-rows 4rem 1fr
+  grid-template-columns 1fr 1fr 1fr
+  .theme
+    grid-area theme
+    width 100%
+  .box
+    grid-area box
+    display flex
+    align-items center
+    justify-content center
+    position relative
+    .dot
+      position absolute
+      height 4rem
+      top 4.8%
+      display flex
+      flex-direction column
+      justify-content space-around
+      align-items center
+      z-index 10
+      cursor pointer
+      &.dot1
+        left 15%
+      &.dot2
+        left 26%
+      &.dot3
+        left 39%
+      &.dot4
+        left 50%
+      &.dot5
+        left 64%
+      &.dot6
+        left 75%
+      &.dot7
+        top 88%
+        left 75%
+      &.dot8
+        top 88%
+        left 60%
+      &.dot9
+        top 88%
+        left 45%
+      &.dot10
+        top 88%
+        left 30%
+      &.dot11
+        top 88%
+        left 15%
+      >span
+        display block
+        padding 0.2rem
+        margin 0.5rem 0
+        width 1rem
+        height 1rem
+        background $color-map(1)
+        border-radius 50%
+        box-shadow 0 0 0 0.2rem #000, 0 0 0.8rem 0.2rem $color-map(1)
+      >img
+        width 3rem
+        height 3rem
+      >p
+        color #fff
+        font-family $font-pang
+        font-size 1.2rem
+        &.on
+          color $color-map(1)
+          font-size 1.5rem
+    .outer
+      width 80rem
+      height 45rem
+      border 0.1rem solid $color-map(0.3)
+      border-left none
+      padding 0.5rem
+      position relative
+      overflow hidden
+      .move-dot
+        position absolute
+        display block
+        width 20rem
+        height 0.2rem
+        background linear-gradient(to right, #0094ff, #1efbff, #fff, #1efbff, #0094ff)
+        box-shadow 0 0 1rem 0.8rem $color-map(0.3)
+        animation move 4s ease-in-out infinite
+      .inner
+        width 100%
+        height 100%
+        border 0.1rem solid $color-map(0.3)
+        border-left none
+        display flex
+        align-items center
+        justify-content center
+        .detail
+          display flex
+          justify-content space-around
+          width 80%
+          height 80%
+          background-size 100% 100%
+          padding 2rem
+          >img
+            width 30%
+            height 100%
+
+@keyframes move {
+  0% {
+    top 0.2rem
+    left -100%
+    transform rotate(0)
+  }
+  71% {
+    top 0.2rem
+    left 0
+    transform rotate(0)
+  }
+  80% {
+    top 0.2rem
+    left 80rem
+    transform rotate(0)
+  }
+  81% {
+    left 69.6rem
+    top 0.2rem
+    transform rotate(90deg)
+  }
+  90% {
+    left 69.6rem
+    top 99%
+    transform rotate(90deg)
+  }
+  91% {
+    left 80rem
+    top 99%
+    transform rotate(180deg)
+  }
+  100% {
+    left 0
+    top 99%
+    transform rotate(180deg)
+  }
+}
+</style>

src/views/guangdong/gd-home.vue

 <template>
   <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
-    <ThemeTitle class="theme">广东省渔业专题</ThemeTitle>
-    <div @click="click">test</div>
+    <ThemeTitle class="theme">广东省渔业大数据专题</ThemeTitle>
+    <div
+      v-for="(item, index) in routes"
+      :key="item"
+      @click="handleSelect(item)"
+      :class="`box box${index + 1}`"
+      :style="`background-image: url(${require('@/assets/images/home-card-bg.png')})`"
+    >
+      <p><span/>{{titles[index]}}</p>
+      <img :src="require(`@/assets/images/${item}.png`)"/>
+    </div>
   </div>
 </template>
 
@@ -12,9 +21,15 @@ export default {
   components: {
     ThemeTitle,
   },
+  data() {
+    return {
+      routes: ['industry', 'special', 'production', 'trade', 'fish', 'disease', 'enterprise'],
+      titles: ['广东省渔业产业布局分析专题', '广东省渔业特色种苗专题', '广东省渔业生产专题', '渔业种业综合交易平台交易分析专题', '广东省罗非鱼专题', '广东省水生动物病害数据分析专题', '广东省渔业企业介绍专题'],
+    }
+  },
   methods: {
-    click() {
-      this.$router.push({name: 'fish'})
+    handleSelect(name) {
+      this.$router.push({name})
     }
   }
 }
@@ -25,12 +40,56 @@ export default {
   $gd-layout()
   grid-template-areas \
     '. theme .'\
-    '. . .'\
-    '. . .'\
-    '. . .'
-  grid-template-rows 4rem 1fr 1fr 1fr
-  grid-template-columns 1fr 2fr 1fr
+    'box1 box2 box5'\
+    'box1 box2 box5'\
+    'box1 box2 box6'\
+    'box3 box4 box6'\
+    'box3 box4 box7'\
+    'box3 box4 box7'
+  grid-template-rows 4rem 1fr 1fr 1fr 1fr 1fr 1fr
+  grid-template-columns 1fr 1fr 1fr
+  grid-gap 0
+  padding 1rem 0 0
   .theme
     grid-area theme
-    width 80%
+    width 150%
+    margin-left -25%
+  .box
+    width 100%
+    height 100%
+    background-size 100% 100%
+    padding 2rem
+    cursor pointer
+    >p
+      display flex
+      align-items center
+      color #b3ecff
+      font-size 1.1rem
+      font-weight bold
+      margin 0.5rem 0
+      >span
+        display inline-block
+        margin-right 0.8rem
+        width 0.4rem
+        height 1rem
+        background #b3ecff
+    >img
+      width 100%
+      height 90%
+    &.box1
+      grid-area box1
+    &.box2
+      grid-area box2
+    &.box3
+      grid-area box3
+    &.box4
+      grid-area box4
+    &.box5
+      grid-area box5
+    &.box6
+      grid-area box6
+    &.box7
+      grid-area box7
+    &:hover
+      background-color $color-map(0.3)
 </style>