From 22908e241ae3da2f7aa9ff3c0fadd1d55be619af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Fri, 11 Oct 2024 15:36:27 +0900 Subject: [PATCH] =?UTF-8?q?canvas=20frame=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/sub/attachment_ico.svg | 11 + public/static/images/sub/click_check_ico.svg | 4 + public/static/images/sub/minus_btn.svg | 6 + public/static/images/sub/plus_btn.svg | 5 + src/components/canvas/CanvasEstimate.jsx | 207 +++++++++++++++++- .../canvas/estimatepop/ProductFeaturesPop.jsx | 38 ++++ src/styles/_contents.scss | 194 +++++++++++++++- src/styles/_reset.scss | 7 +- 8 files changed, 465 insertions(+), 7 deletions(-) create mode 100644 public/static/images/sub/attachment_ico.svg create mode 100644 public/static/images/sub/click_check_ico.svg create mode 100644 public/static/images/sub/minus_btn.svg create mode 100644 public/static/images/sub/plus_btn.svg create mode 100644 src/components/canvas/estimatepop/ProductFeaturesPop.jsx diff --git a/public/static/images/sub/attachment_ico.svg b/public/static/images/sub/attachment_ico.svg new file mode 100644 index 0000000..7e622a4 --- /dev/null +++ b/public/static/images/sub/attachment_ico.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/static/images/sub/click_check_ico.svg b/public/static/images/sub/click_check_ico.svg new file mode 100644 index 0000000..4fc2dae --- /dev/null +++ b/public/static/images/sub/click_check_ico.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/sub/minus_btn.svg b/public/static/images/sub/minus_btn.svg new file mode 100644 index 0000000..e31ddaf --- /dev/null +++ b/public/static/images/sub/minus_btn.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/sub/plus_btn.svg b/public/static/images/sub/plus_btn.svg new file mode 100644 index 0000000..7f17a1f --- /dev/null +++ b/public/static/images/sub/plus_btn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/canvas/CanvasEstimate.jsx b/src/components/canvas/CanvasEstimate.jsx index c8de7a0..2fd2104 100644 --- a/src/components/canvas/CanvasEstimate.jsx +++ b/src/components/canvas/CanvasEstimate.jsx @@ -1,5 +1,6 @@ import SingleDatePicker from "../common/datepicker/SingleDatePicker"; import Footer from "../layout/Footer"; +import ProductFeaturesPop from "./estimatepop/ProductFeaturesPop"; export default function CanvasEstimate() { return( @@ -7,7 +8,7 @@ export default function CanvasEstimate() {
-
+
品番
RX524231020006 (Plan No: 1)
@@ -153,8 +154,8 @@ export default function CanvasEstimate() {

ファイル添付

- - + +
@@ -185,7 +186,7 @@ export default function CanvasEstimate() {
-
+
@@ -206,10 +207,208 @@ export default function CanvasEstimate() {
+
+
+

見積もりの具体的な

+
製品情報
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
ダイドハント (D Y 4)(DY5)
+
・木製垂木の場合、幅38㎜×厚さ40㎜以上、間隔455㎜以下となります。  
+
・本見積は概算見積です。詳細設計時、及び構造計算時に材料等の変更の可能性があります。 
+
・金具が取付可能と仮定して積算しております。ご注文前に必ず現調シートをご提出頂けます様、お願い致します。  
+
・設置基準を満たした屋根面と仮定して積算しております。屋根材固定強度等、施工マニュアルをご参照の上、ご確認ください。
+
+
+
ワンカチ 
+
・風速は46ｍ/sを超える地域は設置不可となります。  
+
・屋根材質は鋼板製（JIS A6514規格品の内）として御見積もり作成しております。  
+
・屋根材板厚は0.6㎜以上として御見積もり作成しております。
+
ピッチ外 ・若し現場で太陽電池モジュール 固定範囲から 両端の金具 がはみ出た 場合は、
+
弊社システム保証対象外になりますので充分 ご注意下さい 。"
+
+
+
+
+

製品情報

+
+
+
+
+
+
数量 (PCS)
+
74
+
+
+
容量 (Kw)
+
8300
+
+
+
供給価格
+
6,798,900
+
+
+
税 (10％)
+
679,890
+
+
+
総額
+
7,478,790
+
+
+
+
+ + + + + + + + + + + + + + + + + + + +
住宅PKG単価 (W)* +
+ +
+ 		PKG容量(Kw) + (モジュール容量×数量)÷1000 + PKG金額 + PKG単価 (W)×PKG容量(W) +
+
+
+
+
価格表示
+
+ +
+ +
+
+
+
添付必須
+
クリックして製品の特異性を確認する
+
+
+ + +
+
+
+ + {/* 제품 특이사항 */} +
) } \ No newline at end of file diff --git a/src/components/canvas/estimatepop/ProductFeaturesPop.jsx b/src/components/canvas/estimatepop/ProductFeaturesPop.jsx new file mode 100644 index 0000000..62d5d24 --- /dev/null +++ b/src/components/canvas/estimatepop/ProductFeaturesPop.jsx @@ -0,0 +1,38 @@ +export default function ProductFeaturesPop(){ + return( +
+
+
+
+

設計依頼のインポート

+ +
+
+
+
+
+
ダイドハント (D Y 4)(DY5)
+
・木製垂木の場合、幅38㎜×厚さ40㎜以上、間隔455㎜以下となります。  
+
・本見積は概算見積です。詳細設計時、及び構造計算時に材料等の変更の可能性があります。 
+
・金具が取付可能と仮定して積算しております。ご注文前に必ず現調シートをご提出頂けます様、お願い致します。  
+
・設置基準を満たした屋根面と仮定して積算しております。屋根材固定強度等、施工マニュアルをご参照の上、ご確認ください。
+
+
+
ワンカチ 
+
・風速は46ｍ/sを超える地域は設置不可となります。  
+
・屋根材質は鋼板製（JIS A6514規格品の内）として御見積もり作成しております。  
+
・屋根材板厚は0.6㎜以上として御見積もり作成しております。
+
ピッチ外 ・若し現場で太陽電池モジュール 固定範囲から 両端の金具 がはみ出た 場合は、
+
弊社システム保証対象外になりますので充分 ご注意下さい 。"
+
+
+
+
+ +
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 271ebc2..07e7d70 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -390,8 +390,8 @@ top: 0; left: 50%; transform: translateX(-50%); - width: 1600px; - height: 1000px; + width: 100%; + height: 100%; } } @@ -543,6 +543,26 @@ color: #101010; font-weight: 600; margin-right: 14px; + &.product{ + margin-right: 10px; + } + } + .product_tit{ + position: relative; + font-size: 15px; + font-weight: 600; + color: #1083E3; + padding-left: 10px; + &::before{ + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 1px; + height: 11px; + background-color: #D9D9D9; + } } .option{ padding-left: 5px; @@ -651,6 +671,13 @@ display: flex; align-items: center; margin-bottom: 10px; + &.one{ + .estimate-box{ + &:last-child{ + min-width: unset; + } + } + } .estimate-box{ flex: 1 ; display: flex; @@ -675,6 +702,16 @@ color: #344356; margin-left: 14px; font-weight: 400; + &.blue{ + font-size: 16px; + font-weight: 700; + color: #1083E3; + } + &.red{ + font-size: 16px; + font-weight: 700; + color: #D72A2A; + } } } &:last-child{ @@ -731,6 +768,159 @@ } } +.special-note-check-wrap{ + display: grid; + grid-template-columns: repeat(5, 1fr); + border: 1px solid #ECF0F4; + border-radius: 3px; + margin-bottom: 30px; + .special-note-check-item{ + padding: 14px 10px; + border-right: 1px solid #ECF0F4; + border-top: 1px solid #ECF0F4; + &:nth-child(5n){ + border-right: none; + } + &:nth-child(-n+5){ + border-top: none; + } + &.act{ + background-color: #F7F9FA; + } + } +} + +.calculation-estimate{ + border: 1px solid #ECF0F4; + border-radius: 3px; + padding: 24px; + max-height: 350px; + overflow-y: auto; + margin-bottom: 30px; + dl{ + margin-bottom: 35px; + &:last-child{ + margin-bottom: 0; + } + dt{ + font-size: 13px; + font-weight: 600; + color: #1083E3; + margin-bottom: 15px; + } + dd{ + font-size: 12px; + font-weight: 400; + color: #45576F; + margin-bottom: 5px; + } + } + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #d9dee2; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} +.esimate-wrap{ + margin-bottom: 20px; +} + +.estimate-product-option{ + display: flex; + align-items: center; + margin-bottom: 15px; + .product-price-wrap{ + display: flex; + align-items: center; + .product-price-tit{ + font-size: 13px; + font-weight: 400; + color: #45576F; + margin-right: 10px; + } + .select-wrap{ + width: 110px; + } + } + .product-edit-wrap{ + display: flex; + align-items: center; + margin-left: auto; + .product-edit-explane{ + display: flex; + align-items: center; + margin-right: 15px; + .attachment-required{ + position: relative; + display: flex; + align-items: center; + font-size: 12px; + font-weight: 400; + color: #45576F; + padding-right: 10px; + .ico{ + width: 23px; + height: 23px; + margin-right: 5px; + background: url(../../public/static/images/sub/attachment_ico.svg)no-repeat center; + background-size: cover; + } + &::before{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 12px; + background-color: #D9D9D9; + } + } + .click-check{ + display: flex; + align-items: center; + font-size: 12px; + font-weight: 400; + color: #F16A6A ; + padding-left: 10px; + .ico{ + width: 14px; + height: 14px; + margin-right: 5px; + background: url(../../public/static/images/sub/click_check_ico.svg)no-repeat center; + background-size: cover; + } + } + } + .product-edit-btn{ + display: flex; + align-items: center; + button{ + display: flex; + align-items: center; + span{ + width: 13px; + height: 13px; + margin-right: 5px; + background-size: cover; + &.plus{ + background: url(../../public/static/images/sub/plus_btn.svg)no-repeat center; + } + &.minus{ + background: url(../../public/static/images/sub/minus_btn.svg)no-repeat center; + } + } + } + } + } + +} + // 발전시물레이션 .chart-wrap{ display: flex; diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 70c05a9..b575113 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -712,7 +712,7 @@ input[type=text]{ left: 0; margin-left: -12px; border: 1px solid #D6D6D7; - background-color: transparent; + background-color: #fff; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } &:after{ @@ -743,6 +743,11 @@ input[type=text]{ -ms-transform: translate(7.75px,4.5px) rotate(45deg); } &.pop{ + label{ + &:before{ + background-color: transparent; + } + } input[type=checkbox]:checked + label::after{ border-color: #fff; }