jcxt_qd/src/components/admin/conSoleChild.vue

<template>
<div>
    <div class="title">
			新增监测任务
	</div>
   <div class="workblock">
        <div @click="routineMonitor()">
            <el-button class="block" type="success" icon="el-icon-s-order">例行监测</el-button>
        </div>
        <div  @click="specialMonitor()">
            <el-button class="block" type="primary" icon="el-icon-aim">专项监测</el-button>
        </div>
        <div  @click="checkMonitor()">
            <el-button class="block" type="warning" icon="el-icon-edit-outline">监督抽查</el-button>
        </div>
       
    </div>
    <div>
        <el-button class="return" @click="fanhui">返回控制台</el-button>
    </div>

</div>
 
    
</template>
<script>

export default {
    data() {
      return {
        // lx: require('../../assets/img/jgcx.png'),
        // zx: require('../../assets/img/jcrw.png'),
        // jd: require('../../assets/img/jccx.png'),
      }
    },
    mounted() {
		},
    created() {
		},
    methods: {
        async routineMonitor() {
            this.$router.push({
                path: '/admin/addTask',
            })
        },
        async specialMonitor() {
            this.$router.push({
                path: '/admin/addTaskZx',
            }) 
        },
        async checkMonitor() {
            this.$router.push({
                path: '/admin/addTaskJd'
            })
        },
        async fanhui(){
        this.$router.push({path: '/admin/conSole'})
    }
      
    },
   
  }

</script>
<style lang="less" scoped>
    .workblock{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80%;
        height: 28rem;
    .block{
        margin: 1.25rem 1.25rem;
        width: 200px;
        height: 100px;
        font-size: 18px;
        }
        .block:hover {
            // box-shadow: 0px 0px 0px #ccc;
            transition-duration: 0.4s;
            transform: scale(1.05);
            // z-index: 10;
            //  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
        }
    }
    .return{
        float: right;
        margin-bottom: 10px;
    }
    .title {
		margin-left: 45%;
		margin-bottom: 20px;
        font-size: 20px;
	}
</style>