diff --git a/src/components/Progress.vue b/src/components/Progress.vue index e708a75..7610304 100644 --- a/src/components/Progress.vue +++ b/src/components/Progress.vue @@ -1,5 +1,17 @@ @@ -11,5 +23,82 @@ box-sizing: border-box; background: #ffffff; border-radius: 16px; + padding: 20px; + padding-bottom: 30px; + .header_wrap { + display: flex; + align-items: center; + .left_progress { + width: 860px; + height: 80px; + border-radius: 14px; + background: #f6f6f6; + box-sizing: border-box; + padding: 0 23px; + display: flex; + align-items: center; + .left_time_tag { + width: 158.66px; + height: 45px; + border-radius: 23px; + opacity: 1; + 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; + margin-right: 73px; + } + .time { + width: 90px; + height: 20px; + font-family: Source Han Sans CN; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.1em; + color: #000000; + margin-right: 85px; + display: flex; + align-items: center; + } + .progress_bg { + width: 396px; + height: 14px; + border-radius: 7px; + background: #ffffff; + } + } + .right_btns { + display: flex; + align-items: center; + box-sizing: border-box; + margin-left: 20px; + .btn { + width: 140px; + height: 45px; + border-radius: 23px; + background: #f6f6f6; + 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: #d8d8d8; + } + .active { + color: #ffffff; + background: #06518b; + } + .ml { + margin-left: 20px; + } + } + } } diff --git a/src/pages/Home.vue b/src/pages/Home.vue index e652597..cbf7016 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -118,8 +118,8 @@

设置

- - + +