diff --git a/src/components/Test.vue b/src/components/Test.vue index 7330a56..08bbf0a 100644 --- a/src/components/Test.vue +++ b/src/components/Test.vue @@ -1,5 +1,43 @@ @@ -11,5 +49,77 @@ box-sizing: border-box; background: #ffffff; border-radius: 16px; + padding: 20px; + padding-bottom: 80px; + display: grid; + row-gap: 20px; + column-gap: 20px; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(5, 1fr); + .common_set { + width: 580px; + height: 80px; + box-sizing: border-box; + border-radius: 14px; + background: #f6f6f6; + display: flex; + align-items: center; + .title { + font-family: Source Han Sans CN; + font-size: 20px; + font-weight: 500; + letter-spacing: 0.06em; + color: #000000; + width: 106px; + } + .num { + font-family: Source Han Sans CN; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.1em; + color: #000000; + } + } + .switch_wrap { + padding: 0 17px 0 40px; + justify-content: space-between; + .btn_wrap { + display: flex; + align-items: center; + .open { + margin-right: 10px; + width: 87px; + 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: 500; + letter-spacing: 0.1em; + color: #ffffff; + } + .close { + width: 87px; + height: 45px; + border-radius: 23px; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; + font-family: Source Han Sans CN; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.1em; + color: #d8d8d8; + } + } + } + .update_wrap { + } + .info_wrap { + } }