<template>

    <!-- 过渡动画 -->

    <transition name="fade">

   　　 <div class="img-view" @click="bigImg">

   　　　　 <!-- 遮罩层 -->

   　　　　 <div class="img-layer"></div>

   　　　　 <div class="img">

   　　　　　　 <img :src="imgSrc">

   　　　　 </div>

    　　</div>

　　</transition>

</template>

<script>

　　export default {

　　　　props: ['imgSrc'],//接受图片地址

　　　　methods: {

　　　　　　bigImg() {

　　　　　　// 发送事件

　　　　　　　　this.$emit('clickit')

　　　　　　}

　　　　}

　　}

</script>

<style scoped>

　　/*动画*/

　　.fade-enter-active,

　　.fade-leave-active {

　　　　transition: all .2s linear;

　　　　transform: translate3D(0, 0, 0);

　　}

　　.fade-enter,

　　.fade-leave-active {

　　　　transform: translate3D(100%, 0, 0);

　　}

　　/* bigimg */

　　.img-view {

　　　　position: inherit;

　　　　width: 100%;

　　　　height: 100%;

　　}

　　/*遮罩层样式*/

　　.img-view .img-layer {

　　　　position: fixed;

　　　　z-index: 999;

　　　　top: 0;

　　　　left: 0;

　　　　background: rgba(0, 0, 0, 0.7);

　　　　width: 100%;

　　　　height: 100%;

　　　　overflow: hidden;

　　}

　　/*不限制图片大小，实现居中*/

　　.img-view .img img {

　　　　max-width: 100%;

　　　　display: block;

　　　　position: absolute;

　　　　left: 0;

　　　　right: 0;

　　　　margin: auto;

　　　　z-index: 1000;

　　}

</style>

<template xmlns:v-on="http://www.w3.org/1999/xhtml">

　　<div class="contents">

　　　　<div class="group">

　　　　　　<div class="special">
　　　　　　　　<span v-text="pagedata.subtitle"></span>
　　　　　　</div>

　　　　　　<span class="text-muted" v-text="pagedata.headline"></span>

　　　　　　<div class="group_img">

　　　　　　　　<!-- 放大图片 -->

　　　　　　　　<big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>

 　　

　　　　　　　　<div class="text" v-text="pagedata.article"></div>

　　　　　　　　<img id="smallImg" :src="pagedata.imgurl" @click="clickImg($event)">

　　　　　　</div>

　　　　</div>

　　</div>

</template>

<script>

import BigImg from '../../index/moduleStyles/BigImg.vue';

export default {

　　data () {

　　　　return {

　　　　　　showImg:false,

　　　　　　imgSrc: ''

　　　　}

　　},

　　props: ['pagedata'],

　　computed: {},

　　components: { 'big-img':BigImg},

　　methods: {

　　　　clickImg(e) {

　　　　　　this.showImg = true;

　　　　　　// 获取当前图片地址

　　　　　　this.imgSrc = e.currentTarget.src;

　　　　},

　　　　viewImg(){

　　　　　　this.showImg = false;

　　　　},

　　},

　　watch: {},

}

</script>

<style>

</style>