diff --git a/src/components/Operator.vue b/src/components/Operator.vue index 946e538..9491f37 100644 --- a/src/components/Operator.vue +++ b/src/components/Operator.vue @@ -1,7 +1,30 @@ @@ -21,6 +44,56 @@ box-sizing: border-box; border-radius: 16px; background: #ffffff; + padding: 20px; + .info_cards { + width: 726px; + height: 470px; + box-sizing: border-box; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + column-gap: 20px; + row-gap: 20px; + margin-bottom: 20px; + .card { + width: 353px; + height: 225px; + border-radius: 17.5px; + background: #06518b; + } + } + .warn_wrap { + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + padding: 0 20px; + width: 726px; + height: 50px; + border-radius: 6px; + background: #f6f6f6; + .warn_text { + font-family: Source Han Sans CN; + font-size: 12px; + font-weight: 500; + letter-spacing: 0.1em; + color: #fa1c1c; + } + .detail_btn { + width: 105px; + height: 31px; + border-radius: 16px; + background: #06518b; + display: flex; + align-items: center; + justify-content: center; + font-family: Source Han Sans CN; + font-size: 12px; + font-weight: normal; + letter-spacing: 0.1em; + color: #ffffff; + } + } } .right_container { height: 580px; @@ -28,6 +101,79 @@ border-radius: 16px; background: #ffffff; flex: 1; + padding: 42px; + padding-top: 32px; + .setting_title { + width: 340px; + height: 45px; + border-radius: 23px; + background: #06518b; + padding: 0 24px; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + font-family: Source Han Sans CN; + font-size: 14px; + font-weight: normal; + letter-spacing: 0.1em; + color: #ffffff; + margin-bottom: 41px; + } + .set_form { + width: 340px; + height: 190px; + box-sizing: border-box; + margin-bottom: 41px; + } + .start { + margin-bottom: 30px; + width: 340px; + height: 45px; + border-radius: 23px; + background: #06518b; + display: flex; + align-items: center; + justify-content: center; + font-family: Source Han Sans CN; + font-size: 14px; + font-weight: normal; + letter-spacing: 0.1em; + color: #ffffff; + } + .progress { + width: 340px; + height: 114px; + border-radius: 16px; + opacity: 1; + background: #f6f6f6; + box-sizing: border-box; + padding: 27px 24px 18px 27px; + .title { + font-family: Source Han Sans CN; + font-size: 12px; + font-weight: 350; + letter-spacing: 0.06em; + color: #9e9e9e; + margin-bottom: 13px; + } + .tube { + width: 292px; + height: 14px; + border-radius: 7px; + background: #ffffff; + margin-bottom: 11px; + } + .num { + display: flex; + justify-content: flex-end; + font-family: Source Han Sans CN; + font-size: 10px; + font-weight: normal; + letter-spacing: 0.06em; + color: #9e9e9e; + } + } } } diff --git a/src/pages/Home.vue b/src/pages/Home.vue index cbf7016..e652597 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -118,8 +118,8 @@

设置

- - + +