我的頁分為登錄、注冊、我的,如果登錄了那么就顯示我的頁面否則顯示登錄頁。
登錄頁:
我的頁:
一、登錄頁制作
1.1 登錄頭制作
首先我們創建一個行,命名為登錄塊,設置高度為包裹:
之后將會在這個行中包裹對應的登錄頁面。
登錄頁面原版可以看見其中有一個 logo 居于正中間:
可以理解為一個行設置具體的高度,并且給予了垂直水平居中,而中間紅色部分是 logo 區域,我們只需要創建一個指定大小的行,設置背景色就會居中。
接著創建一個行,命名為 logo,設置背景色透明,高度為 150px,并且設置垂直和水平對齊為居中:
接著創建在 logo 下創建一個行,給予這個行 80*80px 打大小,設置其背景色即可:
隨后制作登錄信息內容:
1.2 登錄信息制作
登錄信息可以明顯的知道,是一個行包裹,每行信息為一個文本和一個輸入框,那么此時創建一個行命名為登錄信息,背景色透明,高度包裹,水平對齊為居中:
接著在這個行中創建一個行命名為 登錄驗證,顧名思義表示登錄信息和驗證碼獲取區域,需要設置其垂直水平對齊為居中,背景色透明、高度包裹:
接著創建兩個行,一個命名為號碼,另一個命名為驗證碼,一個用于驗證碼內容一個是號碼內容,需要注意,設置垂直對齊為底部,為了方便其內容高度不一致導致的對齊問題:
接著創建一個輸入框和一個文本:
想要使輸入框有以上下劃線效果只需要設置其父容器只顯示下邊距即可:
此時還需要注意,需要設置輸入框取消顯示邊框及圓角:
號碼部分內容也同理可得:
此時發現未知擺錯,調換一下位置即可:
接著創建一個按鈕和一個文本即可:
由于是垂直和左右居中,此時將會自動居中。
1.3 注冊信息制作
注冊信息制作很簡單,直接賦值一個更改對應的文本即可:
那如何使其調換呢?
此時只需要隱藏其中一個塊即可,例如隱藏注冊塊:
給登錄的注冊跳轉一個事件,點擊后跳轉到登錄信息,登錄塊顯示,當前注冊塊消失即可:
同樣,我們也需要到注冊塊編寫事件,注冊塊點擊后跳轉到登錄塊,注冊塊消失即可:
記得設置完事件后要點擊眼睛使其默認隱藏:
二、我的頁面制作
2.1 我的頁面與登錄注冊頁邏輯
此時在什么時候才顯示我的頁面呢?肯定是已登錄時顯示我的頁面,未登錄顯示登錄注冊頁,那么我們此時應該有一個變量作為登錄判斷。
此時新建一個數字變量命名為UID,默認為0:
接著給予一個 if 判斷,將注冊和登錄塊都放到這個 if 容器之下:
接著給這個 if 容器一個條件,當 UID 等于 0 則顯示此內容:
隨后再創建一個 if 容器,用于判斷 UID 不等于 1 則顯示該部分內容:
我們可以重命名兩個 if 容器,使其更清晰:
2.2 我的頁面制作
接著在這個 if 語句內創建1個行,命名為頭部,需要更高高度,給予對應的內邊距:
接著在這個頭部行內創建兩個內容,一個是頭像一個是文本,頭像我給予 50*50px 的寬度:
那么此時頭部制作完成。
接著創建一個行,命名為票券,在內部創建兩個列:
當然票券給予對應的內邊距,左右列寬度都為 50%,高度為包裹。
接著直接創建對應的圖片和文本即可:
要注意,一定要設置水平和垂直為居中,否則內容就不居中了:
接著創建是一個廣告行,具體內容重復不再贅述(自由設置大小邊距):
接著創建一個幫助反饋行,這個行包含一個內容行,包含的內容行內兩個列,一個叫做左一個叫做右,分別存儲和文本和一個進入提示:
依舊給予左右 50% 寬度,設置對應的高度為包裹,以及幫助反饋和內容行的內邊距:
接著添加對應文本信息:
創建多個文本信息:
2.3 管理員入口檢查
此時管理員入口應該在只有管理員用戶登錄時才可以顯示,那么此時創建一個變量,命名為用戶類型:
當這個類型為管理員時,那么將顯示管理員路口。
此時創建一個 if 容器,使管理員入口放入其中:
接著設置條件容器條件:
這些判定以后加上后臺再逐一實現。