【开发】 修改首页消息弹窗的样式

pages/home/home.js

@@ -70,6 +70,7 @@ Page({
       content:content,
       clickItem: e
     })
+    console.log(this.data.clickItem);
   },
   /**
    * 弹出框蒙层截断touchmove事件

pages/home/home.wxml

@@ -68,13 +68,16 @@
   <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
   <view class="modal-dialog" wx:if="{{showModal}}">
     <view class="modal-content">
+    <image src="../../assets/images/msg.png" style="width:200rpx;height:200rpx; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-186%);"></image>
       <!-- {{content}} -->
+      <view class="title">{{clickItem.currentTarget.dataset.message.titile_dictText}}</view>
       <!-- rich-text 会解析html模板中的html标签 -->
       <rich-text nodes="{{content}}"></rich-text>
       <text wx:if="{{signUpBool}}" style="color:#069f99" bindtap="goSignUpPage"> 去报名 </text>
     </view>
     <view class="modal-footer">
       <view class="btn-cancel" bindtap="hideModal" data-status="cancel">我知道了</view>
+      <image src="../../assets/images/close.png" class="close-img" bindtap="hideModal"></image>
     </view>
   </view>
 

pages/home/home.wxss

@@ -139,7 +139,7 @@ page{
 }
 .modal-dialog {
   width: 540rpx;
-  overflow: hidden;
+  /* overflow: hidden; */
   position: fixed;
   top: 50%;
   left: 0;
@@ -149,19 +149,47 @@ page{
   border-radius: 8rpx;
 } 
 .modal-content {
+  position: relative;
   padding: 50rpx;
+  margin-top: 40rpx;
   text-align: center;
   color: #666
 }
+.modal-content .title {
+  text-align: center;
+  color: #069F99;
+  font-family: PingFang-SC-Bold;
+  font-size: 16pt;
+  font-size: 700;
+  padding: 40rpx 0 15rpx 0;
+}
+/* 这个样式没有用 不知道为啥 */
+.modal-dialog .modal-conten modal-img {
+  position: absolute;
+  width: 100rpx!important;
+  height: 100rpx!important;
+  top: 50%;left: 50%;transform: translate(-50%,-186%);
+}
 .modal-footer {
+  position: relative;
   height: 70rpx;
-  border-top: 1px solid #dedede;
+  /* border-top: 1px solid #dedede; */
+  padding: 20rpx;
   font-size: 32rpx;
   line-height: 70rpx;
 }
+.modal-footer .close-img {
+  position: absolute;
+  bottom: -20rpx;
+  left: 50%;
+  transform: translate(-50%,100%);
+  height: 40rpx;
+  width: 40rpx;
+}
 .btn-cancel {
   width: 100%;
   color: #fff;
+  border-radius: 10rpx;
   background: #069F99;
   text-align: center;
   border-right: 1px solid #dedede;