LiLongLong
/
matrix_spraying_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

环境设置页面

feature/debug
zhangjiming 6 months ago
parent
bd262535c3
commit
9a7e7ec280
18 changed files with 192 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/N0.svg
  2. 1
      src/assets/N1.svg
  3. 1
      src/assets/N2.svg
  4. 1
      src/assets/N3.svg
  5. 1
      src/assets/N4.svg
  6. 1
      src/assets/N5.svg
  7. 1
      src/assets/N6.svg
  8. 1
      src/assets/N7.svg
  9. 1
      src/assets/N8.svg
  10. 1
      src/assets/N9.svg
  11. 1
      src/assets/return.svg
  12. 34
      src/components/HeaderBar.vue
  13. 36
      src/components/TemperatureNum.vue
  14. 6
      src/router/index.ts
  15. 34
      src/style.css
  16. 9
      src/views/AboutView.vue
  17. 60
      src/views/EnvironmentView.vue
  18. 7
      src/views/HomeView.vue

1
src/assets/N0.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N1.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N2.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N3.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N4.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N5.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N6.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N7.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N8.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/N9.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="49" height="86" viewBox="0 0 49 86"><g><g><path d="M40.0158,0.072973L14.62361,0L10,4.45135L13.984210000000001,8.92703L39.376400000000004,9L44,4.54865L40.0158,0.072973Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M37.0154,38.0729723L11.62402,38L7,42.45135L10.98456,46.92702L36.376000000000005,47L41,42.54865L37.0154,38.0729723Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M11.0181,36.5824L13,10.44478L8.82443,6L3.97874,10.420639999999999L2,36.5582L6.17241,41L11.0181,36.5824Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M34.8982,77.0729746L8.756920000000001,77L4,81.45135L8.09865,85.92703L34.239999999999995,86L39,81.54865L34.8982,77.0729746Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M9.02069,75.4562L11,48.56867L6.82639,44L1.9793,48.54384L0,75.4313L4.17361,80L9.02069,75.4562Z" fill="#1562B7" fill-opacity="0.09000000357627869" style="mix-blend-mode:passthrough"/></g><g><path d="M47.02127,36.456199999999995L49,9.57177L44.82442,5L39.97874,9.54694L38,36.4313L42.17558,41L47.02127,36.456199999999995Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M44.19827,75.4562L46,48.56867L42.20402,44L37.79885,48.54384L36,75.4313L39.7931,80L44.19827,75.4562Z" fill="#1562B7" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/return.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="15" viewBox="0 0 18 15"><g><path d="M11.3379,2.93878L7.78827,2.93878L7.78827,0L0,3.96893L7.78825,7.93788L7.78825,5.00583L11.6318,5.00583C14.6743,5.00583,16.1951,6.30458,16.1951,8.90209C16.1951,11.5896,14.6236,12.933,11.48,12.933L2.51593,12.933L2.51593,15L11.5712,15C15.8571,15,18,13.0328,18,9.09854C18,4.99226,15.7795,2.93878,11.3379,2.93878Z" fill="#26509C" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>

34
src/components/HeaderBar.vue
View File

@ -2,18 +2,44 @@
<header class="h-[--headerHeight] bg-primary flex items-center text-white"> <header class="h-[--headerHeight] bg-primary flex items-center text-white">
<img class="w-[83px] ml-6" src="@/assets/logo.png" alt="logo" /> <img class="w-[83px] ml-6" src="@/assets/logo.png" alt="logo" />
<div class="w-0.5 h-5 bg-white mx-3"></div> <div class="w-0.5 h-5 bg-white mx-3"></div>
<p class="text-lg">基质喷涂转印仪</p>
<p class="text-lg">{{ pageNameMap[route.path] }}</p>
<div class="flex items-center bg-[#335AA5] px-4 py-1 rounded ml-auto"> <div class="flex items-center bg-[#335AA5] px-4 py-1 rounded ml-auto">
<i class="bg-[#8CFBB7] w-[14px] h-[14px] rounded-full mr-2"></i> <i class="bg-[#8CFBB7] w-[14px] h-[14px] rounded-full mr-2"></i>
<p>基质余量正常</p> <p>基质余量正常</p>
</div> </div>
<Time class="mx-4"></Time> <Time class="mx-4"></Time>
<div class="btn-light px-5 py-1 mx-6 rounded">
<img src="@/assets/menu.svg" alt="menu" />
<p class="text-lg ml-2 text-primary">菜单</p>
<div class="btn-light px-5 py-1 mx-6 rounded" @click="onMenuBtnClick">
<img v-if="route.path === '/'" src="@/assets/menu.svg" alt="menu" />
<img v-else src="@/assets/return.svg" alt="return" />
<p class="text-lg ml-2 text-primary">{{ route.path === "/" ? "菜单" : "返回" }}</p>
</div> </div>
</header> </header>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { watch, ref, computed } from "vue";
import Time from "@/components/Time.vue"; import Time from "@/components/Time.vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const pageNameMap: Record<string, string> = {
"/": "基质喷涂转印仪",
"/environment": "环境设置",
};
function onMenuBtnClick() {
if (route.path !== "/") {
router.back();
}
}
// watch(
// () => route.path,
// newPath => {
// console.log(newPath);
// if (newPath !== "/") {
// }
// }
// );
</script> </script>

36
src/components/TemperatureNum.vue
View File

@ -0,0 +1,36 @@
<template>
<div class="flex items-center">
<img :src="numImgMap[Math.floor(val / 10)]" alt="n" class="mr-3" />
<img :src="numImgMap[Math.floor(val) % 10]" alt="n" />
<i class="h-[10px] w-[10px] mx-6 bg-[#1562B7] self-end"></i>
<img :src="numImgMap[Math.floor(val * 10) % 10]" alt="n" />
</div>
</template>
<script setup lang="ts">
import N0 from "@/assets/N0.svg";
import N1 from "@/assets/N1.svg";
import N2 from "@/assets/N2.svg";
import N3 from "@/assets/N3.svg";
import N4 from "@/assets/N4.svg";
import N5 from "@/assets/N5.svg";
import N6 from "@/assets/N6.svg";
import N7 from "@/assets/N7.svg";
import N8 from "@/assets/N8.svg";
import N9 from "@/assets/N9.svg";
const numImgMap: Record<number, string> = {
0: N0,
1: N1,
2: N2,
3: N3,
4: N4,
5: N5,
6: N6,
7: N7,
8: N8,
9: N9,
};
const props = defineProps<{ val: number }>();
</script>

6
src/router/index.ts
View File

@ -10,12 +10,12 @@ const router = createRouter({
component: HomeView, component: HomeView,
}, },
{ {
path: '/about',
name: 'about',
path: '/environment',
name: 'environment',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route // this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'),
component: () => import('../views/EnvironmentView.vue'),
}, },
], ],
}) })

34
src/style.css
View File

@ -3,16 +3,19 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--primaryColor: #26509C;
--primaryColor: #26509c;
--headerHeight: 54px; --headerHeight: 54px;
--footerHeight: 62px; --footerHeight: 62px;
} }
@layer utilities { @layer utilities {
.dark-gradient {
background: linear-gradient(110deg, #0349a8 11%, #1663b7 105%);
}
.btn-dark { .btn-dark {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(90deg, #0657C0 24%, #096AE0 101%);
background: linear-gradient(90deg, #0657c0 24%, #096ae0 101%);
border-radius: 4px; border-radius: 4px;
color: white; color: white;
} }
@ -21,7 +24,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(180deg, #ebf1fa 0%, #f8fafd 100%); background: linear-gradient(180deg, #ebf1fa 0%, #f8fafd 100%);
box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3),0px 1px 5px 0px rgba(173, 173, 173, 0.47);
box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3), 0px 1px 5px 0px rgba(173, 173, 173, 0.47);
border-radius: 4px; border-radius: 4px;
color: var(--primaryColor); color: var(--primaryColor);
} }
@ -29,4 +32,29 @@
height: calc(100vh - var(--headerHeight)); height: calc(100vh - var(--headerHeight));
background: linear-gradient(180deg, #dfe8f7 0%, #ffffff 100%); background: linear-gradient(180deg, #dfe8f7 0%, #ffffff 100%);
} }
.shadow-card {
background: linear-gradient(180deg, #e8effa 0%, #fdfdfe 100%);
box-shadow: 0px -1px 0px 0px #ffffff, 0px 2px 6px 0px rgba(174, 174, 174, 0.2);
border-radius: 15px;
}
.true {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: var(--primaryColor);
border-radius: 6px;
width: 34px;
height: 34px;
}
.false {
display: flex;
justify-content: center;
align-items: center;
color: var(--primaryColor);
background-color: #e8ecf7;
border-radius: 6px;
width: 34px;
height: 34px;
}
} }

9
src/views/AboutView.vue
View File

@ -1,9 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<style>
</style>

60
src/views/EnvironmentView.vue
View File

@ -0,0 +1,60 @@
<template>
<div class="main-page flex flex-col">
<section class="shadow-card h-[210px] mx-6 mt-12 flex items-stretch">
<div class="relative flex-auto flex justify-center items-center">
<TemperatureNum :val="18.47" />
<div class="absolute top-0 left-1/2 -translate-x-1/2 dark-gradient text-white px-9 py-2 rounded-b-[12px]">
当前温度
</div>
</div>
<div class="self-center h-[86px] w-0.5 bg-[#E8ECF7]"></div>
<div class="relative flex-auto flex justify-center items-center">
<TemperatureNum :val="42.9" />
<div class="absolute top-0 left-1/2 -translate-x-1/2 dark-gradient text-white px-9 py-2 rounded-b-[12px]">
当前湿度
</div>
</div>
</section>
<section class="flex items-stretch justify-between min-h-[94px] px-6 mt-10">
<div class="shadow-card px-[26px] w-[224px]">
<p class="text-primary font-medium mt-[14px] mb-2">要求温度</p>
<div class="flex items-center">
<input
class="w-[146px] border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center"
type="text" />
<span class="text-[#1562B7] font-medium ml-[10px]">°C</span>
</div>
</div>
<div class="shadow-card px-[26px] w-[248px]">
<p class="text-primary font-medium mt-[14px] mb-2">要求湿度</p>
<div class="flex items-center">
<input
class="w-[146px] border-none outline-none h-[34px] bg-[#E8ECF7] text-primary font-medium rounded-md text-lg text-center"
type="text" />
<span class="text-[#1562B7] font-medium ml-[10px]">%RH</span>
</div>
</div>
<div class="shadow-card px-[26px] w-[200px]">
<p class="text-primary font-medium mt-[14px] mb-2 text-center">是否需要氮气置换</p>
<div class="flex items-center justify-evenly">
<div class="true">是</div>
<div class="false">否</div>
</div>
</div>
<div class="shadow-card px-[26px] w-[200px]">
<p class="text-primary font-medium mt-[14px] mb-2 text-center">环境完成后蜂鸣器</p>
<div class="flex items-center justify-evenly">
<div class="true">是</div>
<div class="false">否</div>
</div>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import TemperatureNum from "@/components/TemperatureNum.vue";
</script>
<style></style>

7
src/views/HomeView.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<main class="relative main-page"> <main class="relative main-page">
<section class="pt-[90px] mb-5 flex justify-between px-[90px]"> <section class="pt-[90px] mb-5 flex justify-between px-[90px]">
<img src="@/assets/entry1.png" alt="entry1" />
<img src="@/assets/entry1.png" alt="entry1" @click="onEnvironmentEntryClick" />
<img src="@/assets/entry2.png" alt="entry1" /> <img src="@/assets/entry2.png" alt="entry1" />
<img src="@/assets/entry3.png" alt="entry1" /> <img src="@/assets/entry3.png" alt="entry1" />
</section> </section>
@ -25,5 +25,10 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter()
function onEnvironmentEntryClick() {
router.push('/environment')
}
</script> </script>
Write Preview
Loading…
Cancel
Save