Skip to content

P
patzn-cloud-web-h5app-drs
Commit 12f1347e by zhuxiaomei
Options

首页

parent 50dac532
Showing with 140 additions and 26 deletions
.env.production
NODE_ENV=production
VUE_APP_BASE_URL=http://api.patzn.com
VUE_APP_BASE_URL=http://192.168.0.155:7000
src/page/Home.vue
......@@ -3,34 +3,55 @@
<!--https://youzan.github.io/vant/#/zh-CN/grid-->
<div class="layout-cont home-cont">
<!--todo 首页布局 颜色-->
<div style="background: cornflowerblue;" class="box-c" @click="_goto('/sampling_plan/sampling_plan')">
<div>抽样计划执行双随机</div>
<div>3</div>
<div class="box-c box-c-1" @click="_goto('/sampling_plan/sampling_plan')">
<div>
<img src="@/assets/home/plan.png"></div>
<div>
<div class="title">抽样计划执行双随机</div>
<div class="num">3</div>
</div>
</div>
<div style="display: flex" class="box-c">
<div style="width:50%;background: #FC81FF" @click="_goto('/sampling_task/sampling_task')">
<div>我的任务</div>
<div>4</div>
<div class="box-c box-c-2">
<div @click="_goto('/sampling_task/sampling_task')">
<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 style="width:50%;background:coral;margin-left: 30px"
@click="_goto('/sampling_list/sampling_task')">
<div>抽样信息录入</div>
<div>4</div>
<div @click="_goto('/sampling_list/sampling_task')">
<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 style="display: flex" class="box-c">
<div style="width:50%;background: brown" @click="_goto('/message')">
<!--todo 消息-->
<div>消息</div>
<div>4</div>
<div class="box-c box-c-3">
<div @click="_goto('/message')">
<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 style="width:50%;background: #576b95;margin-left: 30px"
@click="_goto('/history_sampling/sampling_list')">
<div>历史任务</div>
<div @click="_goto('/history_sampling/sampling_list')">
<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" @click="_goto('/flow_chart')">
<div style="background: #646566;height: 100%;">双随机实现流程</div>
<div class="box-c box-c-4" @click="_goto('/flow_chart')">
<div>
<img src="@/assets/home/flow.png"></div>
<div>
<div class="title">双随机实现流程</div>
</div>
</div>
<!--<van-grid :gutter="10" :column-num="3" :icon-size="40">-->
<!--&lt;!&ndash;1、icon参数引入使用，否则不显示&ndash;&gt;-->
......@@ -74,18 +95,111 @@
}
</script>
<style scoped>
<style scoped lang="less">
.home-cont {
padding: 20px 30px;
color: #ffffff;
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.home-cont > div {
width: 100%;
height: 25%;
height: 23%;
}
img {
width: 100%;
}
.box-c {
display: flex;
border-radius: 20px;
}
.box-c:nth-child(1) {
background: #589dff;
}
.box-c:nth-child(4) {
background: #9B9C9D;
}
.box-c-1, .box-c-4 {
display: flex;
align-items: center;
justify-content: center;
> div:nth-child(1) {
width: 20%;
display: flex;
align-items: center;
padding-left: 50px;
margin-left: -5%;
}
> div:nth-child(2) {
width: auto;
margin-left: 30px;
}
img {
width: 80%;
}
}
.box-c + .box-c {
padding-top: 30px;
.box-c-2, .box-c-3 {
> div {
width: 50%;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box-img {
width: 20%;
}
.cont {
margin-left: 30px;
}
}
.box-c-2 {
> div:nth-child(1) {
background: #b562bb;
}
> div:nth-child(2) {
background: #e8835e;
margin-left: 30px;
}
}
.box-c-3 {
> div:nth-child(1) {
background: #E24343;
}
> div:nth-child(2) {
background: #a1aeca;
margin-left: 30px;
}
}
.title {
font-weight: bold;
font-size: 24px
}
.num {
text-align: center;
font-weight: bold;
margin-top: 5px;
}
</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