Skip to content

Commit 4f4b545

Browse files
Shen-wbShen-wb
committed
update sample
1 parent 815e55b commit 4f4b545

File tree

17 files changed

+716
-428
lines changed

17 files changed

+716
-428
lines changed

‎scenarios/read-a-drivers-license/SampleDriversLicense.jpg‎

-521 KB
Binary file not shown.

‎scenarios/read-a-drivers-license/index.html‎

Lines changed: 120 additions & 261 deletions
Large diffs are not rendered by default.

‎scenarios/read-a-drivers-license/logo-dynamsoft.png‎

5.32 KB
Loading

scenarios/read-a-drivers-license/read_and_parse_dl.json renamed to scenarios/read-a-drivers-license/read_dl.json

File renamed without changes.

‎scenarios/read-a-drivers-license/style.css‎

Lines changed: 112 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,174 +1,154 @@
11
* {
22
margin: 0;
33
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
46
}
57

8+
html,
69
body {
7-
display: flex;
8-
flex-direction: column;
9-
align-items: center;
10-
justify-content: center;
11-
overflow: hidden;
12-
width: 100vw;
13-
height: 100vh;
10+
width: 100%;
11+
height: 100%
1412
}
1513

16-
#span-tip {
14+
.home-page {
1715
position: absolute;
18-
font-size: 1rem;
19-
color: #fe8e14;
20-
top: 1vh;
21-
}
22-
23-
h1 {
24-
font-size: 1.5em;
25-
}
26-
27-
a {
28-
color: #fe8d14;
29-
}
30-
31-
a:hover {
32-
color: #fe8d14a1;
33-
}
34-
35-
strong {
36-
color: rgb(254, 142, 20);
16+
width: 100%;
17+
height: 100%;
18+
background-color: #323234;
19+
z-index: 2;
3720
}
3821

39-
#svg-start {
40-
width: 100px;
41-
height: 100px;
42-
fill: #aaa;
22+
.home-page .home-page-title {
23+
width: 100%;
24+
color: white;
25+
position: absolute;
26+
top: 35%;
27+
left: 50%;
28+
transform: translate(-50%, -50%);
29+
font-size: 30px;
30+
text-align: center;
31+
}
32+
33+
.home-page .start-btn {
34+
height: 10%;
35+
min-height: 50px;
36+
border-radius: 50%;
37+
background-color: #ffffff;
38+
position: absolute;
39+
top: 50%;
40+
left: 50%;
41+
transform: translate(-50%, -50%);
42+
aspect-ratio: 1/1;
4343
cursor: pointer;
44-
}
45-
46-
#main-container {
4744
display: flex;
48-
flex-direction: row;
49-
align-items: center;
5045
justify-content: center;
51-
width: 50vw;
52-
height: 60vh;
46+
align-items: center;
5347
}
5448

55-
.dce-bg-camera {
49+
.home-page .start-btn .start-icon {
50+
width: 0;
51+
height: 0;
52+
border-top: 15px solid transparent;
53+
border-bottom: 15px solid transparent;
54+
border-left: 25px solid #FE8E14;
5655
position: absolute;
57-
left: 0;
58-
top: 0;
59-
right: 0;
60-
bottom: 0;
61-
margin: auto;
62-
width: 40%;
63-
height: 40%;
64-
fill: #aaa;
56+
top: 50%;
57+
left: 50%;
58+
transform: translate(-40%, -50%);
6559
}
6660

67-
#camera-view-container {
61+
.home-page .start-btn .loading {
62+
width: 70%;
63+
height: 70%;
6864
display: none;
69-
width: 100%;
70-
height: 100%;
65+
position: absolute;
66+
font-size: 14px;
67+
border: 4px solid #FE8E14;
68+
border-right-color: transparent;
69+
border-radius: 50%;
70+
color: transparent;
71+
font-weight: 700;
72+
animation: rotate 1s linear infinite;
7173
}
7274

73-
#result-container {
74-
display: none;
75-
position: fixed;
76-
width: 50vw;
77-
height: 70vh;
78-
z-index: 10;
79-
color: white;
80-
font-size: small;
81-
background: #222222;
82-
margin-top: 30px;
75+
.home-page .logo-dynamsoft {
76+
position: absolute;
77+
left: 50%;
78+
bottom: 50px;
79+
transform: translate(-50%, -50%);
80+
width: 130px;
81+
height: 32px;
8382
}
8483

85-
#result-container .result-header {
84+
.parsed-result-view {
85+
position: absolute;
8686
width: 100%;
87-
height: 30px;
88-
background-color: #000;
89-
font-size: 16px;
90-
line-height: 30px;
91-
padding-left: 10px;
92-
box-sizing: border-box;
87+
height: 100%;
88+
background-color: #DEDFE1;
89+
display: none;
90+
overflow: auto;
91+
top: 50%;
92+
left: 50%;
93+
transform: translate(-50%, -50%);
94+
border: 1px solid #E9EAEB;
9395
}
9496

95-
#result-container .result-body {
96-
height: calc(70vh - 30px);
97-
overflow-y: auto;
98-
padding: 5px;
99-
box-sizing: border-box;
97+
.parsed-result-view .barcode-text {
98+
width: 100%;
99+
height: 80px;
100+
background-color: #fff;
101+
margin-bottom: 10px;
102+
color: #323234;
103+
padding: 10px 27px;
104+
font-weight: 600;
105+
overflow: auto;
106+
word-break: break-all;
100107
}
101108

102-
#result-container p {
103-
padding: 5px;
104-
margin: 0;
109+
.parsed-result-view .parsed-result-list {
110+
width: 100%;
111+
height: fit-content;
112+
max-height: 70%;
113+
background-color: #fff;
114+
overflow: auto;
105115
}
106116

107-
#message-container {
108-
display: none;
109-
align-items: center;
110-
width: 50vw;
111-
padding: 8px 16px;
112-
margin: -92px 0 10px 0;
113-
box-sizing: border-box;
114-
border-radius: 4px;
115-
position: relative;
116-
background-color: #f4f4f5;
117-
color: #909399;
117+
.parsed-result-view .parsed-result-list .parsed-result-item {
118+
width: 100%;
119+
height: 60px;
120+
line-height: 60px;
121+
padding: 0 27px;
122+
border-bottom: 1px solid #E9EAEB;
123+
font-size: 18px;
118124
overflow: hidden;
119-
transition: opacity 0.2s;
120-
}
121-
122-
#message-container .message-icon {
123-
font-size: 28px;
124-
width: 28px;
125-
line-height: 0;
126-
padding-right: 1rem;
127-
}
128-
129-
#message-container .div-message-content {
130-
display: table-cell;
131-
padding: 0 8px;
125+
white-space: nowrap;
126+
text-overflow: ellipsis;
132127
}
133128

134-
.message-content > span {
135-
font-weight: 700;
136-
font-size: 14px;
137-
line-height: 18px;
129+
.parsed-result-view .parsed-result-list .parsed-result-item strong {
130+
font-weight: 500;
138131
}
139132

140-
.message-content > p {
141-
font-size: 13px;
142-
margin: 5px 0 0;
143-
line-height: 20px;
133+
.parsed-result-view .parsed-result-list .parsed-result-item span {
134+
color: #666666;
144135
}
145136

146-
.api_highlight {
147-
font-weight: 700;
148-
background-color: #ddd;
137+
.parsed-result-view .back-to-scan {
138+
width: 80%;
139+
height: 50px;
140+
max-width: 372px;
141+
background-color: #FE8E14;
149142
border-radius: 4px;
150-
padding: 2px;
143+
color: #FFFFFF;
144+
font-size: 20px;
145+
text-align: center;
146+
line-height: 50px;
147+
margin: 30px auto;
151148
}
152149

153-
.close-button {
154-
position: absolute;
155-
top: 12px;
156-
right: 15px;
157-
cursor: pointer;
158-
line-height: 0;
159-
}
160-
161-
/* Small devices */
162-
@media only screen and (max-width: 1000px) {
163-
#message-container {
164-
width: 90vw;
165-
}
166-
167-
#main-container {
168-
width: 80vw;
150+
@keyframes rotate {
151+
to {
152+
transform: rotate(360deg);
169153
}
170-
171-
#result-container {
172-
width: 80vw;
173-
}
174-
}
154+
}

‎scenarios/read-vin/README.md‎

Whitespace-only changes.

0 commit comments

Comments
 (0)