update：更新签到页面

src/components/AppPopup.vue

+<template>
+  <div class="popup" v-show="visible">
+    <div class="popup-container" @touchmove.prevent>
+      <img class="img_default" :src="defaultImg2" alt="" v-if="status == true && signInfo.market_background_img == ''">
+      <img class="img_default" :src="defaultImg1" alt="" v-else-if="status == false && signInfo.market_background_img == ''">
+      <img class="img_bgImg" :src="signInfo.market_background_img" alt="" v-else>
+      <div class="success"> {{ status === true ? "签到成功!" : "签到失败!" }}</div>
+      <div class="remark">{{signInfo.student.remark}}</div>
+    </div>
+    <div class="overlay" @click="handleClose" @touchmove.prevent></div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: Boolean,
+      default: false
+    },
+    signInfo:{
+        type:Object,
+        default:{}
+    }
+  },
+  data() {
+    return {
+        defaultImg1:'https://webapp-pub.ezijing.com/marketing/sign_error.png',
+        defaultImg2:'https://webapp-pub.ezijing.com/marketing/sign_success.png'
+    }
+  },
+  methods: {
+    handleClose() {  
+      if(this.status == true){
+        this.$emit('update:visible', false)
+      }
+        
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.overlay{
+  position:fixed;
+  left:0;
+  top:0;
+  right:0;
+  bottom:0;
+  z-index:5;
+  background:rgba(0, 0, 0, .5);
+}
+.popup-container{
+  position:fixed;
+  left:50%;
+  top:50%;
+  transform:translate(-50%, -50%);
+  z-index:10;
+  width:6.24rem;
+  height:7.2rem;
+  border-radius:5px;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+  background-color: #fff;
+  .img_default{
+    width: 1.91rem;
+    height: 1.95rem;
+    line-height: 1.95rem;
+    margin-top: .73rem;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .img_bgImg{
+    width:6.24rem;
+    height: 1.95rem;
+  }
+  .success{
+      position:absolute;
+      left:50%;
+      top: 3.12rem;
+      transform:translateX(-50%);
+      font-size: .52rem;
+      color: #333;
+      font-weight: 400;
+  }
+  .remark{
+      width: 4.14rem;
+      position:absolute;
+      left:50%;
+      top: 4.05rem;
+      transform:translateX(-50%);
+      color: #939393;
+      font-size: .32rem;
+      line-height: .48rem;
+      font-weight: 400;
+      text-align: center;
+  }
+}
+
+</style>

src/views/signIn/Index.vue

 <template>
-  <div class="sign_content">
+  <div class="detail_content">
     <div v-if="isShowError == true" class="showError">
       <img src="https://webapp-pub.ezijing.com/marketing/detail2.png" alt="">
       <div class="text">您访问的页面不存在。</div>
     </div>
     <div v-else>
-    <transition name="fade">
-      <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
-        <!-- 第一页 -->
-        <swiper-slide class="swiper-slide1">
-          <!-- 页面背景图 -->
-          <img :src="signInfo.background_img" alt="" class="background_img" v-if="signInfo.background_img !==''">
-          <div class="top">
-            <img :src="signInfo.market_background_img || defaultImg" alt="" />
-            <div class="sign_state">
-              {{ status === true ? "签到成功" : "签到失败" }}
-            </div>
-            <div class="remark">{{ signInfo.student.remark }}</div>
-          </div>
-          <div class="bottom" v-if="signInfo.market_other_img !== ''">
-            <img :src="detail_icon" alt="" />
-          </div>
-        </swiper-slide>
-        <!-- 第二页页面其他背景图片 -->
-        <swiper-slide class="swiper-slide2" v-if="signInfo.market_other_img !== ''">
-          <img :src="signInfo.market_other_img" alt="" class="detailPage" />
-        </swiper-slide>
-      </swiper>
-    </transition>
-  </div>
+      <img :src="signInfo.market_other_img" alt="" class="market_other_img" v-if ="signInfo.market_other_img !== ''">
+      <img src="https://webapp-pub.ezijing.com/marketing/detail.png" class="signIn_detail" @click="handleClick"/>
+      <app-popup :visible.sync="popupVisible" :signInfo = "signInfo" :status = "status"></app-popup>
+    </div>
   </div>
 </template>
 <script>
 import { signInDetail, signIn } from "@/api/base.js";
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import AppPopup from '../../components/AppPopup.vue'
 export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-  data() {
-    return {
-      isShowError:false,
-      swiperOption: {
-        notNextTick: true,
-        direction: "vertical",
-        grabCursor: true,
-        setWrapperSize: true,
-        autoHeight: true,
-        slidesPerView: 1,
-        mousewheel: false,
-        mousewheelControl: false,
-        height: window.innerHeight,
-        resistanceRatio: 0,
-        observeParents: true,
-        debugger: true,
-      },
-      signInfo:{
-        student:{}
-      },//签到详情
-      status: false, //签到状态
-      defaultImg: "https://webapp-pub.ezijing.com/marketing/signIn_img.png", //默认签到背景图
-      detail_icon: "https://webapp-pub.ezijing.com/marketing/detail_img.png", //查看详情图标
-      id:'',//活动id
-    };
-  },
-  computed: {
-    user() {
-      return this.$store.state.user;
-    },
-    swiper() {
-      return this.$refs.mySwiper.swiper;
+  components: { AppPopup },
+    data(){
+        return{
+           status:false,
+            signInfo:{
+              student:{
+              }
+            },//签到详情信息
+            popupVisible: true,
+            id:'',
+            isShowError:false
+        }
     },
-  },
-  mounted() {    
-    this.id = this.$route.query.id;//从链接上获取活动id
-    console.log(this.id)
-    if(this.id == ''||this.id == undefined){
+    mounted(){
+      this.id = this.$route.query.id;//从链接上获取活动id
+      if(this.id == ''||this.id == undefined){
       this.isShowError = true;
       return
     }
-    this.getSignInDetail(); //获取页面详情
-  },
-  methods: {
+      this.getSignInDetail(); //获取页面详情
+    },
+    methods:{
+      handleClick() {
+      this.popupVisible = true
+    },
     getSignInDetail() {
       //调用签到详情接口
-      let id = this.id;    
+      let id = this.id ;    
       signInDetail(id).then((res) => {    
         if (res.code == 0) {
           this.signInfo = res.data;//获取签到详情数据
@@ -111,7 +68,7 @@ export default {
     },
     //签到接口
     getSignIn(){
-      let id = this.id;//从链接上获取活动id
+      let id = this.id ;//从链接上获取活动id
       signIn(id).then((res)=>{
         if (res.code == 0) {
               this.status = res.data.status; //签到状态
@@ -123,25 +80,30 @@ export default {
             }
       })
     }
-    
-  },
-};
-</script>
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
+    }
 }
-.sign_content {
+</script>
+
+<style lang = "scss" scoped>
+.detail_content {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  position: relative;
   background-color: #f2f2f2;
-  overflow: -Scroll;
-  overflow-y: hidden;
+  .market_other_img{
+    width: 100%;
+    height: 100%;
+  }
+  .signIn_detail{
+    width: 1rem;
+    height: 1rem;
+    line-height: 1rem;
+    position: fixed;
+    right: .56rem;
+    top: .67rem;
+    padding-left: 10px;
+
+  }
   .showError{
   width: 100%;
   height: 100%;
@@ -165,62 +127,5 @@ export default {
     color: #999999;
   }
 }
-  .background_img{
-    width: 100%;
-    height: 100%;
-  }
-  .top {
-    width: 6.89rem;
-    height: 7.76rem;
-    background-color: #fff;
-    border-radius: 20px;
-    position: absolute;
-    top: 2.22rem;
-    left: 50%;
-    transform: translateX(-50%);
-    text-align: center;
-    img {
-      width: 4.59rem;
-      height: 1.81rem;
-      margin-top: .70rem;
-    }
-    .sign_state {
-      margin: auto;
-      font-size: 0.42rem;
-      font-weight: bold;
-      color: #333333;
-      margin-bottom: 0.96rem;
-      margin-top: .99rem;
-    }
-    .remark {
-      margin: auto;
-      width: 5.41rem;
-      font-size: 0.28rem;
-      font-weight: 400;
-      color: #666666;
-      margin-bottom: .92rem;
-    }
-  }
-
-@keyframes movepoint{from{bottom:1.2rem}to{bottom:1.44rem}}
-  .bottom {
-    position: fixed;
-    left: 50%;
-    bottom:1.44rem;
-    transform: translateX(-50%);
-    animation: movepoint 2s infinite;
-  -webkit-animation: movepoint 2s infinite;
-    img {
-      width: 0.48rem;
-      height: 0.34rem;
-      line-height: 100%;
-      display: inline-block;
-    }
-  }
-  .detailPage {
-    width: 100%;
-    height: 100%;
-    line-height: 100%;
-  }
 }
-</style>
+</style>
\ No newline at end of file