Commit 4f8854a7430a3f032df43e22ef20867ed6e31b09

Authored by 史婷婷
2 parents 8499954b 012ede3d

Merge remote-tracking branch 'origin/v1.0' into publish

... ... @@ -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>
... ...
  1 +.production-detail-box {
  2 + background: #000;
  3 +}
1 4 .production-detail {
2   - background: #f7f7f7;
3 5 position: relative;
4 6 width: 100%;
5 7 height: calc(100vh - 88px);
... ...
... ... @@ -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 {
... ...

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 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 }
... ...
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
... ...