/******************** 这里放组件样式 ********************/ /***** 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;} /***** 超出省略 *****/ // 文本超出省略号显示 (一行) @mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;} // 文本超出省略号显示 (多行) @mixin multi-line-ellipsis($rows: 3){-webkit-line-clamp:$rows;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;display: -webkit-box;white-space: normal !important;-webkit-box-orient: vertical;} /***** 页面高度 *****/ /* #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; } // 全屏的popup弹窗 .ezy-popup-width-all{ width: 100%; .uni-popup__wrapper{width: 100%;} } /***** 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 96rpx; } .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 20rpx;box-sizing: border-box; .nav-bar-icon{ width: 24rpx;height: 38rpx; 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;} } } // 两个元素 .icon-title-navBar-box{ display: flex;align-items: center;justify-content: center; padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative; .nav-bar-title{ font-size: 36rpx;height: 63rpx;line-height: 63rpx;color: #fff;max-width: 70%; } .nav-bar-icon{ width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: 12rpx; background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover(); } } /***** 单选题 *****/ .ezy-danxuan-box{ margin: 0 10rpx; .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;word-wrap: break-word;word-break: break-all; } .danxuan-option{ width: 596rpx;height: 93rpx;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"); } } /***** 试题白色的框 *****/ .shiti-frame-box{ flex: 1;width: 92%;height: auto;background-color: rgba(255, 255, 255, 0.6);border-radius: 10px; margin: 12rpx auto 32rpx;position: relative;padding: 10% 0 6%;box-sizing: border-box;display: flex;flex-direction: column; } .shiti-frame-box::before{ content: "";display: block;background-color: rgba(255, 255, 255, 0.6);border-radius: 0 0 10rpx 10rpx; position: absolute;top: 20rpx;left: 20rpx;right: 20rpx;bottom: 30rpx;z-index: 1; } /***** 模拟标题栏 *****/ .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; } // 小的提示弹窗 .ezy-tip-dialog{ .tip-content-box{@include ezy-no-repeat-cover;box-sizing: border-box;text-align:center;} .tip-title{ color: #343434;font-size: 38rpx;margin-bottom: 24rpx; } .tip-content{ color: #666;font-size: 32rpx;padding-bottom: 42rpx; border-bottom: 1px dashed #70cbf4;line-height: 1.6; } .tip-btn-box{ width: 100%;display: flex;justify-content: space-between; .not-confirm-btn,.confirm-btn{ width: 208rpx;height: 83rpx;@include ezy-no-repeat-cover;margin: 30rpx 32rpx 0; } .not-confirm-btn{background-image: url("@/static/images/common/tip-cancel-btn.png");} .confirm-btn{background-image: url("@/static/images/common/tip-confirm-btn.png");} } } .tip-small-dialog{ .tip-content-box{ width: 625rpx;height: 365rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-small-bj.png"); } } .tip-middle-dialog{ .tip-content-box{ width: 625rpx;height: 423rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-middle-bj.png"); } } .tip-big-dialog{ .tip-content-box{ width: 625rpx;height: 519rpx;padding: 42rpx 48rpx; background-image: url("@/static/images/common/tip-big-bj.png"); } .tip-content{min-height: 240rpx;text-align: justify;} }