feat: 签到弹窗优化外观样式

src/components/popup.vue

 <template>
   <div class="popup" v-show="visible">
-    <div class="popup-container">
-      <div class="title">
-        {{title}}
-        <i class="icon-close el-icon-close" @click="handleClose"></i>
-      </div>
+    <div class="popup-container" :class="signStatus === 1 ? 'success':'warn'">
+      <p v-if="signStatus === 1" class="success">签到成功!</p>
+      <p v-if="signStatus === 2" class="warn">
+        您已迟到。<span>请于课后补看错过视频。</span>
+      </p>
       <div class="content">
         <slot></slot>
       </div>
+      <i class="el-icon-circle-close" @click="handleClose"></i>
     </div>
     <div class="overlay"></div>
   </div>
@@ -22,6 +23,10 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    signStatus: {
+      type: Number,
+      default: 1
     }
   },
   data() {
@@ -50,29 +55,56 @@ export default {
   top:50%;
   transform:translate(-50%, -50%);
   z-index:2000;
-  max-width:80vw;
+  width:313px;
+  height:211px;
+  padding-top:150px;
   border-radius:5px;
-  overflow:hidden;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 30%)
+  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+  background-image: url('@/assets/images/popup_bg1.png');
+  background-size:313px;
 }
-.title{
-  background:#2994ea;
-  color:#fff;
-  padding:10px 40px 10px 15px;
-  position:relative;
-  min-width:220px;
+.popup-container.warn{
+  background-image: url('@/assets/images/popup_bg2.png');
+}
+.popup-container p{
+  color:#1B6EBB;
+  font-size:28px;
+  text-align:center;
+  margin:0;
+}
+.popup-container p.warn{
+  color:#D51E2A;
 }
-.title>i{
+.popup-container p.warn span{
+  color:#959595;
+  font-size:18px;
+  display:block;
+}
+.popup-container>i{
   position:absolute;
-  right:6px;
-  top:6px;
+  left:50%;
+  bottom:-60px;
+  transform:translateX(-50%);
   padding:5px;
   cursor:pointer;
+  font-size:30px;
+  color:#fff;
 }
-.title>i:hover{
+.popup-container>i:hover{
   color: #e3e3e3;
 }
 .content{
-  background:#fff;
+  text-align: center;
+  padding-top:40px;
+}
+.content button{
+  width:180px;
+  font-size:16px;
+  background:#1B6EBB;
+  border-color:#1B6EBB;
+}
+.popup-container.warn .content button{
+  background:#D51E2A;
+  border-color:#D51E2A;
 }
 </style>

src/pages/learn/course.vue

@@ -96,10 +96,8 @@
         </ul>
       </div>
     </div>
-    <app-popup :title="popup.title" :visible.sync="popup.visible">
-      <p v-if="newLiveMsg.live" class="popup-content" @click="goLive">
-        {{newLiveMsg.course_name}} {{newLiveMsg.live.start_time}} <span>进入直播</span>
-      </p>
+    <app-popup :signStatus="popup.signStatus" :visible.sync="popup.visible">
+      <el-button type="primary" round size="medium" @click="goLive">进入直播</el-button>
     </app-popup>
   </div>
 </template>
@@ -114,7 +112,7 @@ export default {
     UserInfo = window.G.UserInfo.student_info || {}
     return {
       popup: {
-        title: '签到成功',
+        signStatus: 1,
         visible: false,
         data: {}
       },
@@ -303,14 +301,8 @@ export default {
       cAction.Player.signIn(id)
         .then(res => {
           const { code, status } = res
-          let msg = ''
           if (code === 0) {
-            if (status === 1) {
-              msg = '签到成功'
-            } else if (status === 2) {
-              msg = '课程已开始，您已迟到，请于课后补看错过视频'
-            }
-            this.popup.title = msg
+            this.popup.signStatus = status
             this.popup.visible = true
             this.getLatestLive()
           }
@@ -324,19 +316,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.popup-content{
-  padding: 16px 15px;
-  font-size:14px;
-  cursor:pointer;
-  margin:0;
-}
-.popup-content:hover,.popup-content:hover span{
-  color:#d21f28;
-}
-.popup-content span{
-  color:#999;
-  font-size:12px;
-}
 .live-msg {
   position: relative;
   padding: 40px;

src/pages/learn/courseDetail.vue

@@ -274,10 +274,8 @@
         </el-col>
       </el-row>
     </div>
-    <app-popup :title="popup.title" :visible.sync="popup.visible">
-      <p v-if="popup.data.live" class="popup-content" @click="jumpToOtherVA(popup.data)">
-        {{popup.data.live.topic}} {{popup.data.live.start_time}} <span>进入直播</span>
-      </p>
+    <app-popup :signStatus="popup.signStatus" :visible.sync="popup.visible">
+      <el-button type="primary" round size="medium" @click="jumpToOtherVA(popup.data)">进入直播</el-button>
     </app-popup>
   </div>
 </template>
@@ -298,7 +296,7 @@ export default {
   data() {
     return {
       popup: {
-        title: '签到成功',
+        signStatus: 1,
         visible: false,
         data: {}
       },
@@ -979,14 +977,8 @@ export default {
       cAction.Player.signIn(item.live.id)
         .then(res => {
           const { code, status } = res
-          let msg = ''
           if (code === 0) {
-            if (status === 1) {
-              msg = '签到成功'
-            } else if (status === 2) {
-              msg = '课程已开始，您已迟到，请于课后补看错过视频'
-            }
-            this.popup.title = msg
+            this.popup.signStatus = status
             this.popup.visible = true
             this.popup.data = item
             this.updatePages()
@@ -1001,19 +993,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.popup-content{
-  padding: 16px 15px;
-  font-size:14px;
-  cursor:pointer;
-  margin:0;
-}
-.popup-content:hover,.popup-content:hover span{
-  color:#d21f28;
-}
-.popup-content span{
-  color:#999;
-  font-size:12px;
-}
 body .el-tab-pane {
   padding-top: 0;
 }

src/pages/mobile/list.vue

@@ -44,10 +44,8 @@
         </div>
       </template>
     </div>
-    <app-popup :title="popup.title" :visible.sync="popup.visible">
-      <p v-if="popup.data" class="popup-content" @click="onClick(popup.data, popup.courseId)">
-        {{popup.data.topic}} {{popup.data.start_time}}<span>进入直播</span>
-      </p>
+    <app-popup :signStatus="popup.signStatus" :visible.sync="popup.visible">
+      <el-button type="primary" round size="medium" @click="onClick(popup.data, popup.courseId)">进入直播</el-button>
     </app-popup>
   </div>
 </template>
@@ -73,7 +71,7 @@ export default {
       wechatVersion,
       notSupport,
       popup: {
-        title: '签到成功',
+        signStatus: 1,
         visible: false,
         data: {},
         courseId: ''
@@ -274,13 +272,7 @@ export default {
         .then(res => {
           const { code, status } = res
           if (code === 0) {
-            let msg = ''
-            if (status === 1) {
-              msg = '签到成功'
-            } else if (status === 2) {
-              msg = '课程已开始，您已迟到，请于课后补看错过视频'
-            }
-            this.popup.title = msg
+            this.popup.signStatus = status
             this.popup.visible = true
             this.popup.data = item
             this.popup.courseId = courseId
@@ -314,16 +306,6 @@ export default {
 }
 </script>
 <style>
-.popup-content{
-  padding: 16px 15px;
-  font-size:14px;
-  cursor:pointer;
-  margin:0;
-}
-.popup-content span{
-  color:#999;
-  font-size:12px;
-}
 html {
   font-size: 100px;
 }