/******************** 这里放组件样式 ********************/ /***** view *****/ view{box-sizing: border-box;} /***** 对齐方式 *****/ .ezy-tl{text-align: left;} .ezy-tc{text-align: center;} .ezy-tr{text-align: right;} /***** 状态栏 *****/ .ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;} /***** 页面高度 *****/ /* #ifdef H5 */ //标题栏 $titleBar-page: calc(100vh - var(--status-bar-height)); //tabBar $titleBar-page: calc(100vh - var(--window-bottom)); //标题栏 + tabBar $titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - var(--window-bottom)); /* #endif */ /* #ifdef APP-PLUS */ //标题栏 $titleBar-page: calc(100vh - var(--status-bar-height)); //tabBar $titleBar-page: 100vh; //标题栏 + tabBar $titleBar-tabBar-page: calc(100vh - var(--status-bar-height)); /* #endif */ /***** 页面背景图 *****/ // no-repeat cover @mixin ezy-no-repeat-cover($position: center) { background-position: $position;background-size: cover;background-repeat: no-repeat; } // no-repeat contain @mixin ezy-no-repeat-contain($position: center) { background-position: $position;background-size: contain;background-repeat: no-repeat; } /***** tabbar *****/ .ezy-custom-tabbar{ width: 100%;height: 150rpx;position: fixed;left: var(-window-left);right: var(-window right); bottom: 0;padding-bottom: env(safe-area-inset-bottom);box-sizing: border-box;z-index: 9; .tabbar-item-box{display: flex;flex-wrap: nowrap;justify-content: space-evenly; box-sizing: border-box;padding: 0 46rpx; } .tabbar-item{width: 135rpx;height: 144rpx;@include ezy-no-repeat-cover;z-index: 2;} } .ezy-custom-tabbar::before{ content: '';width: 750rpx;height: 100rpx;left: 0;bottom: 0;position: absolute; background-image: url("@/static/images/tabbar/tabbar-bg.png");@include ezy-no-repeat-cover(top); } /***** 模拟标题栏 *****/ .ezy-title-bar { height: calc(44px + env(safe-area-inset-top)); position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right); background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box; display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998; }