feat: 管理页、列表页、详情页-根据UI重新写一版样式

@@ -4,15 +4,15 @@
   left: 0;
   right: 0;
   height: calc(
-    88px + constant(safe-area-inset-top)
+    100px + constant(safe-area-inset-top)
   ); /* 直接扩展高度，因为padding-bottom是内边距 */
-  height: calc(88px + env(safe-area-inset-top)); /* 直接扩展高度 */
+  height: calc(100px + env(safe-area-inset-top)); /* 直接扩展高度 */
   padding-top: constant(safe-area-inset-top); /*兼容 iOS<11.2 */
   padding-top: env(safe-area-inset-top); /* 兼容iOS>= 11.2*/
   background: #fff;
   z-index: 98;
   .adm-nav-bar {
-    height: 88px;
+    height: 100px;
     padding: 0 12px;
     .adm-nav-bar-left {
       .adm-nav-bar-back {
@@ -36,10 +36,10 @@
       }
     }
     .adm-nav-bar-title {
-      font-size: 32px;
-      color: #242835;
+      font-size: 36px;
+      color: #fff;
       text-align: center;
-      font-weight: 600;
+      font-weight: 500;
     }
     .adm-nav-bar-right {
     }

@@ -8,7 +8,7 @@ interface pdfPreviewProps {
 const pdfPreview = (props: pdfPreviewProps) => {
   const [filePath, setFilePath] = useState<string>();
 
-  const _origin = window.location.origin;
+  const _origin = window.location.origin?.includes('localhost') ? 'https://lt-test.qgutech.com' : window.location.origin;
 
   useEffect(()=>{
     if (props.url) {

@@ -58,7 +58,7 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
+    background-color: #315381;
   }
   a:hover {
     color: #747bff;
@@ -68,8 +68,12 @@ button:focus-visible {
   }
 }
 
+:root {
+  background: #315381;
+}
+
 #root {
-  background: #fff;
+  background: #315381;
 }
 
 /* Webkit 浏览器（Chrome, Safari, Edge） */
@@ -78,13 +82,13 @@ button:focus-visible {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #1D295B; /* 滚动条的颜色 */
+  background-color: #315381; /* 滚动条的颜色 */
   border-radius: 6px; /* 滚动条的圆角 */
 }
 
 
 ::-webkit-scrollbar-track {
-  background-color: #314484; /* 滚动条轨道的颜色 */
+  background-color: #315381; /* 滚动条轨道的颜色 */
   border-radius: 6px; /* 轨道的圆角 */
 }
 
@@ -157,7 +161,6 @@ button:focus-visible {
 }
 
 .sxjx-content-main {
-  background: #f7f7f7;
   min-height: 100vh;
   width: 100vw;
   box-sizing: border-box;
@@ -166,16 +169,16 @@ button:focus-visible {
 
 // 有头部有底部
 .sxjx-layout-main {
-  padding-top: calc(88px + constant(safe-area-inset-top));
-  padding-top: calc(88px + env(safe-area-inset-top));
+  padding-top: calc(100px + constant(safe-area-inset-top));
+  padding-top: calc(100px + env(safe-area-inset-top));
   padding-bottom: calc(120px + constant(safe-area-inset-bottom));
   padding-bottom: calc(120px + env(safe-area-inset-bottom));
 }
 
 // 有头部没有底部
 .sxjx-layout-main-unfoot {
-  padding-top: calc(88px + constant(safe-area-inset-top));
-  padding-top: calc(88px + env(safe-area-inset-top));
+  padding-top: calc(100px + constant(safe-area-inset-top));
+  padding-top: calc(100px + env(safe-area-inset-top));
 }
 
 // 没有头部有底部

@@ -68,16 +68,19 @@ const ProductionDetail: React.FC = () => {
     useEffect(() => {
         console.log('filePathItem', filePathItem)
         if (!_.isEmpty(filePathItem)) {
-            setTitle(filePathItem?.name)
+            setTitle(filePathItem?.name || '')
         }
     }, [filePathItem])
 
 
 
     return (
-        <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
+        <div className={'sxjx-content-main sxjx-layout-main-unfoot production-detail-box'}>
             <div className={'production-detail'}>
-                <NavBar showBack={true} title={title} customBack={{onClick: () => {
+                <NavBar showBack={true} title={title}
+                        style={{background: '#37425B'}}
+                        isWhite={true}
+                        customBack={{onClick: () => {
                         const _url = localStorage.getItem('sxListPath') || '';
                         navigate(_url, { replace: true });
                     }}}
@@ -89,7 +92,7 @@ const ProductionDetail: React.FC = () => {
                             url={filePathItem?.url || ''}
                             className={'production-detail-video'}
                         />
-                    </div> : filePathItem?.type === 'pdf' ? <PdfPreview url={filePathItem?.url}/> : ''
+                    </div> : filePathItem?.type === 'pdf' ? <PdfPreview url={filePathItem?.url || ''}/> : ''
                 }
             </div>
         </div>

+.production-detail-box {
+  background: #000;
+}
 .production-detail {
-  background: #f7f7f7;
   position: relative;
   width: 100%;
   height: calc(100vh - 88px);

@@ -14,7 +14,7 @@ export interface ListType {
     id: string;
     fileId: string;
     name: string;
-    url?: string;
+    url: string;
     type: 'pdf' | 'mp4' | string
 }
 
@@ -27,7 +27,6 @@ const ProductionList: React.FC = () => {
     const [showBatch, setShowBatch] = useState<boolean>(false);
     const navigate = useNavigate();
     const location = useLocation();
-    console.log('location', location?.pathname, location?.search)
     const [checkItems, setCheckItems] = useState<CheckboxValue[]>([])
     const [checkValues, setCheckValues] = useState<CheckboxValue[]>([])
 
@@ -127,13 +126,18 @@ const ProductionList: React.FC = () => {
     }
 
     return (
-        <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
+        <div className={'sxjx-content-main sxjx-layout-main-unfoot production-list-box'}>
             <div className={`production-list ${showBatch ? 'production-list--batch' : ''}`}>
-                <NavBar title={title} showBack={true} rightInfo={ !showBatch ? rightInfo : ''}
-                        customBack={{onClick: () => {
-                                const _url = '/production/management';
-                                navigate(_url, { replace: true });
-                       }}}
+                <NavBar
+                    title={title}
+                    isWhite={true}
+                    showBack={true}
+                    style={{background: '#37425B'}}
+                    rightInfo={ !showBatch ? rightInfo : ''}
+                    customBack={{onClick: () => {
+                            const _url = '/production/management';
+                            navigate(_url, { replace: true });
+                   }}}
                 />
                 {
                     !show ? <SpinLoading color='primary'/> :
@@ -156,7 +160,7 @@ const ProductionList: React.FC = () => {
                                         >
                                             <img className={'production-list_list-item-img'}
                                                  src={item?.type === 'mp4' ? _mp4 : _pdf}/>
-                                            <div className={'omit2 production-list_list-item-name'}>
+                                            <div className={'omit3 production-list_list-item-name'}>
                                                 {item?.name}
                                             </div>
                                             {

+.production-list-box {
+  background: #202D48;
+}
 .production-list {
-  background: #f7f7f7;
-
   &--batch {
     margin-bottom: 221px;
 
@@ -9,13 +10,13 @@
       bottom: 0;
       left: 0;
       right: 0;
-      background: #fff;
+      background: #37425b;
       height: calc(221px + env(safe-area-inset-bottom));
       height: calc(221px + env(safe-area-inset-bottom));
       z-index: 100;
       &-top {
         height: 100px;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid #4C5A7B;
         padding: 0 60px;
         display: flex;
         justify-content: space-between;
@@ -32,12 +33,12 @@
           color: #aeb1b8;
           cursor: pointer;
           span {
-            color: #1677ff;
+            color: #fff;
             padding: 0 10px;
           }
         }
         &-close {
-          color: #1677ff;
+          color: #fff;
         }
       }
       &-bottom {
@@ -58,7 +59,7 @@
             font-size: 20px;
             width: 56px;
             text-align: center;
-            color: #333;
+            color: #fff;
           }
         }
 
@@ -77,37 +78,35 @@
     flex-wrap: wrap;
 
     &-item {
-      width: 312px;
-      height: 312px;
-      color: #333;
-      margin-right: 60px;
-      margin-bottom: 60px;
+      width: 300px;
+      height: 380px;
+      color: #fff;
+      margin-right: 70px;
+      margin-bottom: 70px;
       cursor: pointer;
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
+      padding: 30px;
       box-sizing: border-box;
-      text-align: center;
-      flex-direction: column;
-
       position: relative;
+      background: linear-gradient( 180deg, #0D234A 0%, #3F5D8F 100%);
+      box-shadow: inset 0px 0px 0px 4px #70AAFC;
+      border-radius: 30px;
+      text-align: center;
 
       &:nth-child(5n) {
         margin-right: 0;
       }
 
       &-img {
-        width: 60px;
-        height: 60px;
-        margin-bottom: 30px;
+        display: inline-block;
+        width: 100px;
+        height: 100px;
+        margin-top: 40px;
+        margin-bottom: 68px;
       }
 
       &-name {
         font-size: 28px;
-        height: 80px;
-        line-height: 40px;
+        line-height: 33px;
       }
 
       .adm-checkbox {
@@ -126,16 +125,27 @@
 
   &_nav-right {
     font-size: 26px;
-    padding-right: 20px;
+    padding-right: 55px;
     &-info {
       cursor: pointer;
       display: inline-block;
-      padding: 0 10px;
+      color: #fff;
+
+      text-align: center;
+      width: 140px;
+      height: 50px;
+      line-height: 48px;
+      border-radius: 5px;
+      border: 1px solid #FFFFFF;
     }
   }
 }
 
 .to-detail-mask {
+  .adm-toast-main {
+    top: 25% !important;
+    max-width: 500px;
+  }
   .adm-auto-center-content {
     font-size: 28px !important;
   }

@@ -7,6 +7,8 @@ import { useNavigate } from "react-router-dom";
 import {getProductLine} from "@/api/apiConfig";
 import { SpinLoading } from 'antd-mobile'
 
+import _icon from './icon.png'
+
 interface ListType {
     id: string;
     name: string;
@@ -42,9 +44,11 @@ const ProductionManagement: React.FC = () => {
 
 
     return (
-        <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
+        <div className={'sxjx-content-main sxjx-layout-main-unfoot production-management-box'}>
             <div className={'production-management'}>
-                <NavBar title={'生产线管理'}/>
+                <NavBar title={'生产线管理'}
+                        style={{background: '#46658E'}}
+                />
                 {
                     !show ? <SpinLoading color='primary' /> :
                         <div className={'production-management_list'}>
@@ -53,10 +57,10 @@ const ProductionManagement: React.FC = () => {
                                     return  <div
                                         key={item?.id}
                                         className={'production-management_list-item'}
-                                        style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}}
                                         onClick={() => toProductionList(item)}
                                     >
-                                        {item?.name}
+                                        <img className={'production-management_list-item_icon'} src={_icon} alt=""/>
+                                        <p className={'production-management_list-item_name omit3'}>{item?.name}</p>
                                     </div>
                                 })
                             }

+.production-management-box {
+  background: #315381;
+}
 .production-management {
-  background: #f7f7f7;
-
   .adm-spin-loading {
     --size: 60px;
     margin: 300px auto 0;
   }
 
   &_list {
-    padding: 60px;
+    padding: 70px;
     display: flex;
     flex-wrap: wrap;
 
     &-item {
       font-size: 28px;
-      width: 312px;
-      height: 312px;
-      color: #fff;
-      margin-right: 60px;
-      margin-bottom: 60px;
+      width: 300px;
+      height: 380px;
+      margin-right: 70px;
+      margin-bottom: 70px;
       cursor: pointer;
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      line-height: 40px;
-      padding: 20px;
+      border-radius: 30px;
+      padding: 30px;
       box-sizing: border-box;
       text-align: center;
+      background: url("./bg.png") center center no-repeat;
+      background-size: cover;
+      overflow: hidden;
 
       &:nth-child(5n) {
         margin-right: 0;
       }
+
+      &_icon {
+        width: 120px;
+        height: 120px;
+        margin-top: 40px;
+        margin-bottom: 48px;
+      }
+      &_name {
+        line-height: 33px;
+        color: #fff;
+      }
     }
   }
 }
\ No newline at end of file