記錄常用的一些樣式

听着music睡發表於2024-08-20
// 頁面外層style
.mPage
    width: 100%
    height: 100%
    font-size: 28rpx
    background-color: #f7f7f7
    
/* 水平排列 */
.x-row 
    display: flex
    flex-direction: row
    align-items: center


/* 水平排列 居中 */
.x-row-center 
    display: flex
    flex-direction: row
    align-items: center
    justify-content: center


/* 垂直排列 */
.x-column 
    display: flex
    flex-direction: column
    justify-content: center


/* 垂直排列 居中 */
.x-column-center 
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
// 分割線
.x-divide
    width: 100%
    height:2rpx
    margin-left: 30rpx
    background: #F1EEE7
// 底部固定view  有底部內邊距
.x-fixdBottom
    position: fixed
    bottom: 0
    left: 0
    z-index: 999
    width: 100%
    padding-bottom: constant(safe-area-inset-bottom)
    padding-bottom: env(safe-area-inset-bottom)

// scrollview內邊距  ，底部內邊距安全區域，box-sizing控制不影響高度
// https://www.dongjunhui.com/archives/452/
.x-scrollview-pad
    padding-bottom: constant(safe-area-inset-bottom)
    padding-bottom: env(safe-area-inset-bottom)
    box-sizing: border-box

相關文章