manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/desktop/index.vue

<template>
	<section>
        <!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<div class="nowTime">
                <i class="fa fa-clock-o"></i>
                {{currentTime}}
            </div>
		</el-col>

        <!-- 卡片列表 -->
        <div>
            <el-col :span="6" v-for="(item, index) in 12" :key="item" class="one_div">
                <el-card :body-style="{ padding: '0px' }" shadow="hover" class="one_card">
                    <div class="one_card_img">
                        <el-image :src="index==0?require('../../assets/image/047_S.jpg'):require('../../assets/image/noPic.png')" class="image" lazy></el-image>
                        <div :id="'over'+index" class="over">
                            <el-button type="primary" plain @click.native="jumpTo(item)"><i class="fa fa-link"></i> 所有截图</el-button>
                        </div>
                    </div>
                    <div class="one_card_txt">
                        <span>在玩游戏呢！！！！！</span>
                        <div class="bottom clearfix">
                            <el-link><i class="fa fa-circle"></i> 吴涛涛</el-link>
                            <time class="time">9点59分59秒</time>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </div>
	</section>
</template>

<script>
    import util from '../../common/js/util'
	export default {
		data() {
			return {
				filters: {
					keyName: ''
                },
                user: JSON.parse(sessionStorage.getItem('user')),
                timer: "",
                currentTime: util.formatDate.format(new Date(new Date()), 'yyyy-MM-dd hh:mm:ss'),
			}
		},
		methods: {
            getTime() {
                var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
                this.timer = setInterval(function() {
                    _this.currentTime = util.formatDate.format(new Date(new Date()), 'yyyy-MM-dd hh:mm:ss');
                }, 1000);
            },
            jumpTo(id) {
                this.$router.push('/desktop/' + id);
            }
        },
        created() {
            this.getTime();
        },
		mounted() {
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer);
            }
        }
	}
</script>

<style lang="scss" scoped>
    .nowTime {
        height: 35px;
        line-height: 28px;
        font-size: 18px;
        color: #20a0ff;
        margin-left: 10px;
        i {
            margin-right: 10px;
        }
    }

    .one_div {
        padding: 15px;
        .one_card {
            .one_card_img {
                position: relative;
                .image {
                    width: 100%;
                }
                .over {
                    display: none;
                    width: 100%;
                    height: 98%;
                    background: rgba(0,0,0,0.2);
                    position: absolute;
                    top: 0;
                    text-align: center;
                }
            }
            .one_card_txt {
                padding: 13px;
                .bottom {
                    margin-top: 13px;
                    line-height: 12px;
                    i {
                        color: #9ED0FF;
                        margin-right: 5px;
                    }
                    .time {
                        float: right;
                        margin-top: 2px;
                        color: #999;
                    }
                }
            } 
        }
        .one_card:hover {
            .one_card_img {
                .over {
                    display: block!important;
                }
            }
        }
    }
</style>
<style lang="scss">
    .image {
        .el-image__inner {
            height: 11.6vw!important;
        }
    }

    .one_card_img {
        .over {
            .el-button {
                margin-top: 25%;
            }
        }
    }
</style>