add full image screen

package-lock.json

@@ -10673,6 +10673,11 @@
       "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
       "dev": true
     },
+    "v-img": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/v-img/-/v-img-0.2.0.tgz",
+      "integrity": "sha512-NQbodouhyhDGRZ6t+uKH2OQvUIN2NWAMrh4B/9c8RmD4BsD2ekMwW3e6ulFwBSbjGhZ2PH5x+/9LPCDW/baEFg=="
+    },
     "v8-compile-cache": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.8.2",
     "swiper": "^5.4.5",
+    "v-img": "^0.2.0",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-pdf": "^4.2.0",

src/components/showCollection.vue

@@ -14,6 +14,10 @@
               :style="{ background: $linear[item.bgid] }"
             >
               <img :src="item.imgstr" alt="" />
+
+              <div class="button__zoom-normal" @click.stop="zoomPic">
+                <img :src="require(`@/assets/images/zoom@2x.png`)" alt="" />
+              </div>
             </div>
             <div class="show-info">
               <h3>{{ item.name }}</h3>
@@ -32,29 +36,78 @@
         </div>
       </div>
     </div>
+    <div
+      v-show="isShowFull"
+      class="full-screen-show"
+      :style="{ background: $linear[item.bgid] }"
+    >
+      <img
+        class="full-screen-show_btn"
+        @click.stop="hideFullPic"
+        :src="require(`@/assets/images/close.png`)"
+        alt
+      />
+      <img class="main-img" :src="item.imgstr" alt="" />
+    </div>
   </div>
 </template>
 <script>
 export default {
   props: ["item"],
+  components: {},
   data() {
     return {
       activeItem: null,
+      isShowFull: false,
     };
   },
+
   watch: {},
   mounted() {},
+  methods: {
+    zoomPic() {
+      this.isShowFull = true;
+    },
+    hideFullPic() {
+      this.isShowFull = false;
+          this.$hideBroadcast();
+    },
+  },
 };
 </script>
 
 <style lang="less" scoped>
 @import "../assets/style/globalVars.less";
+.full-screen-show {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999999;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  .full-screen-show_btn {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 50px;
+    right: 50px;
+  }
+  img.main-img {
+    max-width: 80%;
+    height: auto;
+  }
+}
 .ui-body {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   position: relative;
-  z-index: 9999999;
+  z-index: 99999;
   max-width: 70%;
 
   .ui-con {
@@ -95,6 +148,15 @@ export default {
           width: 1.67rem;
           cursor: pointer;
         }
+        .button__zoom-normal {
+          position: absolute;
+          bottom: 15px;
+          right: 15px;
+          display: block;
+          width: 35px;
+          height: 35px;
+          cursor: pointer;
+        }
 
         .show-info {
           padding-top: 1.67rem;

src/main.js

@@ -1,48 +1,45 @@
-import Vue from 'vue'
-import App from './App.vue'
-import vuex from 'vuex'
+import Vue from "vue";
+import App from "./App.vue";
+import vuex from "vuex";
+
+import router from "./router";
+import "@/assets/theme/theme.less";
+import { axios, serverName, orginLink } from "./config/http";
+
+import { $showBroadcast, $hideBroadcast } from "./components/popupLayout";
 
-import router from './router'
-import '@/assets/theme/theme.less'
-import {axios, serverName,orginLink} from './config/http'
 
-import {
-  $showBroadcast,
-  $hideBroadcast,
-} from './components/popupLayout'
 
 Vue.mixin({
   methods: {
     $showBroadcast,
-    $hideBroadcast
-  }
-})
-Vue.use(vuex)
-Vue.prototype.$http = axios
-Vue.prototype.$serverName = serverName 
-Vue.prototype.$orginLink = orginLink 
-Vue.prototype.$cdn = 'https://houseoss.4dkankan.com/chuanshan'
-
-
-
-Vue.config.productionTip = false
-Vue.prototype.$bus = new Vue()
-
-let tmpYear = {}
+    $hideBroadcast,
+  },
+});
+Vue.use(vuex);
+Vue.prototype.$http = axios;
+Vue.prototype.$serverName = serverName;
+Vue.prototype.$orginLink = orginLink;
+Vue.prototype.$cdn = "https://houseoss.4dkankan.com/chuanshan";
+
+Vue.config.productionTip = false;
+Vue.prototype.$bus = new Vue();
+
+let tmpYear = {};
 for (let i = 2000; i <= 2050; i++) {
-  tmpYear[i] = i+'年'
+  tmpYear[i] = i + "年";
 }
 
-Vue.prototype.$linear ={
+Vue.prototype.$linear = {
   0: "linear-gradient(180deg, #828A8E 0%, #CBCCCD 100%)",
   1: "linear-gradient(180deg, #868990 0%, #EEEEEE 100%)",
   2: "linear-gradient(180deg, #403F3D 0%, #F3F3F3 100%)",
-  'r': "linear-gradient(180deg, #EF4539 0%, #CB2C20 100%)",
-  'w': "linear-gradient(180deg, #F3F3F3 0%, #E3E3E3 100%)"
+  r: "linear-gradient(180deg, #EF4539 0%, #CB2C20 100%)",
+  w: "linear-gradient(180deg, #F3F3F3 0%, #E3E3E3 100%)",
 };
 
 new Vue({
   router,
-  store: require('./store').default,
-  render: h => h(App)
-}).$mount('#app')
+  store: require("./store").default,
+  render: (h) => h(App),
+}).$mount("#app");