commit

src/pages/person/accessRecord.js

   }
 
   state = {
-
+    popVisible: false,
   }
 
   componentDidShow() {
     // Taro.showLoading()
   }
+  handleMaskClose() {
+    this.setState({
+      popVisible: false,
+    })
+  }
+  activityList(){
+    this.setState({
+      popVisible: true,
+    })
+  }
   renderPop() {
     return (
       <View className="pop-box">
 
 
         <View className="content">
-
+          <Icon className="iconfont close icon-buoumaotubiao20" onClick={this.handleMaskClose}></Icon>
+          <View className="activity-item">
+            <View className="name">
+              活动名称展示处活动名称展示处活动名么的事借款部分手机电脑热风
+            </View>
+            <View className="time">
+              2019-12-06 12:23:54
+            </View>
+          </View>
         </View>
-
-
-
       </View>
     )
   }
 
   render() {
-
+    const {popVisible} = this.state
     return (
       <Block>
-        {this.renderPop()}
+        {popVisible&&this.renderPop()}
         <View className='access-page'>
           <View className='item'>
             <View className="tag">我的客户</View>
             <Image className="touxiang" src={require('@assets/default-avatar.png')}></Image>
             <View className="info-top">
               <View className="name">曹建芳</View>
-              <Image className="goutong-icon" src={require('@assets/person/zixun.png')}></Image>
-              <View className="goutong">在线沟通</View>
+              <View style="display: flex;align-items: center;"><Image className="goutong-icon" src={require('@assets/person/zixun.png')}></Image><Text className="goutong">在线沟通</Text></View>
             </View>
-            <View className="activity-name">
+            <View className="activity-name" onClick={this.activityList}>
               活动名称展示处活动名称展示处活动名么的事借款部分手机电脑热风
-        </View>
+            </View>
+            <Text className="right-icon"></Text>
             <View className="activity-time">
               2019-12-06 12:23:54
-        </View>
+            </View>
           </View>
         </View>
       </Block>

src/pages/person/index.scss

     position: relative;
     .tag{
       position: absolute;
-      right: 0;
-      top: 0;
-      background-color: $primary-color;
-      padding: 10px 18px 10px 24px;
-      border-radius:0px 12px 0px 36px;
-      font-size: 26px;
+      left: 26px;
+      top: 102px;
+      width:96px;
+      height:32px;
+      line-height: 32px;
+      text-align: center;
+      background:rgba(237,202,115,1);
+      border-radius:2px;
+      font-size: 22px;
       color: #fff;
     }
     .touxiang{
       top: 46px;
       left:140px;
       align-items: center;
+      justify-content: space-between;
+      width: 520px;
       .name{
         font-size: 40px;
         color: #000;
         @include text-ellipsis;
       }
       .goutong-icon{
-        width:40px;
-        height:40px;
+        width:44px;
+        height:44px;
         background:rgba(255,219,179,0.2);
-        border-radius: 20px;
-        margin: 0 20px 0 30px;
+        border-radius: 22px;
+        margin: 0 10px;
       }
       .goutong{
-        font-size: 30px;
+        font-size: 38px;
         color: $primary-color;
+        border-bottom: 4px solid #EDCA73;
+        line-height: 28px;
       }
+      
+    }
+    .right-icon{
+      position: absolute;
+      right: 30px;
+      top: 150px;
+      width:20px;
+      height:20px;
+      border-top: 3px solid #888888;
+      border-right: 3px solid #888888;
+      transform:rotate(45deg);
     }
     .activity-name{
       font-size: 32px;
       width: 92vw;
       height: 600px;
       position: absolute;
-      left: 50%;
-      top: 44%;
-      margin-left: -46vw;
-      transform: translateY(-50%);
+      left: 4vw;
+      top: 12vh;
       background-color: #fff;
       border-radius: 12px;
-      padding: 30px;
-      text-align: center;
+      padding: 20px 20px;
+      .activity-item{
+        padding: 16px 30px;
+        border-bottom: 2px solid rgba(0,0,0,0.08);
+        .name{
+          font-size: 32px;
+          color: #353535;
+          width: 600px;
+          @include text-ellipsis;
+        }
+        .time{
+          font-size: 26px;
+          color:rgba(0,0,0,0.33);
+          text-align: right;
+          margin-top: 20px;
+        }
+      }
+    }
+    .close{
+      font-size: 48px;
+      color: rgba(0,0,0,0.3);
+      float: right;
     }
 }