123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- page {
- --height: 44px;
- --right: 190rpx;
- }
- .navigation-bar {
- overflow: hidden;
- }
- .navigation-bar .android {
- --height: 48px;
- --right: 222rpx;
- }
- .navigation-bar-placeholder {
- position: relative;
- height: var(--height);
- z-index: 50;
- }
- .navigation-bar-inner {
- position: fixed;
- top: 0;
- left: 0;
- display: flex;
- align-items: center;
- padding-right: var(--right);
- width: calc(100% - var(--right));
- height: var(--height);
- z-index: 5001;
- }
- .navigation-bar-inner .navigation-bar-left {
- position: relative;
- display: flex;
- align-items: center;
- padding-left: 8px;
- box-sizing: border-box;
- }
- .navigation-bar-inner .navigation-bar-left .btn-back {
- width: 17px;
- height: 17px;
- }
- .navigation-bar-inner .navigation-bar-left .btn-back .icon-back {
- width: 100%;
- height: 100%;
- }
- /* 放大焦点 */
- .nice-focus {
- position: relative;
- }
- .nice-focus::after {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -35rpx;
- margin-left: -35rpx;
- margin-right: -35rpx;
- width: 70rpx;
- height: 70rpx;
- }
- .navigation-bar-inner .navigation-bar-center {
- position: relative;
- display: flex;
- align-items: center;
- flex: 1;
- width: 0;
- overflow: hidden;
- }
- /* 标题 */
- .navigation-bar-inner .title {
- display: block;
- flex: 1;
- margin-top: -1px;
- width: 0;
- height: 24px;
- line-height: 24px;
- font-size: 34rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- /* 标题loading */
- .navigation-bar-inner .navigation-bar-loading:before {
- content: "";
- display: inline-block;
- position: relative;
- top: -1px;
- margin-right: 3px;
- width: 20px;
- height: 20px;
- vertical-align: middle;
- animation: loading 1s steps(12, end) infinite;
- background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
- background-size: 100%;
- }
- @keyframes loading {
- 0% {
- transform: rotate3d(0, 0, 1, 0deg);
- }
- 100% {
- transform: rotate3d(0, 0, 1, 360deg);
- }
- }
|