tangjia/src/pages/imageQuery/index.vue

<template>
  <div class="image-dialog" :class="{'i-show':isShow}" v-if="screensa" @click="exitHandle">
    <!-- <a @click="exitHandle"><i class="iconfont icon-left"></i>返回</a> -->
    <div class="image-layout" :class="{'m-image-layout':ismobile}">
      <Slide :screens="screensa" :current="0">
        <i class="iconfont icon-left" slot="up"></i>
        <div v-if="ismobile" slot="item" slot-scope="{data}" class="image-item" :style="{background:`url(${data}) no-repeat center center`,backgroundSize:'contain'}"  @click.stop></div>
        <img v-else slot="item" slot-scope="{data}" :src="data" class="image-item"  @click.stop>
        <i class="iconfont icon-right" slot="next"></i>
      </Slide>
      <div class="image-introduce" v-if="ismobile">
        <div class="intro-title">{{name}}</div>
        <div class="intro-detail" @touchmove.stop>
          <p v-for="(item,i) in introduce" :key="i">{{item}}</p>
        </div>
      </div>
    </div>

    <template v-if="showAside&&!ismobile">
      <div class="r-aside" @click.stop>
        <div class="image-title">{{name}}</div>
        <div class="image-detail">
          <p v-for="(item,i) in introduce" :key="i">{{item}}</p>
        </div>
        <div class="switch" @click="show = !show" @touchmove.prevent>
          <i class="iconfont" :class="show ? 'icon-left' : 'icon-right'"></i>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Slide from '@/components/Slide'
import browser from '@/util/browser'

export default {
  components: { Slide },
  props: ['screens', 'show', 'showAside', 'name', 'introduce'],
  data () {
    return {
      screensa: this.screens,
      ismobile: browser.mobile
    }
  },
  computed: {
    isShow () {
      return !this.show && !this.ismobile
    }
  },
  watch: {
    screens () {
      this.screensa = this.screens
    }
  },
  methods: {
    exitHandle () {
      this.screensa = null
      this.$emit('exitHandle')
    }
  }
}
</script>

<style scoped>

.image-dialog {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
  transform: translateX(0);
  transition: width .3s ease;
  width: 100%;
}

.image-dialog.i-show{
  transition: width .3s ease;
  width: calc(100% - 350px);
}

.image-dialog a {
  position: absolute;
  color: #fff;
  background-color: #fa3800;
  left: 10px;
  top: 10px;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 3px;
}

.image-layout {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.image-item {
  width: 100%;
  height: 100%;
}

.r-aside{
  box-sizing: border-box;
  position: absolute;
  right: -350px;
  top: 0;
  bottom: 0;
  width: 350px;
  height: 100%;
  background-color: #fffbf8;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-left: 1px solid #f1c4a3;
  z-index: 999999;
}

.r-aside .image-title{
  font-weight: bold;
  font-size: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1c4a3;
  margin: 0 20px;
}
.r-aside .image-detail{
  padding: 15px 0;
  height: 100%;
  overflow-y: scroll;
  margin: 0 10px 0 20px;
}

.r-aside .image-detail p{
  text-indent: 32px;
  line-height: 1.8;
}

.switch {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fa3800;
  width: 14px;
  height: 80px;
  color: #fff;
  line-height: 80px;
  text-align: center;
  cursor: pointer;
  z-index: 9999999;
}

.image-introduce{
  color:#fff;
  padding:20px 10px;
  line-height:1.5;

}
.image-introduce .intro-title{
  font-size:18px;
  font-weight:bold;
  margin-bottom:20px;
}
.image-introduce .intro-detail{
  height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
.image-introduce .intro-detail p{
  text-indent:32px;
}

.m-image-layout >>> .ctrl{
  top:25%;
}

</style>