From 23c4d4297e58a402cb6c67e95b18f2b635948884 Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期一, 22 七月 2019 17:21:06 +0800
Subject: [PATCH] 首页图片添加点击事件
---
src/views/home/state.vue | 164 ++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 144 insertions(+), 20 deletions(-)
diff --git a/src/views/home/state.vue b/src/views/home/state.vue
index cdcbce5..7a84a06 100644
--- a/src/views/home/state.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.1