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