|
|
@@ -0,0 +1,60 @@
|
|
|
+<template>
|
|
|
+ <div :class="{'hidden': !hidden.status}" @click="hidden.status=false" class="heibox">
|
|
|
+ <div class="imgs" @click.stop="">
|
|
|
+ <img :src="urls" alt="" class="img">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ scrollTo
|
|
|
+ } from '@/utils/scroll-to'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'BigPicture',
|
|
|
+ props: {
|
|
|
+ urls: {
|
|
|
+ default: '',
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ hidden: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ status: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .heibox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0,0,0,.8);
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99999;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ .imgs{
|
|
|
+ width: 80%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hidden {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+</style>
|
sr