industry / sxjx-h5 · Commits

Commit 3d81475e52921fce6c940033bf0a505921ae0045

Authored by 史婷婷
1 parent 31819c89

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

Inline Side-by-side
Showing 13 changed files with 111 additions and 75 deletions
@@ -4,15 +4,15 @@ @@ -4,15 +4,15 @@
4 left: 0; 4 left: 0;
5 right: 0; 5 right: 0;
6 height: calc( 6 height: calc(
7 - 88px + constant(safe-area-inset-top) 7 + 100px + constant(safe-area-inset-top)
8 ); /* 直接扩展高度，因为padding-bottom是内边距 */ 8 ); /* 直接扩展高度，因为padding-bottom是内边距 */
9 - height: calc(88px + env(safe-area-inset-top)); /* 直接扩展高度 */ 9 + height: calc(100px + env(safe-area-inset-top)); /* 直接扩展高度 */
10 padding-top: constant(safe-area-inset-top); /*兼容 iOS<11.2 */ 10 padding-top: constant(safe-area-inset-top); /*兼容 iOS<11.2 */
11 padding-top: env(safe-area-inset-top); /* 兼容iOS>= 11.2*/ 11 padding-top: env(safe-area-inset-top); /* 兼容iOS>= 11.2*/
12 background: #fff; 12 background: #fff;
13 z-index: 98; 13 z-index: 98;
14 .adm-nav-bar { 14 .adm-nav-bar {
15 - height: 88px; 15 + height: 100px;
16 padding: 0 12px; 16 padding: 0 12px;
17 .adm-nav-bar-left { 17 .adm-nav-bar-left {
18 .adm-nav-bar-back { 18 .adm-nav-bar-back {
@@ -36,10 +36,10 @@ @@ -36,10 +36,10 @@
36 } 36 }
37 } 37 }
38 .adm-nav-bar-title { 38 .adm-nav-bar-title {
39 - font-size: 32px;  
40 - color: #242835; 39 + font-size: 36px;
  40 + color: #fff;
41 text-align: center; 41 text-align: center;
42 - font-weight: 600; 42 + font-weight: 500;
43 } 43 }
44 .adm-nav-bar-right { 44 .adm-nav-bar-right {
45 } 45 }
@@ -8,7 +8,7 @@ interface pdfPreviewProps { @@ -8,7 +8,7 @@ interface pdfPreviewProps {
8 const pdfPreview = (props: pdfPreviewProps) => { 8 const pdfPreview = (props: pdfPreviewProps) => {
9 const [filePath, setFilePath] = useState<string>(); 9 const [filePath, setFilePath] = useState<string>();
10 10
11 - const _origin = window.location.origin; 11 + const _origin = window.location.origin?.includes('localhost') ? 'https://lt-test.qgutech.com' : window.location.origin;
12 12
13 useEffect(()=>{ 13 useEffect(()=>{
14 if (props.url) { 14 if (props.url) {
@@ -58,7 +58,7 @@ button:focus-visible { @@ -58,7 +58,7 @@ button:focus-visible {
58 @media (prefers-color-scheme: light) { 58 @media (prefers-color-scheme: light) {
59 :root { 59 :root {
60 color: #213547; 60 color: #213547;
61 - background-color: #ffffff; 61 + background-color: #315381;
62 } 62 }
63 a:hover { 63 a:hover {
64 color: #747bff; 64 color: #747bff;
@@ -68,8 +68,12 @@ button:focus-visible { @@ -68,8 +68,12 @@ button:focus-visible {
68 } 68 }
69 } 69 }
70 70
  71 +:root {
  72 + background: #315381;
  73 +}
  74 +
71 #root { 75 #root {
72 - background: #fff; 76 + background: #315381;
73 } 77 }
74 78
75 /* Webkit 浏览器（Chrome, Safari, Edge） */ 79 /* Webkit 浏览器（Chrome, Safari, Edge） */
@@ -78,13 +82,13 @@ button:focus-visible { @@ -78,13 +82,13 @@ button:focus-visible {
78 } 82 }
79 83
80 ::-webkit-scrollbar-thumb { 84 ::-webkit-scrollbar-thumb {
81 - background-color: #1D295B; /* 滚动条的颜色 */ 85 + background-color: #315381; /* 滚动条的颜色 */
82 border-radius: 6px; /* 滚动条的圆角 */ 86 border-radius: 6px; /* 滚动条的圆角 */
83 } 87 }
84 88
85 89
86 ::-webkit-scrollbar-track { 90 ::-webkit-scrollbar-track {
87 - background-color: #314484; /* 滚动条轨道的颜色 */ 91 + background-color: #315381; /* 滚动条轨道的颜色 */
88 border-radius: 6px; /* 轨道的圆角 */ 92 border-radius: 6px; /* 轨道的圆角 */
89 } 93 }
90 94
@@ -157,7 +161,6 @@ button:focus-visible { @@ -157,7 +161,6 @@ button:focus-visible {
157 } 161 }
158 162
159 .sxjx-content-main { 163 .sxjx-content-main {
160 - background: #f7f7f7;  
161 min-height: 100vh; 164 min-height: 100vh;
162 width: 100vw; 165 width: 100vw;
163 box-sizing: border-box; 166 box-sizing: border-box;
@@ -166,16 +169,16 @@ button:focus-visible { @@ -166,16 +169,16 @@ button:focus-visible {
166 169
167 // 有头部有底部 170 // 有头部有底部
168 .sxjx-layout-main { 171 .sxjx-layout-main {
169 - padding-top: calc(88px + constant(safe-area-inset-top));  
170 - padding-top: calc(88px + env(safe-area-inset-top)); 172 + padding-top: calc(100px + constant(safe-area-inset-top));
  173 + padding-top: calc(100px + env(safe-area-inset-top));
171 padding-bottom: calc(120px + constant(safe-area-inset-bottom)); 174 padding-bottom: calc(120px + constant(safe-area-inset-bottom));
172 padding-bottom: calc(120px + env(safe-area-inset-bottom)); 175 padding-bottom: calc(120px + env(safe-area-inset-bottom));
173 } 176 }
174 177
175 // 有头部没有底部 178 // 有头部没有底部
176 .sxjx-layout-main-unfoot { 179 .sxjx-layout-main-unfoot {
177 - padding-top: calc(88px + constant(safe-area-inset-top));  
178 - padding-top: calc(88px + env(safe-area-inset-top)); 180 + padding-top: calc(100px + constant(safe-area-inset-top));
  181 + padding-top: calc(100px + env(safe-area-inset-top));
179 } 182 }
180 183
181 // 没有头部有底部 184 // 没有头部有底部
@@ -68,16 +68,19 @@ const ProductionDetail: React.FC = () => { @@ -68,16 +68,19 @@ const ProductionDetail: React.FC = () => {
68 useEffect(() => { 68 useEffect(() => {
69 console.log('filePathItem', filePathItem) 69 console.log('filePathItem', filePathItem)
70 if (!_.isEmpty(filePathItem)) { 70 if (!_.isEmpty(filePathItem)) {
71 - setTitle(filePathItem?.name) 71 + setTitle(filePathItem?.name || '')
72 } 72 }
73 }, [filePathItem]) 73 }, [filePathItem])
74 74
75 75
76 76
77 return ( 77 return (
78 - <div className={'sxjx-content-main sxjx-layout-main-unfoot'}> 78 + <div className={'sxjx-content-main sxjx-layout-main-unfoot production-detail-box'}>
79 <div className={'production-detail'}> 79 <div className={'production-detail'}>
80 - <NavBar showBack={true} title={title} customBack={{onClick: () => { 80 + <NavBar showBack={true} title={title}
  81 + style={{background: '#37425B'}}
  82 + isWhite={true}
  83 + customBack={{onClick: () => {
81 const _url = localStorage.getItem('sxListPath') || ''; 84 const _url = localStorage.getItem('sxListPath') || '';
82 navigate(_url, { replace: true }); 85 navigate(_url, { replace: true });
83 }}} 86 }}}
@@ -89,7 +92,7 @@ const ProductionDetail: React.FC = () => { @@ -89,7 +92,7 @@ const ProductionDetail: React.FC = () => {
89 url={filePathItem?.url || ''} 92 url={filePathItem?.url || ''}
90 className={'production-detail-video'} 93 className={'production-detail-video'}
91 /> 94 />
92 - </div> : filePathItem?.type === 'pdf' ? <PdfPreview url={filePathItem?.url}/> : '' 95 + </div> : filePathItem?.type === 'pdf' ? <PdfPreview url={filePathItem?.url || ''}/> : ''
93 } 96 }
94 </div> 97 </div>
95 </div> 98 </div>
  1 +.production-detail-box {
  2 + background: #000;
  3 +}
1 .production-detail { 4 .production-detail {
2 - background: #f7f7f7;  
3 position: relative; 5 position: relative;
4 width: 100%; 6 width: 100%;
5 height: calc(100vh - 88px); 7 height: calc(100vh - 88px);
@@ -14,7 +14,7 @@ export interface ListType { @@ -14,7 +14,7 @@ export interface ListType {
14 id: string; 14 id: string;
15 fileId: string; 15 fileId: string;
16 name: string; 16 name: string;
17 - url?: string; 17 + url: string;
18 type: 'pdf' | 'mp4' | string 18 type: 'pdf' | 'mp4' | string
19 } 19 }
20 20
@@ -27,7 +27,6 @@ const ProductionList: React.FC = () => { @@ -27,7 +27,6 @@ const ProductionList: React.FC = () => {
27 const [showBatch, setShowBatch] = useState<boolean>(false); 27 const [showBatch, setShowBatch] = useState<boolean>(false);
28 const navigate = useNavigate(); 28 const navigate = useNavigate();
29 const location = useLocation(); 29 const location = useLocation();
30 - console.log('location', location?.pathname, location?.search)  
31 const [checkItems, setCheckItems] = useState<CheckboxValue[]>([]) 30 const [checkItems, setCheckItems] = useState<CheckboxValue[]>([])
32 const [checkValues, setCheckValues] = useState<CheckboxValue[]>([]) 31 const [checkValues, setCheckValues] = useState<CheckboxValue[]>([])
33 32
@@ -127,13 +126,18 @@ const ProductionList: React.FC = () => { @@ -127,13 +126,18 @@ const ProductionList: React.FC = () => {
127 } 126 }
128 127
129 return ( 128 return (
130 - <div className={'sxjx-content-main sxjx-layout-main-unfoot'}> 129 + <div className={'sxjx-content-main sxjx-layout-main-unfoot production-list-box'}>
131 <div className={`production-list ${showBatch ? 'production-list--batch' : ''}`}> 130 <div className={`production-list ${showBatch ? 'production-list--batch' : ''}`}>
132 - <NavBar title={title} showBack={true} rightInfo={ !showBatch ? rightInfo : ''}  
133 - customBack={{onClick: () => {  
134 - const _url = '/production/management';  
135 - navigate(_url, { replace: true });  
136 - }}} 131 + <NavBar
  132 + title={title}
  133 + isWhite={true}
  134 + showBack={true}
  135 + style={{background: '#37425B'}}
  136 + rightInfo={ !showBatch ? rightInfo : ''}
  137 + customBack={{onClick: () => {
  138 + const _url = '/production/management';
  139 + navigate(_url, { replace: true });
  140 + }}}
137 /> 141 />
138 { 142 {
139 !show ? <SpinLoading color='primary'/> : 143 !show ? <SpinLoading color='primary'/> :
@@ -156,7 +160,7 @@ const ProductionList: React.FC = () => { @@ -156,7 +160,7 @@ const ProductionList: React.FC = () => {
156 > 160 >
157 <img className={'production-list_list-item-img'} 161 <img className={'production-list_list-item-img'}
158 src={item?.type === 'mp4' ? _mp4 : _pdf}/> 162 src={item?.type === 'mp4' ? _mp4 : _pdf}/>
159 - <div className={'omit2 production-list_list-item-name'}> 163 + <div className={'omit3 production-list_list-item-name'}>
160 {item?.name} 164 {item?.name}
161 </div> 165 </div>
162 { 166 {

8.72 KB | W: | H:

3.82 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

10.4 KB | W: | H:

4.49 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

1.57 KB | W: | H:

934 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
  1 +.production-list-box {
  2 + background: #202D48;
  3 +}
1 .production-list { 4 .production-list {
2 - background: #f7f7f7;  
3 -  
4 &--batch { 5 &--batch {
5 margin-bottom: 221px; 6 margin-bottom: 221px;
6 7
@@ -9,13 +10,13 @@ @@ -9,13 +10,13 @@
9 bottom: 0; 10 bottom: 0;
10 left: 0; 11 left: 0;
11 right: 0; 12 right: 0;
12 - background: #fff; 13 + background: #37425b;
13 height: calc(221px + env(safe-area-inset-bottom)); 14 height: calc(221px + env(safe-area-inset-bottom));
14 height: calc(221px + env(safe-area-inset-bottom)); 15 height: calc(221px + env(safe-area-inset-bottom));
15 z-index: 100; 16 z-index: 100;
16 &-top { 17 &-top {
17 height: 100px; 18 height: 100px;
18 - border-bottom: 1px solid #eee; 19 + border-bottom: 1px solid #4C5A7B;
19 padding: 0 60px; 20 padding: 0 60px;
20 display: flex; 21 display: flex;
21 justify-content: space-between; 22 justify-content: space-between;
@@ -32,12 +33,12 @@ @@ -32,12 +33,12 @@
32 color: #aeb1b8; 33 color: #aeb1b8;
33 cursor: pointer; 34 cursor: pointer;
34 span { 35 span {
35 - color: #1677ff; 36 + color: #fff;
36 padding: 0 10px; 37 padding: 0 10px;
37 } 38 }
38 } 39 }
39 &-close { 40 &-close {
40 - color: #1677ff; 41 + color: #fff;
41 } 42 }
42 } 43 }
43 &-bottom { 44 &-bottom {
@@ -58,7 +59,7 @@ @@ -58,7 +59,7 @@
58 font-size: 20px; 59 font-size: 20px;
59 width: 56px; 60 width: 56px;
60 text-align: center; 61 text-align: center;
61 - color: #333; 62 + color: #fff;
62 } 63 }
63 } 64 }
64 65
@@ -77,37 +78,35 @@ @@ -77,37 +78,35 @@
77 flex-wrap: wrap; 78 flex-wrap: wrap;
78 79
79 &-item { 80 &-item {
80 - width: 312px;  
81 - height: 312px;  
82 - color: #333;  
83 - margin-right: 60px;  
84 - margin-bottom: 60px; 81 + width: 300px;
  82 + height: 380px;
  83 + color: #fff;
  84 + margin-right: 70px;
  85 + margin-bottom: 70px;
85 cursor: pointer; 86 cursor: pointer;
86 - border-radius: 12px;  
87 - display: flex;  
88 - align-items: center;  
89 - justify-content: center;  
90 - padding: 20px; 87 + padding: 30px;
91 box-sizing: border-box; 88 box-sizing: border-box;
92 - text-align: center;  
93 - flex-direction: column;  
94 -  
95 position: relative; 89 position: relative;
  90 + background: linear-gradient( 180deg, #0D234A 0%, #3F5D8F 100%);
  91 + box-shadow: inset 0px 0px 0px 4px #70AAFC;
  92 + border-radius: 30px;
  93 + text-align: center;
96 94
97 &:nth-child(5n) { 95 &:nth-child(5n) {
98 margin-right: 0; 96 margin-right: 0;
99 } 97 }
100 98
101 &-img { 99 &-img {
102 - width: 60px;  
103 - height: 60px;  
104 - margin-bottom: 30px; 100 + display: inline-block;
  101 + width: 100px;
  102 + height: 100px;
  103 + margin-top: 40px;
  104 + margin-bottom: 68px;
105 } 105 }
106 106
107 &-name { 107 &-name {
108 font-size: 28px; 108 font-size: 28px;
109 - height: 80px;  
110 - line-height: 40px; 109 + line-height: 33px;
111 } 110 }
112 111
113 .adm-checkbox { 112 .adm-checkbox {
@@ -126,16 +125,27 @@ @@ -126,16 +125,27 @@
126 125
127 &_nav-right { 126 &_nav-right {
128 font-size: 26px; 127 font-size: 26px;
129 - padding-right: 20px; 128 + padding-right: 55px;
130 &-info { 129 &-info {
131 cursor: pointer; 130 cursor: pointer;
132 display: inline-block; 131 display: inline-block;
133 - padding: 0 10px; 132 + color: #fff;
  133 +
  134 + text-align: center;
  135 + width: 140px;
  136 + height: 50px;
  137 + line-height: 48px;
  138 + border-radius: 5px;
  139 + border: 1px solid #FFFFFF;
134 } 140 }
135 } 141 }
136 } 142 }
137 143
138 .to-detail-mask { 144 .to-detail-mask {
  145 + .adm-toast-main {
  146 + top: 25% !important;
  147 + max-width: 500px;
  148 + }
139 .adm-auto-center-content { 149 .adm-auto-center-content {
140 font-size: 28px !important; 150 font-size: 28px !important;
141 } 151 }
@@ -7,6 +7,8 @@ import { useNavigate } from "react-router-dom"; @@ -7,6 +7,8 @@ import { useNavigate } from "react-router-dom";
7 import {getProductLine} from "@/api/apiConfig"; 7 import {getProductLine} from "@/api/apiConfig";
8 import { SpinLoading } from 'antd-mobile' 8 import { SpinLoading } from 'antd-mobile'
9 9
  10 +import _icon from './icon.png'
  11 +
10 interface ListType { 12 interface ListType {
11 id: string; 13 id: string;
12 name: string; 14 name: string;
@@ -42,9 +44,11 @@ const ProductionManagement: React.FC = () => { @@ -42,9 +44,11 @@ const ProductionManagement: React.FC = () => {
42 44
43 45
44 return ( 46 return (
45 - <div className={'sxjx-content-main sxjx-layout-main-unfoot'}> 47 + <div className={'sxjx-content-main sxjx-layout-main-unfoot production-management-box'}>
46 <div className={'production-management'}> 48 <div className={'production-management'}>
47 - <NavBar title={'生产线管理'}/> 49 + <NavBar title={'生产线管理'}
  50 + style={{background: '#46658E'}}
  51 + />
48 { 52 {
49 !show ? <SpinLoading color='primary' /> : 53 !show ? <SpinLoading color='primary' /> :
50 <div className={'production-management_list'}> 54 <div className={'production-management_list'}>
@@ -53,10 +57,10 @@ const ProductionManagement: React.FC = () => { @@ -53,10 +57,10 @@ const ProductionManagement: React.FC = () => {
53 return <div 57 return <div
54 key={item?.id} 58 key={item?.id}
55 className={'production-management_list-item'} 59 className={'production-management_list-item'}
56 - style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}}  
57 onClick={() => toProductionList(item)} 60 onClick={() => toProductionList(item)}
58 > 61 >
59 - {item?.name} 62 + <img className={'production-management_list-item_icon'} src={_icon} alt=""/>
  63 + <p className={'production-management_list-item_name omit3'}>{item?.name}</p>
60 </div> 64 </div>
61 }) 65 })
62 } 66 }
  1 +.production-management-box {
  2 + background: #315381;
  3 +}
1 .production-management { 4 .production-management {
2 - background: #f7f7f7;  
3 -  
4 .adm-spin-loading { 5 .adm-spin-loading {
5 --size: 60px; 6 --size: 60px;
6 margin: 300px auto 0; 7 margin: 300px auto 0;
7 } 8 }
8 9
9 &_list { 10 &_list {
10 - padding: 60px; 11 + padding: 70px;
11 display: flex; 12 display: flex;
12 flex-wrap: wrap; 13 flex-wrap: wrap;
13 14
14 &-item { 15 &-item {
15 font-size: 28px; 16 font-size: 28px;
16 - width: 312px;  
17 - height: 312px;  
18 - color: #fff;  
19 - margin-right: 60px;  
20 - margin-bottom: 60px; 17 + width: 300px;
  18 + height: 380px;
  19 + margin-right: 70px;
  20 + margin-bottom: 70px;
21 cursor: pointer; 21 cursor: pointer;
22 - border-radius: 12px;  
23 - display: flex;  
24 - align-items: center;  
25 - justify-content: center;  
26 - line-height: 40px;  
27 - padding: 20px; 22 + border-radius: 30px;
  23 + padding: 30px;
28 box-sizing: border-box; 24 box-sizing: border-box;
29 text-align: center; 25 text-align: center;
  26 + background: url("./bg.png") center center no-repeat;
  27 + background-size: cover;
  28 + overflow: hidden;
30 29
31 &:nth-child(5n) { 30 &:nth-child(5n) {
32 margin-right: 0; 31 margin-right: 0;
33 } 32 }
  33 +
  34 + &_icon {
  35 + width: 120px;
  36 + height: 120px;
  37 + margin-top: 40px;
  38 + margin-bottom: 48px;
  39 + }
  40 + &_name {
  41 + line-height: 33px;
  42 + color: #fff;
  43 + }
34 } 44 }
35 } 45 }
36 } 46 }