登录页添加小程序说明

miniprogram/pages/login/login.ts

@@ -2,7 +2,8 @@ import { login } from '../../api/index'
 Page({
   data: {
     userName: '',
-    password: ''
+    password: '',
+    noteVisible:false
   },
   // @ts-ignore
   handleLogin: function () {
@@ -78,5 +79,16 @@ Page({
   },
   onLoad () {
 
+  },
+  showNote () {
+    console.log(1111)
+    this.setData({
+      noteVisible: !this.data.noteVisible
+    })
+  },
+  closeNote () {
+    this.setData({
+      noteVisible: false
+    })
   }
 })

miniprogram/pages/login/login.wxml

@@ -39,4 +39,18 @@
    </view>
    </view>
   </view>
+  <view class="note-content">
+      <view class="note">
+      <view class="intro-note" bindtap="showNote">
+        <view class="note-title">介绍说明</view>
+        <image src="../../assets/images/login-note.png" />
+      </view>
+      <view class="intro-content" wx:if="{{noteVisible}}">
+        <view class="close">
+          <image catchtap="closeNote" src="../../assets/images/login-close.png" />
+        </view>
+        <view class="program-intro">该小程序是微笑榆山党建引领城乡共治平台的数据端，用于处理居民端提报的一些问题，并及时处理或向上反馈。</view>
+      </view>
+    </view>
+  </view>
 </view>

miniprogram/pages/login/login.wxss

@@ -153,3 +153,63 @@ page {
   font-weight:500;
   color:rgba(255,255,255,1);
 }
+.note-content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.note {
+  width: 640rpx;
+  box-sizing: border-box;
+  padding: 0 20rpx;
+  position: relative;
+  top: 130rpx;
+}
+.note .intro-note {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: 40rpx;
+  position: relative;
+  z-index: 100;
+}
+.note .intro-note .note-title {
+  font-size: 24rpx;
+  color: #eee;
+}
+.note .intro-note image {
+  width: 26rpx;
+  height: 26rpx;
+  margin-left: 7rpx;
+  position:relative;
+}
+.note .intro-content {
+  width: 100%;
+  position: relative;
+  top: -20rpx;
+}
+.note .intro-content .close {
+  width: 100%;
+  height: 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-bottom: 10rpx;
+}
+.note .intro-content .close image {
+  width: 30rpx;
+  height: 30rpx;
+  position:relative;
+}
+.note .intro-content .program-intro {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20rpx 25rpx;
+  font-size: 26rpx;
+  color: #666;
+  line-height: 36rpx;
+  border-radius: 24rpx;
+  background: #fff;
+  text-indent: 52rpx;
+}