1. 程式人生 > 實用技巧 >微信小程式授權頁面

微信小程式授權頁面

這裡也是比較簡單的

直接複製貼上就可以用,可能圖片位置不對。。

<template>
<view id="imporwer">
      <image src="../static/image/people.jpg" ></image>
      <view class="title">課程點評</view>
      <view class="t1">您尚未登陸</view>
      <view class="t2">需要獲取您的授權後進入商城</view>
      <
view class="b1" @tap="notUp">暫不登入</view> <view class="b2" >立即登陸 <button class='testbutton' open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true"></button></view> </view> </template> <style lang="scss" scoped> #imporwer{ position
: fixed; left: 0;top: 0; width: 100%;height: 100%; background: #ededed; letter-spacing: 1px; color: #7b7b7b; display: flex; align-items: center; flex-direction: column; image{ width: 220rpx;height: 220rpx; border-radius: 50%;margin: 80rpx 0 40rpx 0; } .title
{ font-size: 35rpx;color: #3a3a3a; } .t2,.t1{ font-size: 29rpx; } .t1{ margin-top: 40rpx; } .b1{ margin: 100rpx 0 40rpx 0; background-color: #acabab; } .b2{ background-color:#009944; position: relative; .testbutton{ position: absolute; top: 0;left: 0; width: 100%; height: 100%; opacity: 0; } color: #FFFFFF; } .b1,.b2{ text-align: center;line-height: 85rpx; width: 420rpx;height: 85rpx;border-radius: 40rpx; font-size: 37rpx; } } </style>