/******************** 这里放组件样式 ********************/ /***** 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: var(--window-bottom);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-navBar-box{ display: flex;align-items: center;justify-content: space-between; padding: 0 20rpx;box-sizing: border-box; .nav-bar-icon{ width: 63rpx;height: 63rpx; background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover(); } .nav-bar-title{ font-size: 36rpx;color: #fff; } .nav-bar-other{ font-size: 30rpx;color: #fff; .key-note{color: #ffff01;} } } /***** 单选题 *****/ .ezy-danxuan-box{ .danxuan-title{ width: 231rpx;height: 63rpx; background-image: url("@/static/images/exam/danxuan-title.png");@include ezy-no-repeat-cover(); } .danxuan-question{ margin: 24rpx 0 42rpx;font-size: 32rpx;color: #333;line-height: 1.6;padding: 0 10rpx 0 20rpx;box-sizing: border-box; text-align: justify; } .danxuan-option{ width: 615rpx;height: 96rpx;line-height:96rpx;background-color:#fff;border-radius: 8px;margin-bottom: 20rpx; font-size: 32rpx;color: #333;box-sizing: border-box;padding: 0 24rpx;@include ezy-no-repeat-cover(); } .danxuan-option.active{ color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-active.png"); } .danxuan-option.showError{ color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-error.png"); } .danxuan-option.active_right{ color: #fff;background-color: transparent;background-image: url("@/static/images/exam/option-right.png"); } } /***** 模拟标题栏 *****/ .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; }