custom_nav_bar.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. .tn-custom-nav-bar__back {
  2. width: 100%;
  3. height: 100%;
  4. position: relative;
  5. display: flex;
  6. justify-content: space-evenly;
  7. align-items: center;
  8. box-sizing: border-box;
  9. background-color: rgba(0, 0, 0, 0.15);
  10. border-radius: 1000rpx;
  11. border: 1rpx solid rgba(255, 255, 255, 0.5);
  12. color: #FFFFFF;
  13. font-size: 18px;
  14. .icon {
  15. display: block;
  16. flex: 1;
  17. margin: auto;
  18. text-align: center;
  19. }
  20. &:before {
  21. content: " ";
  22. width: 1rpx;
  23. height: 110%;
  24. position: absolute;
  25. top: 22.5%;
  26. left: 0;
  27. right: 0;
  28. margin: auto;
  29. transform: scale(0.5);
  30. transform-origin: 0 0;
  31. pointer-events: none;
  32. box-sizing: border-box;
  33. opacity: 0.7;
  34. background-color: #FFFFFF;
  35. }
  36. }
  37. /* 自定义顶部导航栏 start */
  38. .custom-navbar {
  39. position: fixed;
  40. top: 0;
  41. left: 0;
  42. width: 100%;
  43. z-index: 9999;
  44. /* 返回按钮 */
  45. &__back {
  46. position: absolute;
  47. left: 30rpx;
  48. display: flex;
  49. align-items: center;
  50. justify-content: center;
  51. // padding: 0px 30rpx;
  52. // border-radius: 30rpx;
  53. font-size: 40rpx;
  54. }
  55. /* 标题 */
  56. &__title {
  57. position: absolute;
  58. left: 50%;
  59. line-height: 1;
  60. transform: translateX(-50%) translateY(50%);
  61. font-size: 32rpx;
  62. }
  63. }
  64. /* 自定义顶部导航栏 end */