Skip to content

P
patzn-cloud-web-h5app-drs
Commit a33b0918 by zhuxiaomei
Options

首页修改

parent 69a1b7ee
Showing with 278 additions and 247 deletions
src/page/Home.vue
<template> <template>
<div> <div>
<div class="layout-cont home-cont"> <div class="layout-cont home-cont">
<div class="box-c box-c-1" @click="_goto('/sampling_plan/sampling_plan')"> <div class="box-c box-c-1" @click="_goto('/sampling_plan/sampling_plan')">
<img src="@/assets/home/plan.png"> <img src="@/assets/home/plan.png">
<div> <div>
<img src="@/assets/home/plan.png"></div> <img src="@/assets/home/plan.png"></div>
<div> <div>
<div class="title">我创建的抽样计划</div> <div class="title">我创建的抽样计划</div>
<!--todo 每个模块的数量--> <!--todo 每个模块的数量-->
<div class="num">3</div> <div class="num">3</div>
</div>
</div>
<div class="box-c box-c-2">
<div @click="_goto('/sampling_task/sampling_task')">
<img src="@/assets/home/task.png">
<div class="box-img">
<img src="@/assets/home/task.png"></div>
<div class="cont">
<div class="title">我的双随机任务</div>
<div class="num">4</div>
</div>
</div>
<div @click="_goto('/sampling_list/sampling_task')">
<img src="@/assets/home/task-edit.png">
<div class="box-img">
<img src="@/assets/home/task-edit.png"></div>
<div class="cont">
<div class="title">抽样信息录入</div>
<div class="num">4</div>
</div>
</div>
</div>
<div class="box-c box-c-3">
<div @click="_goto('/message')">
<img src="@/assets/home/message.png">
<div class="box-img">
<img src="@/assets/home/message.png"></div>
<div class="cont">
<div class="title">消息</div>
<div class="num">4</div>
</div>
</div>
<div @click="_goto('/history_sampling/sampling_list')">
<img src="@/assets/home/history-data.png">
<div class="box-img">
<img src="@/assets/home/history-data.png"></div>
<div class="cont">
<div class="title">历史任务</div>
</div>
</div>
</div>
<div class="box-c box-c-4" @click="_goto('/flow_chart')">
<img src="@/assets/home/flow.png">
<div>
<img src="@/assets/home/flow.png"></div>
<div>
<div class="title">双随机实现流程</div>
</div>
</div>
</div> </div>
<FooterBar></FooterBar> </div>
<div class="box-c box-c-2">
<div @click="_goto('/sampling_task/sampling_task')">
<img src="@/assets/home/task.png">
<div class="box-img">
<img src="@/assets/home/task.png"></div>
<div class="cont">
<div class="title">我的双随机任务</div>
<div class="num">4</div>
</div>
</div>
<div @click="_goto('/sampling_list/sampling_task')">
<img src="@/assets/home/task-edit.png">
<div class="box-img">
<img src="@/assets/home/task-edit.png"></div>
<div class="cont">
<div class="title">抽样信息录入</div>
<div class="num">4</div>
</div>
</div>
</div>
<div class="box-c box-c-3">
<div @click="_goto('/message')">
<img src="@/assets/home/message.png">
<div class="box-img">
<img src="@/assets/home/message.png"></div>
<div class="cont">
<div class="title">消息</div>
<div class="num">4</div>
</div>
</div>
<div @click="_goto('/history_sampling/sampling_list')">
<img src="@/assets/home/history-data.png">
<div class="box-img">
<img src="@/assets/home/history-data.png"></div>
<div class="cont">
<div class="title">历史任务</div>
</div>
</div>
</div>
<div class="box-c box-c-4" @click="_goto('/flow_chart')">
<img src="@/assets/home/flow.png">
<div>
<img src="@/assets/home/flow.png"></div>
<div>
<div class="title">双随机实现流程</div>
</div>
</div>
</div> </div>
<FooterBar></FooterBar>
</div>
</template> </template>
<script> <script>
import FooterBar from '@/components/FooterBar.vue' import FooterBar from '@/components/FooterBar.vue'
export default { export default {
name: "Home", name: "Home",
components: { components: {
FooterBar FooterBar
}, },
data() { data() {
return {} return {}
}, },
methods: { mounted() {
_goto(uri) { const that = this
this.$router.push(uri) window.onresize = () => {
} return (() => {
if (window.screen.width < 750) {
that.$router.replace('/home_old')
} }
})()
}
},
methods: {
_goto(uri) {
this.$router.push(uri)
} }
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.home-cont { .home-cont {
padding: 20px 30px; padding: 20px 30px;
color: #ffffff; color: #ffffff;
height: calc(100% - 50px); height: calc(100% - 50px);
/*display: flex;*/ /*display: flex;*/
/*flex-direction: column;*/ /*flex-direction: column;*/
/*justify-content: space-around;*/ /*justify-content: space-around;*/
overflow: auto; overflow: auto;
} }
/*.home-cont > div {*/ /*.home-cont > div {*/
/*width: 100%;*/ /*width: 100%;*/
/*height: 23%;*/ /*height: 23%;*/
/*}*/ /*}*/
img { img {
width: 70px; width: 70px;
height: 70px; height: 70px;
opacity: 0.9; opacity: 0.9;
} }
.box-c { .box-c {
display: flex; display: flex;
border-radius: 20px; border-radius: 20px;
width: 700px; width: 700px;
margin: 0 auto; margin: 0 auto;
} }
.box-c + .box-c { .box-c + .box-c {
margin-top: 20px; margin-top: 20px;
} }
.box-c:nth-child(1) { .box-c:nth-child(1) {
background-image: linear-gradient(45deg, #10239e, #adc6ff) background-image: linear-gradient(45deg, #10239e, #adc6ff)
} }
.box-c:nth-child(4) { .box-c:nth-child(4) {
background-image: linear-gradient(45deg, #00474f, #87e8de) background-image: linear-gradient(45deg, #00474f, #87e8de)
} }
.box-c-1, .box-c-4 { .box-c-1, .box-c-4 {
display: flex; display: flex;
align-items: center; align-items: center;
box-shadow: 2px 2px 10px #888888; box-shadow: 2px 2px 10px #888888;
height: 200px; height: 200px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
> img { > img {
position: absolute; position: absolute;
right: -40px; right: -40px;
top: -40px; top: -40px;
opacity: 0.1; opacity: 0.1;
width: 280px; width: 280px;
height: 280px; height: 280px;
} }
> div:nth-child(2) { > div:nth-child(2) {
width: 20%; width: 20%;
display: flex; display: flex;
padding-left: 50px; padding-left: 50px;
margin-left: 30px; margin-left: 30px;
} }
> div:nth-child(3) { > div:nth-child(3) {
width: auto; width: auto;
margin-left: 30px; margin-left: 30px;
} }
} }
.box-c-2, .box-c-3 { .box-c-2, .box-c-3 {
height: 180px; height: 180px;
> div { > div {
width: 50%; width: 50%;
border-radius: 20px; border-radius: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 2px 2px 10px #888888; box-shadow: 2px 2px 10px #888888;
position: relative; position: relative;
> img { > img {
position: absolute; position: absolute;
right: -20px; right: -20px;
opacity: 0.1; opacity: 0.1;
width: 200px; width: 200px;
height: 200px; height: 200px;
}
}
.box-img {
width: 20%;
}
.cont {
margin-left: 30px;
}
}
.box-c-2 {
> div:nth-child(1) {
background-image: linear-gradient(45deg, #536DFE, #00B0Ff)
}
> div:nth-child(2) {
background-image: linear-gradient(45deg, #00B0Ff, #536DFE);
margin-left: 30px;
}
}
.box-c-3 {
> div:nth-child(1) {
background-image: linear-gradient(45deg, #00BFA6, #0036ff)
}
> div:nth-child(2) {
background-image: linear-gradient(45deg, #0036ff, #00BFA6);
margin-left: 30px;
}
}
.title {
font-weight: bold;
font-size: 24px
}
.num {
text-align: center;
font-weight: bold;
margin-top: 5px;
} }
}
.box-img {
width: 20%;
}
.cont {
margin-left: 30px;
}
}
.box-c-2 {
> div:nth-child(1) {
background-image: linear-gradient(45deg, #536DFE, #00B0Ff)
}
> div:nth-child(2) {
background-image: linear-gradient(45deg, #00B0Ff, #536DFE);
margin-left: 30px;
}
}
.box-c-3 {
> div:nth-child(1) {
background-image: linear-gradient(45deg, #00BFA6, #0036ff)
}
> div:nth-child(2) {
background-image: linear-gradient(45deg, #0036ff, #00BFA6);
margin-left: 30px;
}
}
.title {
font-weight: bold;
font-size: 24px
}
.num {
text-align: center;
font-weight: bold;
margin-top: 5px;
}
</style> </style>
src/page/HomeOld.vue
<template> <template>
<div> <div>
<!--https://youzan.github.io/vant/#/zh-CN/grid--> <!--https://youzan.github.io/vant/#/zh-CN/grid-->
<div class="layout-cont home-cont"> <div class="layout-cont home-cont">
<van-grid :gutter="10" :column-num="3" :icon-size="40"> <van-grid :gutter="10" :column-num="3" :icon-size="40">
<!--1、icon参数引入使用，否则不显示--> <!--1、icon参数引入使用，否则不显示-->
<van-grid-item v-for="item in menuList" :key="item.title" :icon="item.img" <van-grid-item v-for="item in menuList" :key="item.title" :icon="item.img"
:text="item.title" @click="_goto(item)"></van-grid-item> :text="item.title" @click="_goto(item)"></van-grid-item>
<!--2、require使用 详见：https://youzan.github.io/vant/#/zh-CN/image#chang-jian-wen-ti--> <!--2、require使用 详见：https://youzan.github.io/vant/#/zh-CN/image#chang-jian-wen-ti-->
<!--<van-grid-item v-for="item in menuList" :key="item.title" :icon="require('../assets/index/1.png')"--> <!--<van-grid-item v-for="item in menuList" :key="item.title" :icon="require('../assets/index/1.png')"-->
<!--:text="item.title" ></van-grid-item>--> <!--:text="item.title" ></van-grid-item>-->
<!--3、使用该组件的icon插槽 详见：https://youzan.github.io/vant/#/zh-CN/grid#api--> <!--3、使用该组件的icon插槽 详见：https://youzan.github.io/vant/#/zh-CN/grid#api-->
</van-grid> </van-grid>
</div>
<FooterBar></FooterBar>
</div> </div>
<FooterBar></FooterBar>
</div>
</template> </template>
<script> <script>
import indexImg10 from '../assets/index/10.png' import indexImg27 from '../assets/index/27.png'
import indexImg1 from '../assets/index/1.png' import indexImg10 from '../assets/index/10.png'
import indexImg11 from '../assets/index/11.png' import indexImg1 from '../assets/index/1.png'
import FooterBar from '@/components/FooterBar.vue' import indexImg11 from '../assets/index/11.png'
import indexImg13 from '../assets/index/13.png'
import FooterBar from '@/components/FooterBar.vue'
export default { export default {
name: "Home", name: "Home",
components: { components: {
FooterBar FooterBar
}, },
data() { data() {
return { return {
menuList: [ menuList: [
{img: indexImg10, title: '抽样任务', uri: '/sampling_task/sampling_task'}, {img: indexImg27, title: '我创建的抽样计划', uri: '/sampling_plan/sampling_plan'},
{img: indexImg1, title: '抽样单管理', uri: '/sampling_list/sampling_task'}, {img: indexImg10, title: '我的双随机任务', uri: '/sampling_task/sampling_task'},
{img: indexImg11, title: '历史抽样单', uri: '/history_sampling/sampling_list'}, {img: indexImg1, title: '抽样信息录入', uri: '/sampling_list/sampling_task'},
], {img: indexImg11, title: '历史任务', uri: '/history_sampling/sampling_list'},
} {img: indexImg13, title: '双随机实现流程', uri: '/flow_chart'},
}, ],
methods: { }
_goto(item) { },
this.$router.push(item.uri) mounted() {
} const that = this
window.onresize = () => {
return (() => {
if (window.screen.width > 750) {
that.$router.replace('/home')
} }
})()
}
},
methods: {
_goto(item) {
this.$router.push(item.uri)
} }
}
}
</script> </script>
<style scoped> <style scoped>
......
src/router/routes.js
import Index from '@/page/Index' import Index from '@/page/Index'
import Home from '@/page/Home' import Home from '@/page/Home'
import HomeOld from '@/page/HomeOld'
import Login from '@/page/Login' import Login from '@/page/Login'
import ForgetPwd from '@/page/ForgetPwd' import ForgetPwd from '@/page/ForgetPwd'
import Message from '@/page/Message' import Message from '@/page/Message'
...@@ -32,6 +33,12 @@ export default [ ...@@ -32,6 +33,12 @@ export default [
meta: {title: "双随机抽样", leftArrow: false}, meta: {title: "双随机抽样", leftArrow: false},
}, },
{ {
path: "/home_old",
name: "homeOld",
component: HomeOld,
meta: {title: "双随机抽样", leftArrow: false},
},
{
path: "/login", path: "/login",
name: "login", name: "login",
component: Login, component: Login,
......
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