看图效果
描述不好，直接上代码：
html代码：
<div [ngStyle]="alertRight" class="bottom-alert topAlter">
<ngb-alert *ngIf="successMessage" type="success" (close)="successMessage = null">{{ successMessage }}</ngb-alert>
<ngb-alert *ngIf="errorMessage" type="danger" (close)="errorMessage = null">{{ errorMessage }}</ngb-alert>
</div>
<div class="subNav">
<div class="container-fluid">
<nav [type]="'loadShipment'"></nav>
</div>
</div>
<div class="table-responsive stickyTable" style="padding-top: 134px;" *ngIf="!noRecord">
<table class="table table-striped" [rtList]="getHus" #list="rtList">
<thead>
<tr>
<th>
<span></span>
</th>
<th>
<span>Handling Unit ID</span>
</th>
<th>
<span>Stage Location</span>
</th>
<th>
<span>Truck</span>
</th>
<th>
<span>Delivery Date</span>
</th>
<th>
<span>Order Type</span>
</th>
<th>
<span>Load Position</span>
</th>
<th style="position: relative;" class="rightjustified" [style.top]="columnTop">
<span>Weight</span>
</th>
<th>
<span>Operator</span>
</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-pallet [ngForOf]="list.items" let-i="index">
<tr>
<td (click)="expandOrders(pallet)" style="cursor:pointer;">
<i [ngClass]="{'fa': true, 'fa-caret-right': !pallet.expandOrder,'fa-caret-down': pallet.expandOrder, 'fa-lg': true}"></i>
</td>
<td>{{pallet.handlingUnitId}}</td>
<td>{{pallet.stageLocation}}</td>
<td>{{pallet.carrier}}</td>
<td>{{pallet.deliveryDate| date:'MM/dd/yyyy'}}</td>
<td>{{pallet.orderCode}}</td>
<td>{{pallet.loadPosition}}</td>
<td class="rightjustified">{{pallet.weight| number:'1.3'}}</td>
<td>{{pallet.operator}}</td>
</tr>
<tr [hidden]='!pallet.expandOrder'>
<td style="background-color: white"></td>
<td colspan="10" style="padding:0px">
<table class="table table-striped" style="margin-bottom: 0px;">
<thead>
<tr>
<th style='width:4%'></th>
<th style='width:16%'>Delivery</th>
<th style='width:16%'>Customer</th>
<th style='width:16%'>Ship To</th>
<th style='width:16%'>SO Number</th>
<th style='width:16%'>Delivery Date/Time</th>
<th style='width:16%'>Truck</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-d [ngForOf]="pallet.deliveries" let-i="index">
<tr>
<td (click)="expandLineItems($event,pallet,d)" style="cursor:pointer;">
<i [ngClass]="{'fa': true, 'fa-caret-right': !d.expandItem,'fa-caret-down': d.expandItem, 'fa-lg': true}"></i>
</td>
<td>{{d.delivery|removeLeadingZeros}}</td>
<td>{{d.customer}}</td>
<td>{{d.shipTo|removeLeadingZeros}}</td>
<td>{{d.soNumber|removeLeadingZeros}}</td>
<td>{{d.dispatchTime| date:'MM/dd/yyyy hh:mm a'}}</td>
<td>{{d.carrier}}</td>
</tr>
<tr [hidden]='!d.expandItem'>
<td style="background-color: white"></td>
<td colspan="7" style="padding:0px">
<table class="table table-striped" style="margin-bottom: 0px;">
<thead>
<tr>
<th style='width:10%' class="rightjustified">Line</th>
<th style='width:16%'>Material</th>
<th style='width:30%'>Description</th>
<th style='width:14%' class="rightjustified">Qty</th>
<th style='width:10%'>UoM</th>
<th style='width:20%'></th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-line [ngForOf]="d.lineItems" let-i="index">
<tr>
<td class="rightjustified">{{line.line}}</td>
<td>{{line.material}}</td>
<td>{{line.description}}</td>
<td class="rightjustified">{{line.qty | number:'1.3'}}</td>
<td>{{line.uoM}}</td>
<td></td>
</tr>
</ng-template>
</tbody>
</table>
</td>
</tr>
</ng-template>
</tbody>
</table>
</td>
</tr>
</ng-template>
</tbody>
<tfoot>
<tr>
<td colspan="11">
<rt-status-progress>
<progress-bar></progress-bar>
</rt-status-progress>
<rt-status-no-data class="text-center">
0 records found
</rt-status-no-data>
<div>
<rt-status-done>
<rt-buffered-pager [defaultRowCount]="20" #rtPager>
<span>{{rtPager.pager.loadedCount}} record{{rtPager.pager.loadedCount > 1 ? 's' : ''}}
found</span>
<a *ngIf="rtPager.canLoadMore" tabindex="0" (click)="rtPager.loadMore()"
rtPreventDefaults="click" [class.hidden]="!rtPager.canLoadMore" [rtInfinite]="window"
href="#">Show more</a>
</rt-buffered-pager>
</rt-status-done>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="text-center text-muted" *ngIf="noRecord" style="padding-top:300px">
<img src="/assets/queue.png" />
<br>
<br>
<p style="margin-bottom:0px">There are no Handling Units in this queue.</p>
</div>
css:
.btn-group {
a {
width: 180px;
}
}
.wiz-container {
background: #4b4f45;
padding: 18px 0;
.badge {
background-color: orange;
color: #fff;
display: inline-block;
text-align: center;
margin-left: 10px;
}
.action-container {
position: absolute;
right: 20px;
}
.btn-secondary {
box-shadow: none;
&:first-child {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
&:last-child {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
}
.btn {
position: relative;
background: transparent;
color: #fff;
border-color: #fff;
cursor: pointer;
overflow: hidden;
span {
display: block;
position: absolute;
top: -1.5px;
left: -0.2px;
border: solid transparent;
border-left-color: #fff;
border-width: 20px;
z-index: 49;
i {
display: block;
position: absolute;
top: -18px;
left: -20px;
border: solid transparent;
border-left-color: #4b4f45;
border-width: 18px;
z-index:50;
}
}
&.active {
background: #fff;
color: #4b4f45;
&+.btn span {
border-left-color: #fff;
i {
border-left-color: #fff;
}
}
}
}
}
/*variables*/
$color-blue: #039be5;
$color-hover-blue: #06abfc;
$color-light-blue: #4fc3f7;
$color-btn-primary-focus: #67cbf8;
$color-btn-primary-active: #80d4f9;
$color-selected: #ccedfd;
$color-black: #212121;
$color-gray: #eeeeee;
$color-dark-grey: #5C707A;
$color-light-grey: #fafafa;
$color-muted-grey: #efefef;
$color-muted: #555;
$color-striped: #fcfcfc;
$color-white: #fff;
$font-medium: 14px;
$font-small: 12px;
$indent-unit: 8px;
/*variables*/
.filter-container {
background: #4b4f45;
.form-group>label {
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
}
select {
border-color: #fff;
color: #fff;
background: url('/assets/select.png') no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border-radius: 20px;
font-size: 12px;
font-weight: normal;
option {
background: #fff;
color: #000;
}
}
select::-ms-expand {
display: none;
}
}
.table-responsive {
margin-bottom: 80px;
}
/*mixins*/
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin opacity($opacity) {
-ms-opacity: $opacity;
opacity: $opacity;
}
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@mixin img-button {
width: 44px;
height: 44px;
padding: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: 999px;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
@include box-shadow(none);
}
@mixin icon-reset() {
background-image: url('data:image/png;base64,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');
}
@mixin icon-load() {
background-image: url('data:image/png;base64,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');
}
@mixin icon-cancel() {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAC90lEQVRYR82YrZITQRSFRyB4AB4AgUQgEDhWIBCbGXBIHgGBwK9EIFZErIxARKyIiECkMjMUAoFAIhCIFRFbxW6mpypi997uvkXYnO7p+U1O1Ve1ldM/t3q7e27fqK1GC/UoWRbvk6wcx5k6T1L1Lc6K3wz9/T3J1CzOyrN4WXxI8usnttuwev316nGSq5M4VT8ooJt6FL/iXH0cZetndrj+pFczU593g2hKOe9l1Y8Xfx/wv5xWZ4Mnbs0kWaiHdrp24hWgvfkHTNIpNMcl8cJO20xxWryhw3OFJugH+g8u1+/s9PXEHfGg/UOH8pMNI0y8smigIeFr0Ibjl9mzQ24DF8VmlF6/tGFh8W0wxAELhReOr1Ib3q7M1YU775GZDe9/mY9Cb/dsW45smP9EP3b4BesWSgEyG6aRzg1AQxddCY3tgg7gsQ2XbwZ1ghq56EpobA8TGy7fu/WyLhHyQhAhz8Pq+eLmnmRgqIETEfJCECHPh841TPKNG7gQIS8EEfK85OVpo7tXhLwQRMjzU84jWuZzbLoRIS8EEfJ88FmL+A2GTB8i5IUgQl4FF7TC9FjEphMR8kIQIa8K3hK1kx0R8kIQIa8K3hL8FIemCxHyQhAhr4IV5xCzOz9WIkJeCCLk+aBD95O2RHmGTB8i5IUgQp6XtPgS6YoMMj2IkBeCCHl+yrF+EmHTjQh5IYiQ5yVdv9LJD5ePYAMHIuSFIEKeC34uUfJzXwfMtS7UyEVXQmN7mOpgWVyYAw2cdCU0tgsuPdhwjfgEooaHAF9nOhfeVpPDNxhy2O6KzIN7iO48QLfFJU/KLS5Rx/1QbOJ8/dSGh8XPkIOpTyzVWxuWX/usXAr1K5jUAQ00ENOdWyFEJs8YdnvwQjUKVsQlz2HKr1x9D9yzVTK1i3KOJ2oPX12Vt0ET0eBHTR6tLvgL5vwodCkuzNGEE2K1HUAIdntNOTdotVebiCfU93ZenvKWoRXjGt3FVoArs4qcp5RjXk3qY1LERoqiW61o4riacEeRAAAAAElFTkSuQmCC');
}
/* mixins */
body,
html {
background: $color-light-grey;
font-size: $font-medium;
* {
outline: none !important;
}
}
h1,
h2 {
color: #049AE6;
}
h3,
h4,
h5,
h6 {
color: $color-black;
margin-bottom: 20px;
}
ul {
list-style: none;
&.bulleted {
li {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAAAEklEQVQYV2PwPfodjojiHP0OAERhIJH3C1fAAAAAAElFTkSuQmCC') no-repeat left top;
background-repeat: no-repeat;
background-position-y: 8px;
padding-left: 10px;
}
}
&.agenda {
padding-left: 30px;
ul {
padding-left: 30px;
}
li {
padding-left: 0;
}
@media (max-width: 768px) {
padding-left: 15px;
li {
padding-top: 2px;
}
ul {
padding-left: 15px;
}
}
}
}
a {
color: #147391;
}
code {
padding: 2px;
}
section {
margin-top: -60px;
padding-top: 60px;
&:target>h3,
&:target>h4 {
text-decoration: underline;
}
}
aside {
p {
vertical-align: middle;
}
padding: 15px;
margin: 20px 0 20px 25px;
border: 1px solid $color-muted-grey;
border-left-width: 5px;
border-left-color: $color-blue;
background-position: 10px center;
background-repeat: no-repeat;
@media (max-width: 768px) {
margin-left: 0;
}
}
.spinner {
display: table;
width: 100%;
height: 100vh;
.spinner-pusher {
display: table-cell;
text-align: center;
vertical-align: middle;
.spinner-wraper {
vertical-align: middle;
width: 100px;
height: 100px;
position: relative;
margin: 50px auto;
cursor: pointer;
border-radius: 110px;
-webkit-border-radius: 110px;
}
.spinner-body {
background-color: $color-light-grey;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
z-index: 2;
border-radius: 110px;
text-align: center;
font-size: 10px;
color: $color-light-grey;
line-height: 90px;
}
.spinner-line {
margin: 0 auto;
background: $color-light-blue;
background: -webkit-radial-gradient(20% 20%, circle cover, $color-light-blue 0%, transparent 60%, transparent 100%);
background: radial-gradient(circle at 20% 20%, $color-light-blue 0%, transparent 60%, transparent 100%);
border-radius: 110px;
padding: 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-name: spinner-rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinner-rotate;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spinner-rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
}
@-webkit-keyframes spinner-rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner-rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner-rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.btn-primary {
// background-color: $color-light-blue;
// border-color: $color-light-blue;
@include border-radius(0);
&:focus,
&:hover {
background-color: $color-btn-primary-focus;
border-color: $color-btn-primary-focus;
}
&:active {
&:focus {
background-color: $color-btn-primary-active;
border-color: $color-btn-primary-active;
@include box-shadow(none);
}
background-color: $color-btn-primary-active;
border-color: $color-btn-primary-active;
@include box-shadow(none);
}
&.docs-link {
padding: 10px 25px;
&+.docs-link {
margin-left: 15px;
}
@media (max-width:500px) {
width: 100%;
&+.docs-link {
margin-top: 5px;
}
}
}
}
.btn {
&.btn-reset {
margin-top: 21px;
margin-bottom: -5px;
@include img-button();
@include icon-reset();
}
&.btn-load {
margin-top: 21px;
margin-bottom: -5px;
@include img-button();
@include icon-load();
}
&.btn-cancel {
margin-top: 21px;
margin-bottom: -5px;
@include img-button();
@include icon-cancel();
}
}
div.toolbar {
text-align: right;
padding-bottom: 15px;
ul {
padding-left: 0;
margin-left: -5px;
list-style: none;
text-align: right;
margin-right: -5px;
margin-bottom: 0;
li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
}
@media (max-width: 768px) {
ul {
&:after {
content: '';
clear: both;
display: table;
}
&:before {
content: '';
clear: both;
}
li {
width: 50%;
float: left;
padding-top: 5px;
.btn {
width: 100%;
}
}
}
}
}
rt-status-done,
rt-status-failed,
rt-status-initial,
rt-status-no-data,
rt-status-progress,
rt-status-request-cancelled {
display: block;
text-align: center;
}
rt-demo-buffered-footer,
rt-demo-paged-footer {
display: block;
}
form {
label {
color: $color-muted;
font-weight: normal;
line-height: 1.5;
}
margin-bottom: 15px;
.btn {
margin-top: 21px;
margin-bottom: -5px;
&+.btn {
margin-left: 5px;
}
}
}
.rt-sortable {
position: relative;
padding-right: 45px;
cursor: pointer;
&:after {
content: '';
display: inline-block;
width: 22px;
height: 22px;
position: absolute;
top: 50%;
right: 0;
margin-top: -11px;
background-position: center center;
background-repeat: no-repeat;
}
&:hover {
&:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAALRJREFUOBHtVFEKwjAMrdZzCRs7SqG3kOEtCj3KWMF7VUwglTjRPHAfMlYIzR7vvb6FUuf29TcTyDmfudBAJ5RYax2F2yOaI0KSpB1xOzQ1ZKzSOt1/C2Uaq7TNB0ptGlPCCznedQnWDtrIfrD+I6U0EYdvhF4lxjhoYNmbM/beX0nEvGcJtvR6+TaNQwg3UhSlKoIp6L01jVlCCccm1X3Dftpp1jMXagK/FasnRRPuvI8TeADGiDU2vzXKpQAAAABJRU5ErkJggg==');
}
}
&.rt-sort-asc:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAFxJREFUOBFjYBgFoyEwgkJgzpw5diBMrJdZiFX49+/fBqhaJ2L0MBGjCOpSR6BaR2JdTZTBSK5lQGbjcxRBg5FcCzOHKFcTNBjowjqgif+QMVQMZtEoPRoCwzYEAEPeIwb043OFAAAAAElFTkSuQmCC');
}
&.rt-sort-desc:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAHZJREFUOBFjYBgFoyEw9EOAkZAXZs6cuQeoxhFN3f709HQXNDEULhMKDwuHmZm5CSgMUgfHUDEsqhFCBA1OSUk5BFS+H6GFYT9UDEkIk0nQYJAWoAsbYFqR2TAximhgWO8DYWINYSFWIdVdSqzFo+pGQ2AAQwAAIMMSMUdoIWEAAAAASUVORK5CYII=');
}
}
.table-responsive {
border: 0;
}
.table {
font-size: $font-small;
thead {
tr {
th {
background-color: $color-white;
font-weight: bold;
color: #053B75;
font-size: $font-small;
border-bottom-color: $color-gray;
}
}
}
tbody {
tr {
background-color: $color-white;
td {
border-top-color: $color-gray;
}
&:nth-of-type(even) {
background-color: $color-striped;
}
&:hover {
background-color: $color-light-grey;
}
&.rt-selected {
background-color: $color-selected;
}
}
}
tfoot {
tr {
background-color: $color-gray;
td {
border-top: 0;
padding-right: 40px;
vertical-align: middle;
.form-control {
display: inline-block;
width: 50px;
text-align: center;
padding: 6px;
vertical-align: middle;
}
}
}
}
}
section.alertify-logs {
bottom: 75px;
}
section.alertify-alert {
padding-top: 0;
margin-top: 0;
@include box-shadow(none);
@include border-radius(0);
}
.alertify-button-ok {
@include box-shadow(none);
@include border-radius(0);
background: $color-light-blue;
border-color: $color-light-blue;
color: $color-white;
text-decoration: none;
text-shadow: none;
&:focus,
&:hover {
@include box-shadow(none);
@include border-radius(0);
background: $color-btn-primary-focus;
border-color: $color-btn-primary-focus;
color: $color-white;
text-decoration: none;
}
&:active {
&:focus {
background: $color-btn-primary-active;
border-color: $color-btn-primary-active;
color: $color-white;
text-decoration: none;
@include box-shadow(none);
}
background: $color-btn-primary-active;
border-color: $color-btn-primary-active;
color: $color-white;
text-decoration: none;
@include box-shadow(none);
}
}
.control-group {
display: inline-block;
vertical-align: top;
background: #fff;
text-align: left;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 200px;
height: 210px;
margin: 10px;
}
.control {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 18px;
cursor: pointer;
font-size: 18px;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input~.control__indicator,
.control input:focus~.control__indicator {
background: #ccc;
}
.control input:checked~.control__indicator {
background: #2aa1c0;
}
.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
background: #0e647d;
}
.control input:disabled~.control__indicator {
background: #e6e6e6;
opacity: 0.6;
pointer-events: none;
}
.control__indicator:after {
content: '';
position: absolute;
display: none;
}
.control input:checked~.control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
left: 8px;
top: 4px;
width: 5px;
height: 8px;
border: solid #fff;
border-width: 0 1px 1px 0;
transform: rotate(45deg);
}
.control--checkbox input:disabled~.control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
left: 7px;
top: 7px;
height: 6px;
width: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled~.control__indicator:after {
background: #7b7b7b;
}
.select {
position: relative;
display: inline-block;
margin-bottom: 15px;
width: 100%;
}
.select select {
display: inline-block;
width: 100%;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 0;
border-radius: 0;
background: #e6e6e6;
color: #7b7b7b;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.select select::-ms-expand {
display: none;
}
.select select:hover,
.select select:focus {
color: #000;
background: #ccc;
}
.select select:disabled {
opacity: 0.5;
pointer-events: none;
}
.select__arrow {
position: absolute;
top: 16px;
right: 15px;
width: 0;
height: 0;
pointer-events: none;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover~.select__arrow,
.select select:focus~.select__arrow {
border-top-color: #000;
}
.select select:disabled~.select__arrow {
border-top-color: #ccc;
}
.hideGrid {
display: none;
}
.rightjustified{
text-align: right;
}
// 这个是主要的。
.stickyTable{
overflow: visible !important;
thead {
tr{
th{
position: sticky !important;
top: 134px !important;
}
}
}
}其实就是一个
position:sticky;
