开发领取勋章弹窗样式及调整关闭按钮大小

components/medal/index.less

@@ -4,12 +4,101 @@
   left: 0px;
   width: 100vw;
   height: 100vh;
+  display: flex;
+  justify-content: center;
   background-color: rgba(0, 0, 0, 0.35);
 
   .media {
-    width: 470rpx;
-    height: 608rpx;
+    position: relative;
+    margin-top: 200rpx;
+    width: 480rpx;
+    height: 620rpx;
+    padding: 24rpx;
+    box-sizing: border-box;
     background-color: #FEF2C7;
     border-radius: 20rpx;
+
+    .close {
+      position: absolute;
+      right: -50rpx;
+      top: -50rpx;
+      width: 58rpx;
+      height: 58rpx;
+    }
+
+    .body {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      padding: 24rpx 0rpx 30rpx;
+      text-align: center;
+      box-sizing: border-box;
+      background-color: white;
+      border-radius: 20rpx;
+
+      .title {
+        font-size: 38rpx;
+        letter-spacing: 4rpx;
+      }
+
+      .falsh {
+        position: absolute;
+        bottom: 20rpx;
+        left: -95rpx;
+        width: 580rpx;
+        height: 580rpx;
+        animation: falsh-identifier 4.5s infinite linear;
+      }
+
+      .mediaImg {
+        position: relative;
+        z-index: 2;
+        padding: 70rpx 0rpx 60rpx;
+        width: 274rpx;
+        height: 240rpx;
+        animation: falsh-scale 2s infinite linear;
+      }
+
+      .see {
+        position: relative;
+        z-index: 2;
+        display: inline-block;
+        padding: 14rpx 66rpx;
+        font-size: 30rpx;
+        background-image: linear-gradient(270deg, #FC5556 0%, #F84041 100%, #14C962 100%);
+        box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+        border-radius: 50rpx;
+        color: white;
+      }
+    }
+  }
+}
+
+/* 转圈动画 */
+@keyframes falsh-identifier {
+  0% {
+    transform: rotate(0deg) scale(0.7);
+  }
+
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+
+  100% {
+    transform: rotate(360deg) scale(0.7);
+  }
+}
+
+@keyframes falsh-scale {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+
+  100% {
+    transform: scale(1);
   }
 }

components/medal/index.wxml

@@ -1,6 +1,12 @@
 <view class="mediaBox">
-  <view class="mediaBg"></view>
+  <!-- <view class="mediaBg"></view> -->
   <view class="media">
-    
+    <image src="/static/lollipop.png" class="close" />
+    <view class="body">
+      <view class="title">恭喜获得新勋章</view>
+      <image src="/static/01.png" class="mediaImg" />
+      <image src="/static/falsh.png" class="falsh" />
+      <view class="see">立即查看</view>
+    </view>
   </view>
 </view>

components/medal/index.wxss

@@ -4,11 +4,88 @@
   left: 0px;
   width: 100vw;
   height: 100vh;
+  display: flex;
+  justify-content: center;
   background-color: rgba(0, 0, 0, 0.35);
 }
 .mediaBox .media {
-  width: 470rpx;
-  height: 608rpx;
+  position: relative;
+  margin-top: 200rpx;
+  width: 480rpx;
+  height: 620rpx;
+  padding: 24rpx;
+  box-sizing: border-box;
   background-color: #FEF2C7;
   border-radius: 20rpx;
 }
+.mediaBox .media .close {
+  position: absolute;
+  right: -50rpx;
+  top: -50rpx;
+  width: 58rpx;
+  height: 58rpx;
+}
+.mediaBox .media .body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 24rpx 0rpx 30rpx;
+  text-align: center;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 20rpx;
+}
+.mediaBox .media .body .title {
+  font-size: 38rpx;
+  letter-spacing: 4rpx;
+}
+.mediaBox .media .body .falsh {
+  position: absolute;
+  bottom: 20rpx;
+  left: -95rpx;
+  width: 580rpx;
+  height: 580rpx;
+  animation: falsh-identifier 4.5s infinite linear;
+}
+.mediaBox .media .body .mediaImg {
+  position: relative;
+  z-index: 2;
+  padding: 70rpx 0rpx 60rpx;
+  width: 274rpx;
+  height: 240rpx;
+  animation: falsh-scale 2s infinite linear;
+}
+.mediaBox .media .body .see {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  padding: 14rpx 66rpx;
+  font-size: 30rpx;
+  background-image: linear-gradient(270deg, #FC5556 0%, #F84041 100%, #14C962 100%);
+  box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+  border-radius: 50rpx;
+  color: white;
+}
+/* 转圈动画 */
+@keyframes falsh-identifier {
+  0% {
+    transform: rotate(0deg) scale(0.7);
+  }
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+  100% {
+    transform: rotate(360deg) scale(0.7);
+  }
+}
+@keyframes falsh-scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

components/readingTips/index.less

@@ -211,9 +211,11 @@
 
     .share_cancel {
         position: absolute;
-        right: 50rpx;
-        top: -80rpx;
+        left: 0px;
+        right: 0px;
+        margin: auto;
+        top: -64rpx;
         width: 60rpx;
-        height: 80rpx;
+        height: 60rpx;
     }
 }

components/readingTips/index.wxss

@@ -179,8 +179,10 @@
 }
 .attr_box .share_cancel {
   position: absolute;
-  right: 50rpx;
-  top: -80rpx;
+  left: 0px;
+  right: 0px;
+  margin: auto;
+  top: -64rpx;
   width: 60rpx;
-  height: 80rpx;
+  height: 60rpx;
 }