Commit 4f8854a7430a3f032df43e22ef20867ed6e31b09
Merge remote-tracking branch 'origin/v1.0' into publish
Showing
13 changed files
with
111 additions
and
77 deletions
... | ... | @@ -4,15 +4,15 @@ |
4 | 4 | left: 0; |
5 | 5 | right: 0; |
6 | 6 | height: calc( |
7 | - 88px + constant(safe-area-inset-top) | |
7 | + 100px + constant(safe-area-inset-top) | |
8 | 8 | ); /* 直接扩展高度,因为padding-bottom是内边距 */ |
9 | - height: calc(88px + env(safe-area-inset-top)); /* 直接扩展高度 */ | |
9 | + height: calc(100px + env(safe-area-inset-top)); /* 直接扩展高度 */ | |
10 | 10 | padding-top: constant(safe-area-inset-top); /*兼容 iOS<11.2 */ |
11 | 11 | padding-top: env(safe-area-inset-top); /* 兼容iOS>= 11.2*/ |
12 | 12 | background: #fff; |
13 | 13 | z-index: 98; |
14 | 14 | .adm-nav-bar { |
15 | - height: 88px; | |
15 | + height: 100px; | |
16 | 16 | padding: 0 12px; |
17 | 17 | .adm-nav-bar-left { |
18 | 18 | .adm-nav-bar-back { |
... | ... | @@ -36,10 +36,10 @@ |
36 | 36 | } |
37 | 37 | } |
38 | 38 | .adm-nav-bar-title { |
39 | - font-size: 32px; | |
40 | - color: #242835; | |
39 | + font-size: 36px; | |
40 | + color: #fff; | |
41 | 41 | text-align: center; |
42 | - font-weight: 600; | |
42 | + font-weight: 500; | |
43 | 43 | } |
44 | 44 | .adm-nav-bar-right { |
45 | 45 | } | ... | ... |
... | ... | @@ -8,7 +8,7 @@ interface pdfPreviewProps { |
8 | 8 | const pdfPreview = (props: pdfPreviewProps) => { |
9 | 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 | 13 | useEffect(()=>{ |
14 | 14 | if (props.url) { | ... | ... |
... | ... | @@ -58,7 +58,7 @@ button:focus-visible { |
58 | 58 | @media (prefers-color-scheme: light) { |
59 | 59 | :root { |
60 | 60 | color: #213547; |
61 | - background-color: #ffffff; | |
61 | + background-color: #315381; | |
62 | 62 | } |
63 | 63 | a:hover { |
64 | 64 | color: #747bff; |
... | ... | @@ -68,8 +68,12 @@ button:focus-visible { |
68 | 68 | } |
69 | 69 | } |
70 | 70 | |
71 | +:root { | |
72 | + background: #315381; | |
73 | +} | |
74 | + | |
71 | 75 | #root { |
72 | - background: #fff; | |
76 | + background: #315381; | |
73 | 77 | } |
74 | 78 | |
75 | 79 | /* Webkit 浏览器(Chrome, Safari, Edge) */ |
... | ... | @@ -78,13 +82,13 @@ button:focus-visible { |
78 | 82 | } |
79 | 83 | |
80 | 84 | ::-webkit-scrollbar-thumb { |
81 | - background-color: #1D295B; /* 滚动条的颜色 */ | |
85 | + background-color: #315381; /* 滚动条的颜色 */ | |
82 | 86 | border-radius: 6px; /* 滚动条的圆角 */ |
83 | 87 | } |
84 | 88 | |
85 | 89 | |
86 | 90 | ::-webkit-scrollbar-track { |
87 | - background-color: #314484; /* 滚动条轨道的颜色 */ | |
91 | + background-color: #315381; /* 滚动条轨道的颜色 */ | |
88 | 92 | border-radius: 6px; /* 轨道的圆角 */ |
89 | 93 | } |
90 | 94 | |
... | ... | @@ -157,7 +161,6 @@ button:focus-visible { |
157 | 161 | } |
158 | 162 | |
159 | 163 | .sxjx-content-main { |
160 | - background: #f7f7f7; | |
161 | 164 | min-height: 100vh; |
162 | 165 | width: 100vw; |
163 | 166 | box-sizing: border-box; |
... | ... | @@ -166,16 +169,16 @@ button:focus-visible { |
166 | 169 | |
167 | 170 | // 有头部有底部 |
168 | 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 | 174 | padding-bottom: calc(120px + constant(safe-area-inset-bottom)); |
172 | 175 | padding-bottom: calc(120px + env(safe-area-inset-bottom)); |
173 | 176 | } |
174 | 177 | |
175 | 178 | // 有头部没有底部 |
176 | 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 | 68 | useEffect(() => { |
69 | 69 | console.log('filePathItem', filePathItem) |
70 | 70 | if (!_.isEmpty(filePathItem)) { |
71 | - setTitle(filePathItem?.name) | |
71 | + setTitle(filePathItem?.name || '') | |
72 | 72 | } |
73 | 73 | }, [filePathItem]) |
74 | 74 | |
75 | 75 | |
76 | 76 | |
77 | 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 | 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 | 84 | const _url = localStorage.getItem('sxListPath') || ''; |
82 | 85 | navigate(_url, { replace: true }); |
83 | 86 | }}} |
... | ... | @@ -89,7 +92,7 @@ const ProductionDetail: React.FC = () => { |
89 | 92 | url={filePathItem?.url || ''} |
90 | 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 | 97 | </div> |
95 | 98 | </div> | ... | ... |
... | ... | @@ -14,7 +14,7 @@ export interface ListType { |
14 | 14 | id: string; |
15 | 15 | fileId: string; |
16 | 16 | name: string; |
17 | - url?: string; | |
17 | + url: string; | |
18 | 18 | type: 'pdf' | 'mp4' | string |
19 | 19 | } |
20 | 20 | |
... | ... | @@ -27,7 +27,6 @@ const ProductionList: React.FC = () => { |
27 | 27 | const [showBatch, setShowBatch] = useState<boolean>(false); |
28 | 28 | const navigate = useNavigate(); |
29 | 29 | const location = useLocation(); |
30 | - console.log('location', location?.pathname, location?.search) | |
31 | 30 | const [checkItems, setCheckItems] = useState<CheckboxValue[]>([]) |
32 | 31 | const [checkValues, setCheckValues] = useState<CheckboxValue[]>([]) |
33 | 32 | |
... | ... | @@ -127,13 +126,18 @@ const ProductionList: React.FC = () => { |
127 | 126 | } |
128 | 127 | |
129 | 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 | 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 | 143 | !show ? <SpinLoading color='primary'/> : |
... | ... | @@ -156,7 +160,7 @@ const ProductionList: React.FC = () => { |
156 | 160 | > |
157 | 161 | <img className={'production-list_list-item-img'} |
158 | 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 | 164 | {item?.name} |
161 | 165 | </div> |
162 | 166 | { | ... | ... |
1 | +.production-list-box { | |
2 | + background: #202D48; | |
3 | +} | |
1 | 4 | .production-list { |
2 | - background: #f7f7f7; | |
3 | - | |
4 | 5 | &--batch { |
5 | 6 | margin-bottom: 221px; |
6 | 7 | |
... | ... | @@ -9,13 +10,13 @@ |
9 | 10 | bottom: 0; |
10 | 11 | left: 0; |
11 | 12 | right: 0; |
12 | - background: #fff; | |
13 | + background: #37425b; | |
13 | 14 | height: calc(221px + env(safe-area-inset-bottom)); |
14 | 15 | height: calc(221px + env(safe-area-inset-bottom)); |
15 | 16 | z-index: 100; |
16 | 17 | &-top { |
17 | 18 | height: 100px; |
18 | - border-bottom: 1px solid #eee; | |
19 | + border-bottom: 1px solid #4C5A7B; | |
19 | 20 | padding: 0 60px; |
20 | 21 | display: flex; |
21 | 22 | justify-content: space-between; |
... | ... | @@ -32,12 +33,12 @@ |
32 | 33 | color: #aeb1b8; |
33 | 34 | cursor: pointer; |
34 | 35 | span { |
35 | - color: #1677ff; | |
36 | + color: #fff; | |
36 | 37 | padding: 0 10px; |
37 | 38 | } |
38 | 39 | } |
39 | 40 | &-close { |
40 | - color: #1677ff; | |
41 | + color: #fff; | |
41 | 42 | } |
42 | 43 | } |
43 | 44 | &-bottom { |
... | ... | @@ -58,7 +59,7 @@ |
58 | 59 | font-size: 20px; |
59 | 60 | width: 56px; |
60 | 61 | text-align: center; |
61 | - color: #333; | |
62 | + color: #fff; | |
62 | 63 | } |
63 | 64 | } |
64 | 65 | |
... | ... | @@ -77,37 +78,35 @@ |
77 | 78 | flex-wrap: wrap; |
78 | 79 | |
79 | 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 | 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 | 88 | box-sizing: border-box; |
92 | - text-align: center; | |
93 | - flex-direction: column; | |
94 | - | |
95 | 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 | 95 | &:nth-child(5n) { |
98 | 96 | margin-right: 0; |
99 | 97 | } |
100 | 98 | |
101 | 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 | 107 | &-name { |
108 | 108 | font-size: 28px; |
109 | - height: 80px; | |
110 | - line-height: 40px; | |
109 | + line-height: 33px; | |
111 | 110 | } |
112 | 111 | |
113 | 112 | .adm-checkbox { |
... | ... | @@ -126,16 +125,27 @@ |
126 | 125 | |
127 | 126 | &_nav-right { |
128 | 127 | font-size: 26px; |
129 | - padding-right: 20px; | |
128 | + padding-right: 55px; | |
130 | 129 | &-info { |
131 | 130 | cursor: pointer; |
132 | 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 | 144 | .to-detail-mask { |
145 | + .adm-toast-main { | |
146 | + top: 25% !important; | |
147 | + max-width: 500px; | |
148 | + } | |
139 | 149 | .adm-auto-center-content { |
140 | 150 | font-size: 28px !important; |
141 | 151 | } | ... | ... |
src/pages/production/management/bg.png
0 → 100644
409 KB
1 | 1 | import React, {useEffect, useState} from 'react' |
2 | 2 | import './style.less' |
3 | 3 | import NavBar from "@/components/nav-bar" |
4 | -import {baseColorPrimary} from "@/utils/common"; | |
5 | -import {hexToRgba} from "@/utils/utils"; | |
6 | 4 | import { useNavigate } from "react-router-dom"; |
7 | 5 | import {getProductLine} from "@/api/apiConfig"; |
8 | 6 | import { SpinLoading } from 'antd-mobile' |
9 | 7 | |
8 | +import _icon from './icon.png' | |
9 | + | |
10 | 10 | interface ListType { |
11 | 11 | id: string; |
12 | 12 | name: string; |
... | ... | @@ -42,9 +42,11 @@ const ProductionManagement: React.FC = () => { |
42 | 42 | |
43 | 43 | |
44 | 44 | return ( |
45 | - <div className={'sxjx-content-main sxjx-layout-main-unfoot'}> | |
45 | + <div className={'sxjx-content-main sxjx-layout-main-unfoot production-management-box'}> | |
46 | 46 | <div className={'production-management'}> |
47 | - <NavBar title={'生产线管理'}/> | |
47 | + <NavBar title={'生产线管理'} | |
48 | + style={{background: '#46658E'}} | |
49 | + /> | |
48 | 50 | { |
49 | 51 | !show ? <SpinLoading color='primary' /> : |
50 | 52 | <div className={'production-management_list'}> |
... | ... | @@ -53,10 +55,10 @@ const ProductionManagement: React.FC = () => { |
53 | 55 | return <div |
54 | 56 | key={item?.id} |
55 | 57 | className={'production-management_list-item'} |
56 | - style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}} | |
57 | 58 | onClick={() => toProductionList(item)} |
58 | 59 | > |
59 | - {item?.name} | |
60 | + <img className={'production-management_list-item_icon'} src={_icon} alt=""/> | |
61 | + <p className={'production-management_list-item_name omit3'}>{item?.name}</p> | |
60 | 62 | </div> |
61 | 63 | }) |
62 | 64 | } | ... | ... |
1 | +.production-management-box { | |
2 | + background: #315381; | |
3 | +} | |
1 | 4 | .production-management { |
2 | - background: #f7f7f7; | |
3 | - | |
4 | 5 | .adm-spin-loading { |
5 | 6 | --size: 60px; |
6 | 7 | margin: 300px auto 0; |
7 | 8 | } |
8 | 9 | |
9 | 10 | &_list { |
10 | - padding: 60px; | |
11 | + padding: 70px; | |
11 | 12 | display: flex; |
12 | 13 | flex-wrap: wrap; |
13 | 14 | |
14 | 15 | &-item { |
15 | 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 | 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 | 24 | box-sizing: border-box; |
29 | 25 | text-align: center; |
26 | + background: url("./bg.png") center center no-repeat; | |
27 | + background-size: cover; | |
28 | + overflow: hidden; | |
30 | 29 | |
31 | 30 | &:nth-child(5n) { |
32 | 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 | } |
\ No newline at end of file | ... | ... |