Skip to content

D
dashboard
Commit 08316c17 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

大更新

parent fe244488
Show whitespace changes
Inline Side-by-side
Showing with 344 additions and 23 deletions
src/App.vue
View file @ 08316c17
......@@ -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/assets/images/fish.png 0 → 100755
View file @ 08316c17
This diff is collapsed.
src/assets/images/industry.png 0 → 100755
View file @ 08316c17
This diff is collapsed.
src/assets/images/special.png 0 → 100755
View file @ 08316c17
This diff is collapsed.
src/assets/images/stars-bg.png 100644 → 100755
View replaced file @ fe244488 View file @ 08316c17
This diff is collapsed.
src/router/index.js
View file @ 08316c17
......@@ -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
View file @ 08316c17
......@@ -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 0 → 100644
View file @ 08316c17
<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
View file @ 08316c17
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment