fixed activeItem instance type

src/components/showCollection.vue

@@ -3,18 +3,28 @@
     <div class="ui-body">
       <div class="ui-con" @click.stop>
         <div class="img-con img-k">
-          <img @click.stop="$hideBroadcast()" :src="require(`@/assets/images/close.png`)" alt />
+          <img
+            @click.stop="$hideBroadcast()"
+            :src="require(`@/assets/images/close.png`)"
+            alt
+          />
           <div class="show-detail">
-            <div class="collection-item" :style="{background:$linear[item.bgid]}">
+            <div
+              class="collection-item"
+              :style="{ background: $linear[item.bgid] }"
+            >
               <img :src="item.imgstr" alt="" />
             </div>
             <div class="show-info">
-              <h3>{{item.name}}</h3>
-              <p v-if="item.time">年代：{{item.time}}</p>
-              <p v-if="item.size">尺寸：{{item.size}}</p>
-              <div v-if="item.describe" class="desc">{{item.describe}}</div>
-              <div class="qrcode" v-if="activeItem.qrcode">
-                <img :src="`${$cdn}/images/qrcode/${activeItem.qrcode}.png`" alt="" />
+              <h3>{{ item.name }}</h3>
+              <p v-if="item.time">年代：{{ item.time }}</p>
+              <p v-if="item.size">尺寸：{{ item.size }}</p>
+              <div v-if="item.describe" class="desc">{{ item.describe }}</div>
+              <div class="qrcode" v-if="activeItem && activeItem.qrcode">
+                <img
+                  :src="`${$cdn}/images/qrcode/${activeItem.qrcode}.png`"
+                  alt=""
+                />
                 <span>了解更多故事</span>
               </div>
             </div>
@@ -29,11 +39,10 @@ export default {
   props: ["item"],
   data() {
     return {
+      activeItem: null,
     };
   },
-  watch: {
-  
-  },
+  watch: {},
   mounted() {},
 };
 </script>
@@ -58,75 +67,74 @@ export default {
     .img-con {
       height: 100%;
       font-size: 0;
-      .show-detail{
+      .show-detail {
         height: 100%;
         width: 100%;
         background: #fff;
         display: flex;
         align-items: flex-start;
-        .collection-item{
+        .collection-item {
           width: 60%;
           height: 100%;
           margin-right: 1.67rem;
-          background: #403F3D;
+          background: #403f3d;
           position: relative;
-          >img{
-             width: 80%;
-             transform: translate(-50%,-50%);
-             position: absolute;
-             top: 50%;
-             left: 50%;
-             margin-top: 0;
+          > img {
+            width: 80%;
+            transform: translate(-50%, -50%);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: 0;
           }
         }
-        .close{
+        .close {
           position: absolute;
-          top: .83rem;
-          right: .83rem;
+          top: 0.83rem;
+          right: 0.83rem;
           width: 1.67rem;
           cursor: pointer;
         }
-       
-      .show-info{
+
+        .show-info {
           padding-top: 1.67rem;
           padding-right: 1.67rem;
           color: #444444;
           text-align: left;
           width: 40%;
-          >h3{
-            color: #DF3B2F;
+          > h3 {
+            color: #df3b2f;
             font-size: 1.67rem;
             max-width: 22.92rem;
             margin-bottom: 1.25rem;
           }
-          >p{
+          > p {
             line-height: 1.42rem;
-            font-size: .83rem;
+            font-size: 0.83rem;
           }
-          .qrcode{
-              position: absolute;
-              right: .83rem;
-              bottom: .42rem;
-              text-align: center;
-              >img{
-                width: 2.92rem;
-              }
-              >span{
-                display: block;
-                font-size: .67rem;
-              }
+          .qrcode {
+            position: absolute;
+            right: 0.83rem;
+            bottom: 0.42rem;
+            text-align: center;
+            > img {
+              width: 2.92rem;
+            }
+            > span {
+              display: block;
+              font-size: 0.67rem;
+            }
           }
-          
-          .desc{
-            border-top: .04rem solid #D1D1D1;
+
+          .desc {
+            border-top: 0.04rem solid #d1d1d1;
             margin-top: 1.25rem;
             padding-top: 1.25rem;
-            font-size: .83rem;
-
+            font-size: 0.83rem;
           }
         }
       }
-    
+
       > img:not(.img) {
         width: 2.08rem;
         height: 2.08rem;
@@ -151,11 +159,11 @@ export default {
       height: auto;
     }
   }
-  .ui-name{
-      text-align: center;
-      color: #fff;
-      letter-spacing: .08rem;
-      margin-top: .83rem;
+  .ui-name {
+    text-align: center;
+    color: #fff;
+    letter-spacing: 0.08rem;
+    margin-top: 0.83rem;
   }
 }
 .full {
@@ -178,9 +186,9 @@ export default {
   .full-btn {
     width: 1.25rem;
     position: absolute;
-    right: .5rem;
+    right: 0.5rem;
     top: 1.25rem;
     cursor: pointer;
   }
 }
-</style>
+</style>