jcxt_qd/src/components/jc/workbench.vue

<template>
<div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/jc/workbench' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>控制台</el-breadcrumb-item>
	</el-breadcrumb>
    <div class="workblock">
        <div class="block" @click="getRoutineMonitor()">
            <el-image style="width: 9.5rem; height: 9.5rem" :src=r></el-image>
        </div>
        <div class="block" @click="getSpecialMonitor()">
            <el-image class="imagee" style="width: 9.5rem; height: 9.5rem" :src=s></el-image>
        </div>
        <div class="block" @click="getReturnTask()">
            <el-image class="imagee" style="width: 9.5rem; height: 9.5rem" :src = re></el-image>
        </div>
        <div class="block" @click="getSubjectInformation()">
            <el-image class="imagee" style="width: 9.5rem; height: 9.5rem" :src=p></el-image>
        </div>
        <div class="block" @click="getDataStatistic()">
            <el-image class="imagee" style="width: 9.5rem; height: 9.5rem" :src=ds></el-image>
        </div>
        <div class="block" @click="getsy()">
            <el-image class="imagee" style="width: 9.5rem; height: 9.5rem" :src=sy></el-image>
        </div>
    </div>
    <!-- <div id="charts">
    <div class="chart">
    <tasksChart taskClass = "例行监测"></tasksChart>
    </div>
    <div>
    <tasksChart taskClass = "专项监测"></tasksChart>
    </div>
    </div> -->
    <!-- <mutiChart></mutiChart> -->
</div>
</template>
<script>
//   import tasksChart from './tasksChart'
//   import mutiChart from './mutiChart'
export default {
    
    name: "workbench",
    data() {
      return {
        r: require('../../assets/img/routineMo.png'),
        s: require('../../assets/img/specialMo.png'),
        re: require('../../assets/img/returnTask.png'),
        p: require('../../assets/img/personalCenter.png'),
        ds: require('../../assets/img/datastatistic.png'),
        sy: require('../../assets/img/systemIntroduction.png')
      }
    },
    // components: {
    //     tasksChart,
    //     // mutiChart
    // },
    mounted() {
		},
    created() {
        console.log(this.taskClass);
		},
    methods: {
        async getRoutineMonitor() {
            this.$router.push({
                path: '/jc/routineMonitor',
            })
        },
        async getSpecialMonitor() {
            this.$router.push({
                path: '/jc/specialMonitorcd',
            }) 
        },
        async getReturnTask() {
            this.$router.push({
                path: '/jc/returnTaskcd',
            }) 
        },
        async getSubjectInformation() {
            this.$router.push({
                path: '/jc/subjectInformation'
            })
        },
        async getDataStatistic() {
            this.$router.push({
                path: '/jc/dataStatistics'
            })
        },
        async getsy() {
            this.$router.push({
                path: '/jc/systemIntroduce'
            })
        }
    }
  }

</script>
<style lang="less" scoped>
    .workblock{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 28rem;
        margin-bottom: 1.25rem;
        .block{
            margin: 1.25rem 1.25rem;
        }
        .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;
        }
    }
    // #charts{
    //     display: flex;
    //     justify-content: center;
    //     .chart{
    //         margin-right: 8rem;
    //     }
    //     .tasksChart{
    //         margin: 1.875rem;
    //     }
    // }
</style>