[完善]根据中化4.21号文档修改

package-lock.json

@@ -2435,7 +2435,7 @@
     },
     "@babylonjs/core": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@babylonjs/core/-/core-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/core/download/@babylonjs/core-4.2.1.tgz",
       "integrity": "sha512-Z2ZVNRKPB1UvmMeqQtxCJKrQtQ/hb5FcAZi66YEEE0MKBQlLmf6oZEM9vS1RljPK7NZoV/dZSdwjJgiQlGsuhA==",
       "requires": {
         "tslib": ">=1.10.0"
@@ -2443,7 +2443,7 @@
     },
     "@babylonjs/gui": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@babylonjs/gui/-/gui-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/gui/download/@babylonjs/gui-4.2.1.tgz",
       "integrity": "sha512-6gOolbWYFO5lrRWKunawYWQkX4a47dvuiIBrEmY6eKRN97e4f7YrR7oYolqeWFHLXzbn0JR0blOYQyUB5jQqmg==",
       "requires": {
         "@babylonjs/core": "4.2.1",
@@ -2452,7 +2452,7 @@
     },
     "@babylonjs/inspector": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@babylonjs/inspector/-/inspector-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/inspector/download/@babylonjs/inspector-4.2.1.tgz",
       "integrity": "sha512-P0l3oAVniyxYJIgpZsAJ3veJnA9Sq02HLsy7Dr3y5UOA8WP0n7X1Uv2T1MbONdTkXJ1YoX/KBfAYVAA81FXhbg==",
       "requires": {
         "@babylonjs/core": "4.2.1",
@@ -2466,7 +2466,7 @@
     },
     "@babylonjs/loaders": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@babylonjs/loaders/-/loaders-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/loaders/download/@babylonjs/loaders-4.2.1.tgz",
       "integrity": "sha512-huLdk18nTqwXHYIbxpXRTo1smcL1eCD8TvvyWiHciRjPttpRNjoACSR/G2J2FD0ymSBu8ZS8cdMvq1by7x2DsA==",
       "requires": {
         "@babylonjs/core": "4.2.1",
@@ -2476,7 +2476,7 @@
     },
     "@babylonjs/materials": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@babylonjs/materials/-/materials-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/materials/download/@babylonjs/materials-4.2.1.tgz",
       "integrity": "sha512-G4mfmixt2BnATaa2/uhf7xfZv4fqD6bGHocbEWT1Iu0KOJcpU7Q0EYjN8bqx78hVFjd94e4g0/7Bey2JaGrakA==",
       "requires": {
         "@babylonjs/core": "4.2.1",
@@ -2485,7 +2485,7 @@
     },
     "@babylonjs/serializers": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/@babylonjs/serializers/-/serializers-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/serializers/download/@babylonjs/serializers-4.2.1.tgz",
       "integrity": "sha512-G4Jw9ILUJp8hO49Jg+sxVAKfYMZlgxGClNrUKCOcsIGWg5Yy0hKd1BZd86wEiyJAYt+MDpuocWCShzkEV2mJhA==",
       "requires": {
         "@babylonjs/core": "4.2.1",
@@ -5175,12 +5175,12 @@
     },
     "babylonjs": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/babylonjs/-/babylonjs-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/babylonjs/download/babylonjs-4.2.1.tgz",
       "integrity": "sha512-FQdJ2VTENUpUJQ30ddihwTjV6K94kglET0P7jV8OQzjA4eez3sotmG22Fn9+8yb069SA26KnrAGOI2sKMQ7BCw=="
     },
     "babylonjs-gltf2interface": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmmirror.com/babylonjs-gltf2interface/-/babylonjs-gltf2interface-4.2.1.tgz",
+      "resolved": "https://registry.npmmirror.com/babylonjs-gltf2interface/download/babylonjs-gltf2interface-4.2.1.tgz",
       "integrity": "sha512-ZBfKgIoztO1x1nyf9aPQJ+WXmB6Kw0VlyxvcKchIixbICqeeExiN8nmjvypwXC4hl+5ZDMnUKQNrIhh7uzulnA=="
     },
     "backo2": {

package.json

@@ -81,4 +81,4 @@
     "tslint": "~5.15.0",
     "typescript": "~3.7.5"
   }
-}
+}

src/app/pages/criminal-records-admin/criminal-records-admin.component.html

@@ -21,10 +21,10 @@
         <nz-form-item class="searchParams">
           <nz-form-control>
             <nz-select nzAllowClear id="level" formControlName="level" nzPlaceHolder="请选择预警级别">
-              <nz-option nzValue="1" nzLabel="一级"></nz-option>
+              <nz-option nzValue="1" nzLabel="Ⅰ级"></nz-option>
-              <nz-option nzValue="2" nzLabel="二级"></nz-option>
+              <nz-option nzValue="2" nzLabel="Ⅱ级"></nz-option>
-              <nz-option nzValue="3" nzLabel="三级"></nz-option>
+              <nz-option nzValue="3" nzLabel="Ⅲ级"></nz-option>
-              <nz-option nzValue="4" nzLabel="四级"></nz-option>
+              <nz-option nzValue="4" nzLabel="Ⅳ级"></nz-option>
             </nz-select>
           </nz-form-control>
         </nz-form-item>
@@ -196,10 +196,14 @@
               <span>{{key + 1}}</span>
             </div>
             <div nz-col nzSpan="2">
-              <img style="margin-left: 18px;" *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png" alt="">
+              <img style="margin-left: 18px;" *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png"
-              <img style="margin-left: 18px;" *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png" alt="">
+                alt="">
-              <img style="margin-left: 18px;" *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png" alt="">
+              <img style="margin-left: 18px;" *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png"
-              <img style="margin-left: 18px;" *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png" alt="">
+                alt="">
+              <img style="margin-left: 18px;" *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png"
+                alt="">
+              <img style="margin-left: 18px;" *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png"
+                alt="">
               <span *ngIf="item.violation.level == 1">Ⅰ级</span>
               <span *ngIf="item.violation.level == 2">Ⅱ级</span>
               <span *ngIf="item.violation.level == 3">Ⅲ级</span>

src/app/pages/criminal-records/criminal-records.component.html

@@ -19,10 +19,10 @@
         <nz-form-item class="searchParams">
           <nz-form-control>
             <nz-select nzAllowClear formControlName="level" nzPlaceHolder="请选择预警级别">
-              <nz-option nzValue="1" nzLabel="一级"></nz-option>
+              <nz-option nzValue="1" nzLabel="Ⅰ级"></nz-option>
-              <nz-option nzValue="2" nzLabel="二级"></nz-option>
+              <nz-option nzValue="2" nzLabel="Ⅱ级"></nz-option>
-              <nz-option nzValue="3" nzLabel="三级"></nz-option>
+              <nz-option nzValue="3" nzLabel="Ⅲ级"></nz-option>
-              <nz-option nzValue="4" nzLabel="四级"></nz-option>
+              <nz-option nzValue="4" nzLabel="Ⅳ级"></nz-option>
             </nz-select>
           </nz-form-control>
         </nz-form-item>

src/app/pages/home-page/home-page.component.scss

@@ -1016,7 +1016,7 @@
 }
 
 // 适配150%
-@media screen and (max-height: 600px) {
+@media screen and (max-height: 630px) {
   .informbox {
     width: 100%;
     height: 32px;
@@ -1333,6 +1333,38 @@
             width: 76%;
             // border: 1px solid red;
           }
+
+          .oilNum {
+            position: absolute;
+            left: 4%;
+            bottom: 16px;
+            display: flex;
+            flex-direction: column;
+
+            .oilNumItem {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              color: white;
+              font-size: 12px;
+
+              span {
+                margin: 0 4px;
+              }
+
+              .pointbox {
+                display: flex;
+                align-items: center;
+              }
+
+              .point {
+                width: 6px;
+                height: 6px;
+                background-color: #91CCFF;
+
+              }
+            }
+          }
         }
       }
 
@@ -1356,3 +1388,6 @@
     height: 6px;
   }
 }
+
+
+//适配1366*768

src/app/pages/home-page/home-page.component.ts

@@ -424,6 +424,13 @@ export class HomePageComponent implements OnInit {
       this.getHomeAggregation()
     }, 10 * 6000);
 
+
+    this.resolutionRatio()
+  }
+
+  resolutionRatio() {
+    console.log(document.documentElement.clientWidth)
+    console.log(document.documentElement.clientHeight)
   }
 
   //获得所有未读消息
@@ -669,7 +676,7 @@ export class HomePageComponent implements OnInit {
   isOpenModel: boolean = false
 
   look(item) {
-    console.log('消息item', item) 
+    console.log('消息item', item)
     if (item.notification.data.eventSystemName == '灭火器维护') {
       this.isOpenModel = true
       let copydata = item.notification.data

src/app/pages/home/home.component.ts

@@ -322,6 +322,7 @@ export class HomeComponent implements OnInit {
     console.log('退出')
     abp.event.off('abp.notifications.received', this.reloadPage);
     abp.signalr.disconnect()
+    this.notificationService.remove()
   }
 
   //获得时间

src/app/pages/login/login.component.html

@@ -7,14 +7,14 @@
       <nz-form-item>
         <nz-form-control nzErrorTip="请输入账号!">
           <nz-input-group nzPrefixIcon="user">
-            <input required nz-input type="text" formControlName="userName" placeholder="请输入账号" nzSize="large" />
+            <input autocomplete="on" required nz-input type="text" formControlName="userName" placeholder="请输入账号" nzSize="large" />
           </nz-input-group>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item>
         <nz-form-control nzErrorTip="请输入密码!">
           <nz-input-group nzPrefixIcon="lock">
-            <input required nz-input type="password" formControlName="password" placeholder="请输入密码"
+            <input autocomplete="on" required nz-input type="password" formControlName="password" placeholder="请输入密码"
               [nzSize]="'small'" />
           </nz-input-group>
         </nz-form-control>
@@ -47,4 +47,4 @@
     <h1>智能安全管理系统</h1> -->
   </div>
 
-</div>
+</div>

src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.html

@@ -52,7 +52,8 @@
             <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
                 <nz-form-item class="searchParams">
                     <nz-form-control>
-                        <nz-select nzAllowClear formControlName="state" nzPlaceHolder="请选择状态">
+                        <nz-select (ngModelChange)="stateChange($event)" nzAllowClear formControlName="state"
+                            nzPlaceHolder="请选择状态">
                             <nz-option nzValue="0" nzLabel="预警"></nz-option>
                             <nz-option nzValue="1" nzLabel="合规"></nz-option>
                         </nz-select>
@@ -164,13 +165,22 @@
                             {{item.allProccessCount}}
                         </div> -->
                         <div nz-col nzSpan="1">
-                            <ng-container
+                            <ng-container *ngIf="item.endTime; else elseTemplate">
-                                *ngIf="item.proccessBeforeCount == 0 && item.proccessingCount == 0 && item.allProccessCount == 0; else elseTemplate">
+                                <ng-container
-                                <span style="color: #4BFFD4;">合规</span>
+                                    *ngIf="item.proccessBeforeCount == 0 && item.proccessingCount == 0; else elseTemplate">
+                                    <span style="color: #4BFFD4;">合规</span>
+                                </ng-container>
+                                <ng-template #elseTemplate>
+                                    <span style="color: #FF4B65;">预警</span>
+                                </ng-template>
                             </ng-container>
                             <ng-template #elseTemplate>
-                                <span style="color: #FF4B65;">预警</span>
+                                <span style="color: #4BFFD4;">卸油中</span>
                             </ng-template>
+
+
+
+
                         </div>
                         <div nz-col nzSpan="1">
                             <span style="color: #36A2FF;cursor: pointer;" (click)="look(item)">查看</span>

src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts

@@ -239,6 +239,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
       }
     ],
     legend: {
+      selectedMode: false, // 是否允许点击
       data: ['卸油事件'],
       textStyle: {
         color: '#fff'
@@ -353,6 +354,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
       }
     },
     legend: {
+      selectedMode: false, // 是否允许点击
       data: ['事前准备', '事中操作', '全程监测'],
       textStyle: {
         color: '#fff'
@@ -529,7 +531,13 @@ export class OilUnloadingProcessListComponent implements OnInit {
     this.SkipCount = '0'
     this.getViolateRecordList()
   }
-
+  stateChange($event) {
+    if (!$event) {
+      this.list = []
+      this.SkipCount = '0'
+      this.getViolateRecordList()
+    }
+  }
 
 
   defaultOrId: string

src/app/pages/plan-admin/plan-admin.component.html

@@ -63,13 +63,13 @@
             </th>
             <th>区域</th>
             <th>所属公司</th>
-            <th>联系人</th>
+            <th style="text-align: center;">联系人</th>
-            <th>联系电话</th>
+            <th style="text-align: center;">联系电话</th>
-            <th>油站等级</th>
+            <th style="text-align: center;">油站等级</th>
-            <th>经营品类</th>
+            <th style="text-align: center;">经营品类</th>
-            <th [nzWidth]="'6%'">油机数量</th>
+            <th [nzWidth]="'6%'" style="text-align: center;">油机数量</th>
-            <th [nzWidth]="'6%'">车道数量</th>
+            <th [nzWidth]="'6%'" style="text-align: center;">车道数量</th>
-            <th [nzWidth]="'8%'">油罐容积</th>
+            <th [nzWidth]="'8%'" style="text-align: center;">油罐容积</th>
             <th [nzWidth]="'5%'">操作</th>
           </tr>
         </thead>
@@ -83,15 +83,15 @@
             </th>
             <th nzEllipsis [title]="item.locationName">{{item.locationName}}</th>
             <th nzEllipsis [title]="item.companyName">{{item.companyName}}</th>
-            <th nzEllipsis [title]="item.leaderName">{{item.leaderName}}</th>
+            <th nzEllipsis [title]="item.leaderName" style="text-align: center;">{{item.leaderName}}</th>
-            <th nzEllipsis [title]="item.leaderContact">{{item.leaderContact}}</th>
+            <th nzEllipsis [title]="item.leaderContact" style="text-align: center;">{{item.leaderContact}}</th>
-            <th nzEllipsis [title]="item.stationLevel">{{item.stationLevel}}</th>
+            <th nzEllipsis [title]="item.stationLevel" style="text-align: center;">{{item.stationLevel}}</th>
-            <th nzEllipsis [title]="item.sellVariety">{{item.sellVariety}}</th>
+            <th nzEllipsis [title]="item.sellVariety" style="text-align: center;">{{item.sellVariety}}</th>
-            <th>{{item.gasStationCount}}</th>
+            <th style="text-align: center;">{{item.gasStationCount}}</th>
-            <th>{{item.laneCount}}</th>
+            <th style="text-align: center;">{{item.laneCount}}</th>
-            <th style="display: flex;justify-content: space-between;">
+            <th style="text-align: center;">
               <span>{{item.tankVolume}}</span>
-              <span style="margin-right:55%;">{{item.tankVolume ? 'm³' : null}}</span>
+              <span>{{item.tankVolume ? 'm³' : null}}</span>
             </th>
             <th>
               <span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span>

src/app/pages/today-warning-admin/today-warning-admin.component.html

@@ -12,10 +12,10 @@
       <nz-form-item class="searchParams">
         <nz-form-control>
           <nz-select id="level" nzAllowClear formControlName="level" nzPlaceHolder="请选择级别">
-            <nz-option nzValue="1" nzLabel="一级"></nz-option>
+            <nz-option nzValue="1" nzLabel="Ⅰ级"></nz-option>
-            <nz-option nzValue="2" nzLabel="二级"></nz-option>
+            <nz-option nzValue="2" nzLabel="Ⅱ级"></nz-option>
-            <nz-option nzValue="3" nzLabel="三级"></nz-option>
+            <nz-option nzValue="3" nzLabel="Ⅲ级"></nz-option>
-            <nz-option nzValue="4" nzLabel="四级"></nz-option>
+            <nz-option nzValue="4" nzLabel="Ⅳ级"></nz-option>
           </nz-select>
         </nz-form-control>
       </nz-form-item>

src/app/pages/today-warning/today-warning.component.html

@@ -12,17 +12,18 @@
       <nz-form-item class="searchParams">
         <nz-form-control>
           <nz-select nzAllowClear id="level" formControlName="level" nzPlaceHolder="请选择预警级别">
-            <nz-option nzValue="1" nzLabel="一级"></nz-option>
+            <nz-option nzValue="1" nzLabel="Ⅰ级"></nz-option>
-            <nz-option nzValue="2" nzLabel="二级"></nz-option>
+            <nz-option nzValue="2" nzLabel="Ⅱ级"></nz-option>
-            <nz-option nzValue="3" nzLabel="三级"></nz-option>
+            <nz-option nzValue="3" nzLabel="Ⅲ级"></nz-option>
-            <nz-option nzValue="4" nzLabel="四级"></nz-option>
+            <nz-option nzValue="4" nzLabel="Ⅳ级"></nz-option>
           </nz-select>
         </nz-form-control>
       </nz-form-item>
 
       <nz-form-item class="searchParams">
         <nz-form-control>
-          <nz-select nzAllowClear id="type" (ngModelChange)="typeChange($event)" formControlName="type" nzPlaceHolder="请选择预警类型">
+          <nz-select nzAllowClear id="type" (ngModelChange)="typeChange($event)" formControlName="type"
+            nzPlaceHolder="请选择预警类型">
             <nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
           </nz-select>
         </nz-form-control>
@@ -50,13 +51,15 @@
       </nz-form-item>
       <nz-form-item class="searchParams">
         <nz-form-control>
-          <nz-time-picker [nzAllowEmpty]="false" nzPlaceHolder="请选择开始时间" formControlName="datePickerStart" nzFormat="HH:mm"></nz-time-picker>
+          <nz-time-picker [nzAllowEmpty]="false" nzPlaceHolder="请选择开始时间" formControlName="datePickerStart"
+            nzFormat="HH:mm"></nz-time-picker>
         </nz-form-control>
       </nz-form-item>
       <i style="display: flex;align-items: center;color: #fff;" nz-icon nzType="swap-right" nzTheme="outline"></i>
       <nz-form-item class="searchParams">
         <nz-form-control>
-          <nz-time-picker [nzAllowEmpty]="false" nzPlaceHolder="请选择结束时间" formControlName="datePickerEnd" nzFormat="HH:mm"></nz-time-picker>
+          <nz-time-picker [nzAllowEmpty]="false" nzPlaceHolder="请选择结束时间" formControlName="datePickerEnd"
+            nzFormat="HH:mm"></nz-time-picker>
         </nz-form-control>
       </nz-form-item>
 
@@ -76,6 +79,32 @@
   </div>
 
   <div class="listbox" style="text-align: center;">
+    <div nz-row class="listitem listitem2">
+      <div nz-col nzSpan="3" class="imgbox">
+        预警级别
+      </div>
+      <div nz-col nzSpan="3">
+        预警类型
+      </div>
+      <div nz-col nzSpan="4">
+        预警信息
+      </div>
+      <div nz-col nzSpan="4">
+        区域
+      </div>
+      <div nz-col nzSpan="3">
+        摄像头
+      </div>
+      <div nz-col nzSpan="3">
+        预警时间
+      </div>
+      <div nz-col nzSpan="2">
+        处置状态
+      </div>
+      <div nz-col nzSpan="2">
+        操作
+      </div>
+    </div>
     <div nz-row class="listitem" *ngFor="let item of list">
       <div nz-col nzSpan="3" class="imgbox">
         <span *ngIf="item.violation.violationType == '卸油作业检查'">
@@ -105,16 +134,16 @@
         </span>
       </div>
       <div nz-col nzSpan="3">
-        预警类型: {{item.violation.violationType}}
+        {{item.violation.violationType}}
       </div>
       <div nz-col nzSpan="4">
-        预警信息: {{item.violation.eventSystemName}}
+        {{item.violation.eventSystemName}}
       </div>
       <div nz-col nzSpan="4">
-        区域: {{item.violateArea}}
+        {{item.violateArea ? item.violateArea : '/'}}
       </div>
       <div nz-col nzSpan="3">
-        摄像头: {{item.cameraNo}}
+        {{item.cameraNo ? item.cameraNo : '/'}}
       </div>
       <div nz-col nzSpan="3">
         {{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
@@ -128,9 +157,7 @@
         </ng-template>
       </div>
       <div nz-col nzSpan="2">
-        <button nz-button (click)="look(item)" style="margin-right: 16px;">查看</button>
+        <button nz-button (click)="look(item)">查看</button>
-        <!-- <button *ngIf="!item.handleTime" nz-button (click)="dispose(item)">处置</button>
-        <span *ngIf="item.handleTime" style="color: #23D9FF;margin-left: 10px;">已处置</span> -->
       </div>
     </div>
     <nz-spin nzSimple *ngIf="isSpin"></nz-spin>

src/app/pages/today-warning/today-warning.component.scss

@@ -126,7 +126,10 @@
         }
       }
     }
-
+    .listitem2{
+      height: 40px;
+      line-height: 40px;
+    }
     .dispositioned {
       color: #23D9FF;
     }

src/app/pages/warning-statistics-list/warning-statistics-list.component.html

@@ -167,8 +167,8 @@
                             {{item.violatedItemSnapshotObj.name ? item.violatedItemSnapshotObj.name : '/'}}
                         </div>
                         <div nz-col nzSpan="3">
-                            {{item.violatedItemSnapshotObj.validityEndTime ?
+                            {{item.violatedItemSnapshotObj.endTime ?
-                            (item.violatedItemSnapshotObj.validityEndTime | date:"yyyy-MM-dd") : '/'}}
+                            (item.violatedItemSnapshotObj.endTime | date:"yyyy-MM-dd") : '/'}}
                         </div>
                         <div nz-col nzSpan="1">
                             <span style="cursor: pointer;color: #36A2FF;" (click)="look(item)">查看</span>

src/app/pages/warning-statistics-list/warning-statistics-list.component.ts

@@ -207,6 +207,7 @@ export class WarningStatisticsListComponent implements OnInit {
       }
     ],
     legend: {
+      selectedMode: false, // 是否允许点击
       data: ['预警事件'],
       textStyle: {
         color: '#fff'
@@ -321,6 +322,7 @@ export class WarningStatisticsListComponent implements OnInit {
       }
     },
     legend: {
+      selectedMode: false, // 是否允许点击
       data: ['事前准备', '事中操作', '全程监测'],
       textStyle: {
         color: '#fff'

src/theme.less

@@ -201,7 +201,7 @@
 
   //滚动条样式
   ::-webkit-scrollbar {
-    width: 10px;
+    width: 5px;
   }
 
   ::-webkit-scrollbar-thumb {