From 367e25c7adcf13cc22dbf8d918d3a375f5973e6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Mon, 23 Sep 2024 10:53:42 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AC=BC=ED=92=88=20=EB=B0=8F=20=EB=8F=84?= =?UTF-8?q?=EB=A9=B4=20=EA=B4=80=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/common/datepicker.svg | 17 ++ .../static/images/common/select_light_arr.svg | 3 + public/static/images/main/drawing_icon.svg | 8 + public/static/images/main/home_icon.svg | 6 + public/static/images/main/loaction_arr.svg | 3 + public/static/images/sub/copy_ico.svg | 6 + public/static/images/sub/tooltips.svg | 4 + src/app/inputwrap/page.jsx | 238 ++++++++++++------ src/app/management/productinfo/page.jsx | 53 ++++ src/app/management/productstate/page.jsx | 45 ++++ src/components/publishpage/PublishPage.jsx | 13 + .../management/productinfo/ProductInfoBox.jsx | 22 ++ .../productinfo/ProductInfoTable.jsx | 227 +++++++++++++++++ .../management/productstate/ProductsList.jsx | 30 +++ .../productstate/PropertyStatus.jsx | 130 ++++++++++ src/styles/_contents.scss | 221 ++++++++++++++++ src/styles/_inputcommon.scss | 14 ++ src/styles/_layout.scss | 2 +- src/styles/_reset.scss | 201 ++++++++++++--- src/styles/_table.scss | 93 +++++++ src/styles/contents.scss | 3 +- 21 files changed, 1236 insertions(+), 103 deletions(-) create mode 100644 public/static/images/common/datepicker.svg create mode 100644 public/static/images/common/select_light_arr.svg create mode 100644 public/static/images/main/drawing_icon.svg create mode 100644 public/static/images/main/home_icon.svg create mode 100644 public/static/images/main/loaction_arr.svg create mode 100644 public/static/images/sub/copy_ico.svg create mode 100644 public/static/images/sub/tooltips.svg create mode 100644 src/app/management/productinfo/page.jsx create mode 100644 src/app/management/productstate/page.jsx create mode 100644 src/components/sub/management/productinfo/ProductInfoBox.jsx create mode 100644 src/components/sub/management/productinfo/ProductInfoTable.jsx create mode 100644 src/components/sub/management/productstate/ProductsList.jsx create mode 100644 src/components/sub/management/productstate/PropertyStatus.jsx create mode 100644 src/styles/_table.scss diff --git a/public/static/images/common/datepicker.svg b/public/static/images/common/datepicker.svg new file mode 100644 index 0000000..e892f20 --- /dev/null +++ b/public/static/images/common/datepicker.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/static/images/common/select_light_arr.svg b/public/static/images/common/select_light_arr.svg new file mode 100644 index 0000000..97afb28 --- /dev/null +++ b/public/static/images/common/select_light_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/main/drawing_icon.svg b/public/static/images/main/drawing_icon.svg new file mode 100644 index 0000000..0e66181 --- /dev/null +++ b/public/static/images/main/drawing_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/main/home_icon.svg b/public/static/images/main/home_icon.svg new file mode 100644 index 0000000..107bc4f --- /dev/null +++ b/public/static/images/main/home_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/loaction_arr.svg b/public/static/images/main/loaction_arr.svg new file mode 100644 index 0000000..590932c --- /dev/null +++ b/public/static/images/main/loaction_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/sub/copy_ico.svg b/public/static/images/sub/copy_ico.svg new file mode 100644 index 0000000..f259e2a --- /dev/null +++ b/public/static/images/sub/copy_ico.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/sub/tooltips.svg b/public/static/images/sub/tooltips.svg new file mode 100644 index 0000000..d4634f2 --- /dev/null +++ b/public/static/images/sub/tooltips.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/inputwrap/page.jsx b/src/app/inputwrap/page.jsx index 42a6c5b..3e9480a 100644 --- a/src/app/inputwrap/page.jsx +++ b/src/app/inputwrap/page.jsx @@ -9,88 +9,180 @@ export default function InputWrapPage (){ {name: 'オンライン保証シ',}, {name: 'ステム'} ] return( -
-
-

BTN WRAP

-
- - - - - +
+

dark

+
+
+

BTN WRAP

+
+ + + + + +
-
-
-

Select WRAP

-
- +
+

Select WRAP

+
+ +
-
-
-

Input WRAP

-
- +
+

Input WRAP

+
+ + +
- -
-
-

DatePicker WRAP

-
-
- + +
+

colorpicker

+
+
-
- +
+
+

Check-Btn

+
+ + +
+
+
+

Arrow-Btn

+
+ + + + +
+
+
+

main-radio

+
+
+ + +
+
+ + +
-
-

colorpicker

-
- -
-
-
-

Check-Btn

-
- - -
-
-
-

Arrow-Btn

-
- - - - -
-
-
-

main-radio

-
-
- - +

light

+
+
+

input-wrap

+
+
+ normal + +
+
+ read only + +
-
- - +
+
+

select-wrap

+
+
+ normal + +
+
+ disabled + +
+
+
+
+

radio-check-wrap

+
+ radio +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ check +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+

date-picker-wrap

+
+
+
+ +
+
+
+
+
+

button-wrap

+
+
+ + +
diff --git a/src/app/management/productinfo/page.jsx b/src/app/management/productinfo/page.jsx new file mode 100644 index 0000000..8b17283 --- /dev/null +++ b/src/app/management/productinfo/page.jsx @@ -0,0 +1,53 @@ +import Header from "@/components/layout/Header"; +import Image from "next/image"; +import Link from 'next/link'; +import Footer from '@/components/layout/Footer'; +import '@/styles/contents.scss'; +import ProductInfoTable from "@/components/sub/management/productinfo/ProductInfoTable"; +import ProductInfoBox from "@/components/sub/management/productinfo/ProductInfoBox"; + +export default function ProductInfo(){ + return( +
+
+
+
+
+
    +
  • + 商品情報 +
    • +
  • + 作図 +
    • +
+
    +
  • + + react + +
    • +
  • + 物品及び図面管理 +
    • +
  • + 商品情報 +
    • +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/management/productstate/page.jsx b/src/app/management/productstate/page.jsx new file mode 100644 index 0000000..637281f --- /dev/null +++ b/src/app/management/productstate/page.jsx @@ -0,0 +1,45 @@ +import Footer from "@/components/layout/Footer"; +import Header from "@/components/layout/Header"; +import PropertyStatus from "@/components/sub/management/productstate/PropertyStatus"; +import Image from "next/image"; +import '@/styles/contents.scss' +import ProductsList from "@/components/sub/management/productstate/ProductsList"; + +export default function ProductStatePage(){ + return( +
+
+
+
+
+

物品及び図面管理

+
    +
  • + + react + +
    • +
  • + 物品及び図面管理 +
    • +
  • + 新規物件登録 +
    • +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx index 1bea5f4..afdfe53 100644 --- a/src/components/publishpage/PublishPage.jsx +++ b/src/components/publishpage/PublishPage.jsx @@ -90,6 +90,19 @@ export default function PublishPage() { 2024-09-11 + + 물품 및 도면 관리 + + 물건현황 + + 2024-09-12 + + + + 물건정보 + + 2024-09-12 + diff --git a/src/components/sub/management/productinfo/ProductInfoBox.jsx b/src/components/sub/management/productinfo/ProductInfoBox.jsx new file mode 100644 index 0000000..f3424a0 --- /dev/null +++ b/src/components/sub/management/productinfo/ProductInfoBox.jsx @@ -0,0 +1,22 @@ +export default function ProductInfoBox(){ + return( +
+
+
品番
+
R201TES012406019001
+
+
+
仕様確認日
+
2024.08.01
+
+
+
更新日時
+
2024.07.17 17:10:06 (キムジヤング)
+
+
+
登録日
+
2024.07.17(キムジヤング)
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/sub/management/productinfo/ProductInfoTable.jsx b/src/components/sub/management/productinfo/ProductInfoTable.jsx new file mode 100644 index 0000000..bf2218b --- /dev/null +++ b/src/components/sub/management/productinfo/ProductInfoTable.jsx @@ -0,0 +1,227 @@ +export default function ProductInfoTable(){ + return( +
+
* 必須入力項目
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
担当者 * +
+ +
+
物品区分/物件名 * +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+
商品名 ふりがな +
+ +
+
+
+
+ 一次販売店名/ID * +
+
+
+ 		+
+
+ +
+
+ +
+ +
+
+
+
+ 二次販売店名/ID * +
+
+
+ 		+
+
+ +
+
+ +
+
+
郵便番号 * +
+
+ +
+ +
※ 郵便番号7桁を入力した後、アドレス検索ボタンをクリックしてください
+
+
都道府県 / 住所 * +
+
+ +
+
+ +
+
+
発電量シミュレーション地域 * +
+ +
+
基準風速 * +
+
+ +
+ m/s以下 +
+
垂直説説 * +
+
+ +
+ cm +
+ + +
+
+
面調図区分 * +
+
+ + +
+
+ + +
+
+ + +
+
+
+
設置高さ * +
+
+ +
+ m +
+
契約条件 +
+
+ + +
+
+ + +
+
+
メモ +
+ +
+
+
+
+ + + +
+
+ ) +} \ No newline at end of file diff --git a/src/components/sub/management/productstate/ProductsList.jsx b/src/components/sub/management/productstate/ProductsList.jsx new file mode 100644 index 0000000..0663e4f --- /dev/null +++ b/src/components/sub/management/productstate/ProductsList.jsx @@ -0,0 +1,30 @@ +export default function ProductsList(){ + return( +
+
+
+

商品リスト

+
    +
  • 全体 28
    • +
  • 選択 6
    • +
+
+
+
+ +
+
+ +
+
+
+
+ gird +
+
+ ) +} \ No newline at end of file diff --git a/src/components/sub/management/productstate/PropertyStatus.jsx b/src/components/sub/management/productstate/PropertyStatus.jsx new file mode 100644 index 0000000..95b55dc --- /dev/null +++ b/src/components/sub/management/productstate/PropertyStatus.jsx @@ -0,0 +1,130 @@ +import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker"; + +export default function PropertyStatus(){ + return( +
+
+
+

物件状況

+
+
+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
品番 +
+ +
+ 		販売代理店ID +
+ +
+ 		商品アドレス +
+ +
+
商品名 +
+ +
+ 		販売代理店名 +
+ +
+ 		仕様確認可否 +
+
+ + +
+
+ + +
+
+ + +
+
+
担当者 +
+ +
+ 		見積もり +
+ +
+ 		2次点の選択 +
+ +
+
期間検索 +
+
+
+ + +
+
+ + +
+
+
+
+ +
+ ~ +
+ +
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index a508748..de383a2 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -386,4 +386,225 @@ width: 100%; height: 100%; } +} + +// sub-page +.sub-header{ + position: fixed; + top: 46px; + left: 0; + width: 100%; + height: 46px; + border-bottom: 1px solid #000; + background: #2C2C2C; + z-index: 999; + .sub-header-inner{ + display: flex; + align-items: center; + height: 100%; + padding: 0 100px; + .sub-header-title-wrap{ + display: flex; + align-items: center; + .title-item{ + position: relative; + padding: 0 24px; + a{ + display: flex; + align-items: center; + .icon{ + width: 22px; + height: 22px; + margin-right: 8px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);} + } + } + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 16px; + background-color: #D9D9D9; + } + &:first-child{ + padding-left: 0; + } + &:last-child{ + padding-right: 0; + &:after{ + display: none; + } + } + } + } + .sub-header-title{ + font-size: 16px; + color: #fff; + font-weight: 600; + } + .sub-header-location{ + margin-left: auto; + display: flex; + align-items: center; + .location-item{ + position: relative; + display: flex; + align-items: center; + padding: 0 10px; + span{ + display: flex; + font-size: 12px; + color: #AAA; + font-weight: normal; + cursor: default; + } + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 4px; + height: 6px; + background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center; + } + &:first-child{ + padding-left: 0; + } + &:last-child{ + padding-right: 0; + span{ + color: #fff; + } + &:after{ + display: none; + } + } + } + } + } +} + +// sub content +.sub-content{ + padding-top: 46px; + .sub-content-inner{ + max-width: 1720px; + margin: 0 auto; + padding-top: 24px; + .sub-content-box{ + margin-bottom: 20px; + &:last-child{ + margin-bottom: 0; + } + } + } +} +.sub-table-box{ + padding: 20px; + border-radius: 6px; + border: 1px solid #E9EAED; + background: #FFF; + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + .table-box-title-wrap{ + display: flex; + align-items: center; + margin-bottom: 10px; + .title-wrap{ + display: flex; + align-items: center; + h3{ + display: block; + font-size: 15px; + color: #101010; + font-weight: 600; + margin-right: 14px; + } + .info-wrap{ + display: flex; + align-items: center; + li{ + position: relative; + padding: 0 6px; + font-size: 12px; + color: #101010; + font-weight: normal; + span{ + font-weight: 600; + &.red{ + color: #E23D70; + } + } + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 11px; + background-color: #D9D9D9; + } + &:first-child{padding-left: 0;} + &:last-child{padding-right: 0;&::after{display: none;}} + } + } + } + } + .left-unit-box{ + margin-left: auto; + display: flex; + align-items: center; + } + .promise-gudie{ + display: block; + font-size: 13px; + font-weight: 700; + color: #101010; + margin-bottom: 20px; + } + .important{ + color: #f00; + } + .sub-table-footer{ + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + } +} + +.infomation-box-wrap{ + display: flex; + align-items: center; + gap: 10px; + .sub-table-box{ + flex: 1 ; + } + .info-title{ + font-size: 14px; + font-weight: 500; + color: #344356; + margin-bottom: 10px; + } + .info-inner{ + position: relative; + font-size: 13px; + color: #344356; + .copy-ico{ + position: absolute; + bottom: 0; + right: 0; + width: 16px; + height: 16px; + background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center; + background-size: cover; + } + } } \ No newline at end of file diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss index 450b630..78534fd 100644 --- a/src/styles/_inputcommon.scss +++ b/src/styles/_inputcommon.scss @@ -2,7 +2,10 @@ max-width: 1600px; margin: 0 auto; padding-bottom: 100px; + display: flex; + flex-wrap: wrap; .input-wrap{ + width: 33.333%; padding: 50px 50px 0; h1{ margin-bottom: 20px; @@ -33,4 +36,15 @@ } } } + .flx{ + display: flex; + align-items: center; + } +} +.title{ + max-width: 1600px; + margin: 0 auto; + font-size: 28px; + font-weight: 600; + text-transform: uppercase; } \ No newline at end of file diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 7e4faf1..2bddf61 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -222,7 +222,7 @@ footer{ .footer-inner{ max-width: 1400px; margin: 0 auto; - padding: 45px 0; + padding: 35px 0; span{ display: block; font-size: 11px; diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 432376c..d4f4ed2 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -55,6 +55,7 @@ q:before, q:after { content: none; } table { + width: 100%; border-collapse: separate; border-spacing:0; border:0 none; @@ -126,6 +127,16 @@ button{ font-family: 'Pretendard', sans-serif !important; } +// margin +.mt5{margin-top: 5px !important;} +.mt10{margin-top: 10px !important;} +.mb5{margin-bottom: 5px !important;} +.mb10{margin-bottom: 10px !important;} +.mr5{margin-right: 5px !important;} +.mr10{margin-right: 10px !important;} +.ml5{margin-left: 5px !important;} +.ml10{margin-left: 10px !important;} + // button .btn-frame{ display: inline-block; @@ -198,6 +209,30 @@ button{ } } +.btn-origin{ + display: inline-block; + height: 30px; + padding: 0 14px; + border-radius: 2px; + background-color: #101010; + color: #fff; + font-size: 13px; + font-weight: 400; + transition: all .15s ease-in-out; + &.navy{ + background-color: #304961; + &:hover{ + background-color: #1083E3; + } + } + &.grey{ + background-color: #94A0AD; + &:hover{ + background-color: #607F9A; + } + } +} + // select .sort-select{ position: relative; @@ -268,6 +303,31 @@ button{ } } +.select-light{ + position: relative; + display: block; + width: 100%; + height: 30px; + background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; + background-size: 10px 6px; + border: 1px solid #eee; + padding: 0 30px 0 10px; + font-size: 13px; + color: #45576F; + font-family: 'Noto Sans JP', sans-serif; + cursor: pointer; + &:disabled{ + opacity: 1; + background-color: #FAFAFA; + color: #999; + cursor: default; + } + &.black{ + color: #101010; + } +} + + // input .form-input{ label{ @@ -292,6 +352,7 @@ input[type=text]{ padding: 0 10px; letter-spacing: 0px; &::placeholder{ + opacity: 1; font-size: 12px; letter-spacing: 0px; } @@ -299,35 +360,28 @@ input[type=text]{ width: 100%; } } -} - -// date-picker -.single-date{ - input{ + &.input-light{ + display: block; + width: 100%; + height: 30px; + padding: 0 10px; + border: 1px solid #eee; border-radius: 2px; - color: #fff; - font-size: 12px; - font-family: 'Pretendard', sans-serif; - background-color: #313131; - } -} -.range-date{ - input{ - border-radius: 2px; - color: #fff; - font-size: 12px; - font-family: 'Pretendard', sans-serif; - background-color: #313131; - } - .react-datepicker__input-container{ - button{ - &:after{ - display: none; - } + background-color: #fff; + font-family: 'Noto Sans JP', sans-serif; + font-size: 13px; + color: #45576F; + font-weight: normal; + transition: border-color .17s ease-in-out; + &:read-only{ + background-color: #FAFAFA; + color: #999999; } } } + + // check-btn .check-btn{ display: flex; @@ -422,10 +476,12 @@ input[type=text]{ } } -// sort-main-radio -.d-check-radio { +// radio +.d-check-radio, +.d-check-box{ line-height: 1.1; cursor: pointer; + input[type=checkbox], input[type=radio]{ position: static; margin-left: 0; @@ -446,6 +502,16 @@ input[type=text]{ font-size: 13px; font-weight: 400; cursor: pointer; + } + &.light{ + label{ + color: #45576F; + } + } +} + +.d-check-radio { + label{ &::before{ cursor: pointer; content: ""; @@ -472,8 +538,8 @@ input[type=text]{ width: 9px; height: 9px; top:6px; - left: 4.8px; - margin-left: -.8rem; + left: 4px; + margin-left: -12px; border: none; border-radius: 100%; background-color: #fff; @@ -485,8 +551,87 @@ input[type=text]{ transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; } } + &.light{ + label{ + &:before{ + border-color: #D6D6D7; + } + &:after{ + background-color: #697C8F; + } + } + } input[type=radio]:checked + label::after{ opacity: 1; visibility: visible; } } + +// check-box +.d-check-box{ + label{ + &::before{ + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top: 2px; + left: 0; + margin-left: -12px; + border: 1px solid #D6D6D7; + background-color: transparent; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + } + &:after{ + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 16px; + height: 16px; + top:0; + left: 0; + margin-left: -.8rem; + transition: border 0.05s ease-in-out, color 0.05s ease-in-out; + } + } + input[type=checkbox]:checked + label::after{ + content: ""; + display: inline-block; + position: absolute; + top: 1px; + left: -1px; + width: 5px; + height: 8px; + border: 2px solid #697C8F; + border-left: none; + border-top: none; + transform: translate(7.75px,4.5px) rotate(45deg); + -ms-transform: translate(7.75px,4.5px) rotate(45deg); + } +} + +// date-picker +.date-picker{ + svg{display: none;} + .react-datepicker-wrapper{ + width: 100%; + } + input[type=text]{ + display: block; + width: 100%; + height: 30px; + padding: 0 34px 0 10px; + border-radius: 2px; + border: 1px solid #eee; + font-size: 13px; + color: #45576F; + font-weight: normal; + font-family: 'Noto Sans JP', sans-serif; + background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat; + background-size: 14px 15px; + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/styles/_table.scss b/src/styles/_table.scss new file mode 100644 index 0000000..b55fd03 --- /dev/null +++ b/src/styles/_table.scss @@ -0,0 +1,93 @@ +@mixin flexbox(){ + display: flex; + align-items: center; +} + +.common-table{ + table{ + border: 1px solid #ECF0F4; + border-radius: 3px; + border-collapse:collapse; + tbody{ + + th{ + font-size: 13px; + font-weight: 500; + color: #344356; + padding: 14px 12px; + border: 1px solid #ECF0F4 ; + background-color: #F7F9FA; + } + td{ + padding: 0px 9px; + border: 1px solid #ECF0F4 ; + .radio-wrap{ + @include flexbox; + } + .form-flex-wrap{ + @include flexbox; + gap: 15px; + } + .date-picker-wrap{ + @include flexbox; + span{ + margin: 0 4px; + } + } + } + } + } +} + +.infomation-table{ + table{ + border-top: 1px solid #DEE3EA; + border-bottom: 1px solid #DEE3EA; + border-collapse:collapse; + tbody{ + tr{ + th{ + font-size: 13px; + color: #344356; + font-weight: 500; + padding: 18px 0; + border-bottom: 1px solid #F4F4F7; + .title{ + margin-right: 8px; + } + } + td{ + padding: 0 0 0 15px; + border-bottom: 1px solid #F4F4F7; + + .guide{ + font-size: 13px; + color: #697C8F; + font-weight: normal; + margin-left: 15px; + } + span{ + font-size: 13px; + color: #697C8F; + font-weight: normal; + } + } + &:last-child{ + th,td{border-bottom: none;} + } + } + } + .flx-box{ + @include flexbox; + } + } + .tooltips{ + display: block; + width: 14px; + height: 14px; + display: inline-block; + background: url(../../public/static/images/sub/tooltips.svg)no-repeat center; + background-size: cover; + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/styles/contents.scss b/src/styles/contents.scss index 90dfa53..3e82124 100644 --- a/src/styles/contents.scss +++ b/src/styles/contents.scss @@ -1,2 +1,3 @@ @import '_contents.scss'; -@import '_modal.scss'; \ No newline at end of file +@import '_modal.scss'; +@import '_table.scss'; \ No newline at end of file