From 71e753e019d32d23c10b8dedfc4cca3ccb35be93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Tue, 24 Sep 2024 16:33:17 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=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/sub/file_delete.svg | 5 + src/app/canvas/page.jsx | 2 +- src/components/canvas/CanvasEstimate.jsx | 212 +++++++++++++++++- src/components/publishpage/PublishPage.jsx | 8 +- .../productstate/PropertyStatus.jsx | 2 +- src/styles/_contents.scss | 95 +++++++- src/styles/_table.scss | 16 +- 7 files changed, 328 insertions(+), 12 deletions(-) create mode 100644 public/static/images/sub/file_delete.svg diff --git a/public/static/images/sub/file_delete.svg b/public/static/images/sub/file_delete.svg new file mode 100644 index 0000000..721bcc0 --- /dev/null +++ b/public/static/images/sub/file_delete.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index a5159d0..531d88c 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -20,7 +20,7 @@ export default function CanvasPage() {
-
+
diff --git a/src/components/canvas/CanvasEstimate.jsx b/src/components/canvas/CanvasEstimate.jsx index a22d401..c8de7a0 100644 --- a/src/components/canvas/CanvasEstimate.jsx +++ b/src/components/canvas/CanvasEstimate.jsx @@ -1,5 +1,215 @@ +import SingleDatePicker from "../common/datepicker/SingleDatePicker"; +import Footer from "../layout/Footer"; + export default function CanvasEstimate() { return( - <> +
+
+
+
+
+
+
品番
+
RX524231020006 (Plan No: 1)
+
+
+
見積書番号
+
5242310200065242
+
+
+
登録日
+
2024.09.28
+
+
+
変更日時
+
2024.09.28 06:36
+
+
+
+
+
+
+
+
+

基本情報

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
一次販売店名 + 鈴与商事株式会社 + 見積日 * +
+ +
+
二次販売店名 + 2次店販売店名表示 + 担当者 * +
+ +
+
案件名 * +
+
+ +
+
+ +
+
+
メモ + 商品情報から入力したメモを表示 +
注文分類  * +
+
+ + +
+
+ + +
+
+
屋根材・仕様施工  +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
備考 +
+ +
+
+
+
+
+

ファイル添付

+
+ + +
+
+
+
+ + + + + + + + + + + +
ファイル添付 +
+
+ +
+
+

Drag file here

+
    +
  • 選択したファイル名
    • +
  • 選択したファイル名
    • +
+
+
+
+
+
+ + + + + + + + + + + +
添付ファイル一覧 +
+
    +
  • 保存した添付ファイル名
    • +
  • 保存した添付ファイル名
    • +
+
+
+
+
+
+
+
+
) } \ No newline at end of file diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx index e88d2d5..7e6b285 100644 --- a/src/components/publishpage/PublishPage.jsx +++ b/src/components/publishpage/PublishPage.jsx @@ -80,8 +80,10 @@ export default function PublishPage() { CanvasPage CanvasPage - - 2024-09-06 + + 견적서 6번째 탭 클릭시 나옴 + + 2024-09-24 MainPage @@ -102,7 +104,7 @@ export default function PublishPage() { 물건현황 - 2024-09-12 + 2024-09-24 diff --git a/src/components/sub/management/productstate/PropertyStatus.jsx b/src/components/sub/management/productstate/PropertyStatus.jsx index 6b10bb5..1b2b6d1 100644 --- a/src/components/sub/management/productstate/PropertyStatus.jsx +++ b/src/components/sub/management/productstate/PropertyStatus.jsx @@ -76,7 +76,7 @@ export default function PropertyStatus(){ 期間検索
-
+
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index ad9e3f3..9bd1b5b 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -9,6 +9,12 @@ height: 100%; } } + &.sub-wrap{ + overflow: hidden; + .canvas-content{ + height: calc(100% - 47px); + } + } } // CanvasMenu .canvas-menu-wrap{ @@ -497,7 +503,7 @@ .sub-content-inner{ max-width: 1720px; margin: 0 auto; - padding-top: 24px; + padding-top: 20px; .sub-content-box{ margin-bottom: 20px; &:last-child{ @@ -505,6 +511,11 @@ } } } + &.estimate{ + height: calc(100% - 36.5px); + overflow-y: auto; + padding-top: 0; + } } .sub-table-box{ padding: 20px; @@ -515,7 +526,7 @@ .table-box-title-wrap{ display: flex; align-items: center; - margin-bottom: 10px; + margin-bottom: 15px; .title-wrap{ display: flex; align-items: center; @@ -610,4 +621,84 @@ background-size: cover; } } +} + +// 견적서 +.estimate-list-wrap{ + display: flex; + align-items: center; + .estimate-box{ + flex: 1 1 auto; + display: flex; + align-items: center; + &:last-child{ + flex: none; + } + .estimate-tit{ + width: 105px; + height: 30px; + line-height: 30px; + background-color: #F4F4F7; + border-radius: 100px; + text-align: center; + font-size: 13px; + font-weight: 500; + color: #344356; + } + .estimate-name{ + font-size: 13px; + color: #344356; + margin-left: 14px; + font-weight: 400; + } + } +} + +// file drag box +.drag-file-box{ + padding: 10px; + .btn-area{ + padding-bottom: 15px; + border-bottom: 1px solid #ECF0F4; + } + .drag-file-area{ + position: relative; + margin-top: 15px; + p{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 13px; + color: #ccc; + font-weight: 400; + cursor: default; + } + } + .file-list{ + .file-item{ + margin-bottom: 15px; + span{ + position: relative; + font-size: 13px; + color: #45576F; + font-weight: 400; + white-space: nowrap; + padding-right: 55px; + button{ + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 15px; + height: 15px; + background: url(../../public/static/images/sub/file_delete.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + margin-bottom: 0; + } + } + } } \ No newline at end of file diff --git a/src/styles/_table.scss b/src/styles/_table.scss index 1c9a0bd..b812e59 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -5,11 +5,11 @@ .common-table{ table{ + table-layout: fixed; border: 1px solid #ECF0F4; border-radius: 3px; border-collapse:collapse; tbody{ - th{ font-size: 13px; font-weight: 500; @@ -17,17 +17,21 @@ padding: 14px 12px; border: 1px solid #ECF0F4 ; background-color: #F7F9FA; + vertical-align: middle; } td{ - padding: 0px 9px; + padding: 9px; border: 1px solid #ECF0F4 ; + font-size: 13px; + font-weight: 400; + color: #45576F; + vertical-align: middle; .radio-wrap{ flex: none; @include flexbox; } .form-flex-wrap{ @include flexbox; - gap: 15px; } .date-picker-wrap{ width: 100%; @@ -39,6 +43,9 @@ } } } + &.bt-able{ + margin-bottom: 30px; + } } .infomation-table{ @@ -92,4 +99,5 @@ background-size: cover; cursor: pointer; } -} \ No newline at end of file +} +