components.scss 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /******************** 这里放组件样式 ********************/
  2. /***** view *****/
  3. view{box-sizing: border-box;}
  4. /***** 对齐方式 *****/
  5. .ezy-tl{text-align: left;}
  6. .ezy-tc{text-align: center;}
  7. .ezy-tr{text-align: right;}
  8. /***** 状态栏 *****/
  9. .ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;}
  10. /***** 页面高度 *****/
  11. /* #ifdef H5 */
  12. //标题栏
  13. $titleBar-page: calc(100vh - var(--status-bar-height));
  14. //tabBar
  15. $titleBar-page: calc(100vh - var(--window-bottom));
  16. //标题栏 + tabBar
  17. $titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - var(--window-bottom));
  18. /* #endif */
  19. /* #ifdef APP-PLUS */
  20. //标题栏
  21. $titleBar-page: calc(100vh - var(--status-bar-height));
  22. //tabBar
  23. $titleBar-page: 100vh;
  24. //标题栏 + tabBar
  25. $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
  26. /* #endif */
  27. /***** 页面背景图 *****/
  28. // no-repeat cover
  29. @mixin ezy-no-repeat-cover($position: center) {
  30. background-position: $position;background-size: cover;background-repeat: no-repeat;
  31. }
  32. // no-repeat contain
  33. @mixin ezy-no-repeat-contain($position: center) {
  34. background-position: $position;background-size: contain;background-repeat: no-repeat;
  35. }
  36. /***** tabbar *****/
  37. .ezy-custom-tabbar{
  38. width: 100%;height: 150rpx;position: fixed;left: var(-window-left);right: var(-window right);
  39. bottom: 0;padding-bottom: env(safe-area-inset-bottom);box-sizing: border-box;z-index: 9;
  40. .tabbar-item-box{display: flex;flex-wrap: nowrap;justify-content: space-evenly;
  41. box-sizing: border-box;padding: 0 46rpx;
  42. }
  43. .tabbar-item{width: 135rpx;height: 144rpx;@include ezy-no-repeat-cover;z-index: 2;}
  44. }
  45. .ezy-custom-tabbar::before{
  46. content: '';width: 750rpx;height: 100rpx;left: 0;bottom: 0;position: absolute;
  47. background-image: url("@/static/images/tabbar/tabbar-bg.png");@include ezy-no-repeat-cover(top);
  48. }
  49. /***** 模拟标题栏 *****/
  50. .ezy-title-bar {
  51. height: calc(44px + env(safe-area-inset-top));
  52. position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right);
  53. background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box;
  54. display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998;
  55. }