修改

src/views/guangdong/gd-flow.vue

@@ -11,6 +11,8 @@
       </div>
       <div class="outer">
         <span class="move-dot"/>
+        <div class="repair top" />
+        <div class="repair bottom" />
         <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`)" />
@@ -95,7 +97,7 @@ export default {
     startMove() {
       this.timer = setInterval(() => {
         this.cur += 1
-        if (this.cur > this.list.length) {
+        if (this.cur >= this.list.length) {
           this.cur = 0
         }
       }, 4000)
@@ -170,6 +172,7 @@ export default {
       >img
         width 3rem
         height 3rem
+        animation shine 2s reverse linear infinite
       >p
         color #fff
         font-family $font-pang
@@ -177,6 +180,7 @@ export default {
         &.on
           color $color-map(1)
           font-size 1.5rem
+          text-shadow 0.1rem 0.1rem 0.3rem $color-map(0.8)
     .outer
       width 80rem
       height 45rem
@@ -185,6 +189,17 @@ export default {
       padding 0.5rem
       position relative
       overflow hidden
+      .repair
+        width 0.5rem
+        height 0.7rem
+        position absolute
+        left 0
+        border 0.1rem solid $color-map(0.3)
+        border-right none
+        &.top
+          top -0.1rem
+        &.bottom
+          bottom -0.1rem
       .move-dot
         position absolute
         display block
@@ -249,4 +264,15 @@ export default {
     transform rotate(180deg)
   }
 }
+@keyframes shine {
+  0% {
+    transform scale(1)
+  }
+  50% {
+    transform scale(1.5)
+  }
+  100% {
+    transform scale(1)
+  }
+}
 </style>

src/views/guangdong/gd-home.vue

@@ -9,7 +9,7 @@
       :style="`background-image: url(${require('@/assets/images/home-card-bg.png')})`"
     >
       <p><span/>{{titles[index]}}</p>
-      <img :src="require(`@/assets/images/${item}.png`)"/>
+      <img :src="require(`@/assets/images/screenshots/${item}.png`)"/>
     </div>
   </div>
 </template>
@@ -23,8 +23,8 @@ export default {
   },
   data() {
     return {
-      routes: ['industry', 'special', 'production', 'trade', 'fish', 'disease', 'enterprise'],
-      titles: ['广东省渔业产业布局分析专题', '广东省渔业特色种苗专题', '广东省渔业生产专题', '渔业种业综合交易平台交易分析专题', '广东省罗非鱼专题', '广东省水生动物病害数据分析专题', '广东省渔业企业介绍专题'],
+      routes: ['industry', 'special', 'production', 'trade', 'fish', 'disease', 'enterprise', 'flow'],
+      titles: ['广东省渔业产业布局分析专题', '广东省渔业特色种苗专题', '广东省渔业生产专题', '渔业种业综合交易平台交易分析专题', '广东省罗非鱼专题', '广东省水生动物病害数据分析专题', '广东省渔业企业介绍专题', '操作流程'],
     }
   },
   methods: {
@@ -39,34 +39,32 @@ export default {
 #container
   $gd-layout()
   grid-template-areas \
-    '. theme .'\
-    '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 theme .'\
+    'box1 box2 box3 box4'\
+    'box5 box6 box7 box8'
+  grid-template-rows 4rem 1fr 1fr
+  grid-template-columns 1fr 1fr 1fr 1fr
   .theme
     grid-area theme
-    width 150%
-    margin-left -25%
+    width 100%
   .box
     width 100%
     height 100%
     background-size 100% 100%
     padding 2rem
     cursor pointer
+    display flex
+    flex-direction column
+    justify-content center
+    &:hover
+      background-color $color-map(0.3)
     >p
       display flex
       align-items center
       color #b3ecff
-      font-size 1.1rem
+      font-size 1.2rem
       font-weight bold
-      margin 0.5rem 0
+      margin-bottom 1rem
       >span
         display inline-block
         margin-right 0.8rem
@@ -75,21 +73,21 @@ export default {
         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)
+      height 56%
+  .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
+  .box8
+    grid-area box8
 </style>