首页图片添加点击事件

whychdw

2019-07-22 23c4d4297e58a402cb6c67e95b18f2b635948884

首页图片添加点击事件

 src/views/home/state.vue

@@ -1,24 +1,41 @@
<template>
    <div class="layout">
        <Row>
            <Col span="6">
            <Col v-for="(machine,key) in machines" :key="key" :span="getCol">
                <div class="machine-item">
                    <img src="../../images/machine.png">
                </div>
            </Col>
            <Col span="6">
                <div class="machine-item">
                    <img src="../../images/machine.png">
                </div>
            </Col>
            <Col span="6">
                <div class="machine-item">
                    <img src="../../images/machine.png">
                </div>
            </Col>
            <Col span="6">
                <div class="machine-item">
                    <img src="../../images/machine.png">
                    <div class="machine-item-inner">
                        <img src="../../images/machine.png">
                        <div class="img-area screen">
                            <Poptip title="17寸工控一体化屏" placement="right">
                                <div slot="content" v-html="machine.screen"></div>
                                <div class="img-area-inner"></div>
                            </Poptip>
                        </div>
                        <div class="img-area test-slot">
                            <Poptip title="抽屉式板卡测试槽" content="状态信息" placement="right">
                                <div slot="content" v-html="machine.testSlot"></div>
                                <div class="img-area-inner"></div>
                            </Poptip>
                        </div>
                        <div class="img-area smart-interface">
                            <Poptip title="智能转换接口板" content="状态信息" placement="right">
                                <div slot="content" v-html="machine.smartInterface"></div>
                                <div class="img-area-inner"></div>
                            </Poptip>
                        </div>
                        <div class="img-area ac-module">
                            <Poptip title="采集模块" content="状态信息" placement="right">
                                <div slot="content" v-html="machine.acModule"></div>
                                <div class="img-area-inner"></div>
                            </Poptip>
                        </div>
                        <div class="img-area program-power">
                            <Poptip title="程控电源" content="状态信息" placement="right">
                                <div slot="content" v-html="machine.programPower"></div>
                                <div class="img-area-inner"></div>
                            </Poptip>
                        </div>
                    </div>
                </div>
            </Col>
        </Row>
@@ -26,16 +43,123 @@
</template>
<script>
export default {
    
    data(){
        return {
            machines:[
                {
                    screen: '17寸工控一体化屏状态信息',
                    testSlot: '抽屉式板卡测试槽状态信息',
                    smartInterface: '抽屉式板卡测试槽状态信息',
                    acModule: '采集模块状态信息',
                    programPower: '程控电源状态信息'
                },
                {
                    screen: '17寸工控一体化屏状态信息',
                    testSlot: '抽屉式板卡测试槽状态信息',
                    smartInterface: '抽屉式板卡测试槽状态信息',
                    acModule: '采集模块状态信息',
                    programPower: '程控电源状态信息'
                },
                {
                    screen: '17寸工控一体化屏状态信息',
                    testSlot: '抽屉式板卡测试槽状态信息',
                    smartInterface: '抽屉式板卡测试槽状态信息',
                    acModule: '采集模块状态信息',
                    programPower: '程控电源状态信息'
                },
                {
                    screen: '17寸工控一体化屏状态信息',
                    testSlot: '抽屉式板卡测试槽状态信息',
                    smartInterface: '抽屉式板卡测试槽状态信息',
                    acModule: '采集模块状态信息',
                    programPower: '程控电源状态信息'
                }
            ]
        }
    },
    computed: {
        getCol: function() {
            console.log(this.machines.length);
            var machines = this.machines.length;
            var col = 0;
            if(machines != 0) {
                col = Math.ceil(24/machines);
            }
            col = col<6?6:col;
            return col;
        }
    }
}
</script>
<style scoped>
    .machine-item {
        text-align: center;
    }
    .machine-item img {
        width: auto;
    .machine-item-inner{
        position: relative;
        display: inline-block;
        width: 192px;
        height: 500px;
        margin-top: 80px;
    }
    .machine-item-inner img{
        width: auto;
        height: 100%;
    }
    .img-area {
        position: absolute;
    }
    .img-area:hover {
        cursor: pointer;
    }
    /* 板卡测试柜屏幕 */
    .img-area.screen {
        top: 30px;
        left: 40px;
    }
    .img-area.screen .img-area-inner {
        width: 110px;
        height: 100px;
        background-color: none;
    }
    /* 板卡测试柜测试插槽 */
    .img-area.test-slot {
        top: 174px;
        left: 35px;
    }
    .img-area.test-slot .img-area-inner {
        width: 120px;
        height: 20px;
        background-color: none;
    }
    /* 板卡测试柜智能转换接口板 */
    .img-area.smart-interface {
        top: 270px;
        left: 35px;
    }
    .img-area.smart-interface .img-area-inner {
        width: 120px;
        height: 12px;
        background-color: none;
    }
    /* 板卡测试柜采集模块 */
    .img-area.ac-module {
        top: 335px;
        left: 35px;
    }
    .img-area.ac-module .img-area-inner {
        width: 120px;
        height: 12px;
        background-color: none;
    }
    /* 板卡测试柜称控电源 */
    .img-area.program-power {
        top: 395px;
        left: 35px;
    }
    .img-area.program-power .img-area-inner {
        width: 120px;
        height: 12px;
        background-color: none;
    }
</style>