微信小程序获取用户信息的官方对话框

最新推荐文章于 2021-06-17 09:30:53 发布

飞飞翼

最新推荐文章于 2021-06-17 09:30:53 发布

阅读量361

点赞数

分类专栏： xiaochengxu

本文链接：https://blog.csdn.net/qq_36935391/article/details/88080668

版权

xiaochengxu 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

wxml

<view class='topView'>
    <view class='getinfoView right_center colonn'>
        <text class='text padding1'>微信授权</text>
        <view class='iconimg userinfo-avatar'>   
            <open-data type="userAvatarUrl" ></open-data>
        </view>
        <text class='text1 padding1'>酷酷的看风景</text>
        <button hover-class="btn_hover">点击登陆</button>
    </view>
</view>

wxss


@import "/pages/style/style.wxss";
page{
  width: 100%;
  height: 100%;
}
.right_center{  
   justify-content: flex-start;
  align-items: center;
}
.text{
  font-size:18px;
}
.text1{
  font-size:15px;
}

.padding1{/* //1 */
    margin-top: 10px;
    margin-bottom: 10px;
}


.topView{                      
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5)
}

.getinfoView{                    
  position: fixed;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  background-color: white;
 padding: 20px 10px 20px 10px;
  border-radius: 10px;
  margin-top: 45%;
}
.iconimg{
  width:70px;
  height:70px;
  border-radius: 70px;
  
}



/* 重写按钮 */
button {
   width: 80%;
  /* padding: 7px 0px 7px 0px; */
  color: red;
  border-radius: 10px;
  border:1px solid red;
  text-align: center;
  font-size: 15px;
  background-color: white;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn_hover{
  box-shadow: 0 0 3px #f00;
}
.userinfo-avatar {
  overflow:hidden;
  display: block;
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}