jcxt_qd/src/components/admin/conSole.vue

<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>控制台</el-breadcrumb-item>
	</el-breadcrumb>

    <div class="workblock">
        <!-- 搜索机构 -->
        <div class="block" @click="searchInstitution()">
            <el-image class="imagee" style="width: 150px; height: 150px" :src=a></el-image>
        </div>
        <!-- 监测任务 -->
        <div class="block" @click="monitoringTasks()">
            <el-image class="imagee" style="width: 150px; height: 150px" :src=b></el-image>
        </div>
        <!-- 历史任务    -->
        <div class="block" @click="queryTask()">
            <el-image class="imagee" style="width: 150px; height: 150px" :src=c></el-image>
        </div>
        <!-- 退回任务 -->
        <div class="block" @click="tuiHui()">
            <el-image class="imagee" style="width: 150px; height: 150px" :src=d></el-image>
        </div>
        <!-- 系统介绍 -->
        <div class="block"  @click="SystemIntroduction()">
            <el-image class="imagee" style="width: 150px; height: 150px" :src=e></el-image>
        </div>
        <!-- 数据统计 -->
        <div class="block"  @click="searchDataChart()">
            <el-image class="imagee" style="width: 150px; height: 150px" :src=f></el-image>
        </div>
    </div>

  
</div>
    
</template>
<script>

export default {
    data() {
      return {
        a: require('../../assets/img/jgcx.png'),
        b: require('../../assets/img/jcrw.png'),
        c: require('../../assets/img/lsrw.png'),
        d: require('../../assets/img/tuihui.png'),
        e: require('../../assets/img/sjfx.png'),
        f: require('../../assets/img/xtjs.png'),
         msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
        //  this.drawHistogram();
    },
    created() {
	},
    methods: {
        async searchInstitution() {
            this.$router.push({
                path: '/admin/getOrganization',
            })
        },
        async monitoringTasks() {
            this.$router.push({
                path: '/admin/conSoleChild',
            }) 
        },
        async queryTask() {
            this.$router.push({
                path: '/admin/historyTask'
            })
        },
        async tuiHui() {
            this.$router.push({
                path: '/admin/tuiHui'
            })
        },
        async SystemIntroduction() {
            this.$router.push({
                path: '/admin/dataEchart'
            })
        },
        async searchDataChart() {
            this.$router.push({
                path: '/admin/systemIntro'
            })
        },
    }
  }

</script>
<style lang="less" scoped>
    .workblock{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80%;
        height: 28rem;
    .block{
        margin: 1.25rem 1.25rem;
        // box-shadow: 10px 10px 5px #888888;
        }
        .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)
             
        }
        .imagee{
            box-shadow: 8px 5px 20px #cecece;
        }
     
    }
</style>