修改模板

src/pages/Storeboard/Krjk.jsx

@@ -71,21 +71,23 @@ export default ({ data }) => {
         <div className="content-header"> 库容监控</div>
         {/* 库位展示 */}
         <div className="jk-content numStatus" style={{ position: "relative" }}>
-        <div className="numberStatus">
-              <span>1</span>
-              <span>2</span>
-              <span>3</span>
-              <span>4</span>
-              <span>5</span>
-              <span>6</span>
-              <span>7</span>
-              <span>8</span>
-              <span>9</span>
-              <span>10</span>
-            </div>
-          <Carousel className="jk-content-carousel" afterChange={() => {
-            
-          }}>
+          <div className="numberStatus">
+            <span>1</span>
+            <span>2</span>
+            <span>3</span>
+            <span>4</span>
+            <span>5</span>
+            <span>6</span>
+            <span>7</span>
+            <span>8</span>
+            <span>9</span>
+            <span>10</span>
+          </div>
+          <Carousel
+            className="jk-content-carousel"
+            afterChange={() => {}}
+            dotPosition="right"
+          >
             <div className="jk-content-unit">
               <div className="jk-statusContent">
                 {statusArr1Left?.map((it) => {
@@ -117,8 +119,8 @@ export default ({ data }) => {
                 <span
                   style={{
                     position: "absolute",
-                    left: "-18px",
-                    bottom: "-8px",
+                    right: "4px",
+                    bottom: "-23px",
                     color: "white",
                   }}
                 >
@@ -184,8 +186,8 @@ export default ({ data }) => {
                 <span
                   style={{
                     position: "absolute",
-                    left: "-18px",
-                    bottom: "-8px",
+                    right: "4px",
+                    bottom: "-23px",
                     color: "white",
                   }}
                 >

src/pages/Storeboard/index.less

@@ -254,23 +254,26 @@
         width: 500px;
         padding: 12px 0px 24px 24px;
 
-        .ant-carousel{
-            width: 100% ;
+        .ant-carousel {
+            width: 100%;
             height: 100%;
         }
 
-.slick-dots{
-    
-}
+        .slick-dots {
+            button {
+                width: 24px !important;
+            }
+        }
+
         .jk-content-unit {
-            width: 500px;
-            padding: 16px;
+            width: 520px;
+            padding: 8px 24px 32px 30px;
             flex: 1;
             display: flex;
             flex-direction: column;
             margin-left: 6px;
             gap: 2px;
-            height: 500px;
+            height: 520px;
 
             .jk-statusBottom {
                 width: 100%;
@@ -285,7 +288,7 @@
             flex: 9%;
             background-color: #00bbf2;
             // border-radius: 50%;
-            border:1px red;
+            border: 1px red;
             margin: 1px
         }
 
@@ -318,7 +321,7 @@
 
         .bgline3 {
 
-            background: linear-gradient(90deg, #00bbf277 0% , #ffffff77 100%);
+            background: linear-gradient(90deg, #00bbf277 0%, #ffffff77 100%);
         }
 
 
@@ -338,6 +341,7 @@
                 height: calc(100% - 10px);
                 display: flex;
                 flex-direction: column;
+
                 span {
                     flex: 1;
                     display: flex;
@@ -362,6 +366,8 @@
             align-self: center;
             height: auto;
             width: 100%;
+            padding-left: 16px;
+            padding-right: 16px;
 
             span {
                 color: #fff;
@@ -369,7 +375,6 @@
                 height: auto;
                 text-align: center;
                 font-size: 16px;
-                padding-top: 6px;
             }
         }
     }