main page 추가
This commit is contained in:
parent
a182b0fbfa
commit
7b1f36293e
6
public/static/images/main/clock.svg
Normal file
6
public/static/images/main/clock.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<circle id="Ellipse 1116" cx="8" cy="8" r="7" stroke="#999999"/>
|
||||
<path id="Path" d="M8 5.19995V7.99995L9.4 9.39995" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 327 B |
6
public/static/images/main/download.svg
Normal file
6
public/static/images/main/download.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector 4232" d="M1 9.77783L1.20786 10.3668C2.01689 12.659 2.4214 13.8051 3.34437 14.4582C4.26734 15.1112 5.48275 15.1112 7.91357 15.1112H10.0864C12.5173 15.1112 13.7327 15.1112 14.6556 14.4582C15.5786 13.8051 15.9831 12.659 16.7921 10.3668L17 9.77783" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M9.00006 9.77781V0.888916M9.00006 9.77781C8.37763 9.77781 7.21475 8.0051 6.77783 7.55559M9.00006 9.77781C9.62248 9.77781 10.7854 8.0051 11.2223 7.55559" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 704 B |
8
public/static/images/main/id_icon.svg
Normal file
8
public/static/images/main/id_icon.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Rectangle 2176" d="M9.97059 21C5.97751 21 3.98098 21 2.74049 19.8284C1.5 18.6569 1.5 16.7712 1.5 13L1.5 9C1.5 5.22876 1.5 3.34315 2.74049 2.17157C3.98098 1 5.97752 1 9.97059 1L11.0294 1C15.0225 1 17.019 1 18.2595 2.17157C19.5 3.34315 19.5 5.22876 19.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector 4435" d="M6.5 6H14.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector 4436" d="M6.5 11H12.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M13.5 21C15.3385 18.2518 19.6188 18.1018 21.5 21M19.5 13.9287C19.5 14.9939 18.6046 15.8574 17.5 15.8574C16.3954 15.8574 15.5 14.9939 15.5 13.9287C15.5 12.8635 16.3954 12 17.5 12C18.6046 12 19.5 12.8635 19.5 13.9287Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 944 B |
6
public/static/images/main/mail.svg
Normal file
6
public/static/images/main/mail.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M1.01419 10.2781C1.07303 13.0371 1.10245 14.4166 2.12046 15.4385C3.13848 16.4604 4.5553 16.496 7.38895 16.5671C9.13538 16.611 10.8646 16.611 12.6111 16.5671C15.4447 16.496 16.8615 16.4604 17.8795 15.4385C18.8976 14.4166 18.927 13.0371 18.9858 10.2781C19.0047 9.39099 19.0047 8.50912 18.9858 7.622C18.927 4.86302 18.8976 3.48353 17.8795 2.46165C16.8615 1.43976 15.4447 1.40416 12.6111 1.33296C10.8646 1.28908 9.13538 1.28908 7.38894 1.33295C4.5553 1.40415 3.13847 1.43974 2.12046 2.46163C1.10244 3.48352 1.07302 4.86301 1.01419 7.62199C0.99527 8.50911 0.995271 9.39099 1.01419 10.2781Z" fill="white" stroke="#141B34" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M5.5 5.80005L8.14781 7.36554C9.6915 8.27822 10.3085 8.27822 11.8522 7.36554L14.5 5.80005" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1006 B |
11
public/static/images/main/main_search.svg
Normal file
11
public/static/images/main/main_search.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="element" clip-path="url(#clip0_2005_940)">
|
||||
<path id="패스 171" d="M17.8789 17.9735L19.8789 19.9735" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector" d="M9.98901 18.4039C14.6834 18.4039 18.489 14.5989 18.489 9.90519C18.489 5.21149 14.6834 1.40649 9.98901 1.40649C5.29459 1.40649 1.48901 5.21149 1.48901 9.90519C1.48901 14.5989 5.29459 18.4039 9.98901 18.4039Z" stroke="white" stroke-width="1.5"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2005_940">
|
||||
<rect width="21" height="21" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 673 B |
5
public/static/images/main/more_btn.svg
Normal file
5
public/static/images/main/more_btn.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#101010"/>
|
||||
<path d="M10 7V13" stroke="#101010" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M7 10H13" stroke="#101010" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 332 B |
8
public/static/images/main/product_ico01.svg
Normal file
8
public/static/images/main/product_ico01.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Ellipse 42" d="M21 4.5C21 6.433 19.433 8 17.5 8C15.567 8 14 6.433 14 4.5C14 2.567 15.567 1 17.5 1C19.433 1 21 2.567 21 4.5Z" stroke="white" stroke-width="1.5"/>
|
||||
<path id="Ellipse 41" d="M20.9506 10C20.9833 10.3289 21 10.6625 21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C11.3375 1 11.6711 1.01672 12 1.04938" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector 4052" d="M7 9H11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector 4053" d="M7 14H15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 780 B |
6
public/static/images/main/product_ico02.svg
Normal file
6
public/static/images/main/product_ico02.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M7 12.5H15M7 7.5H11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M5.09881 18C3.7987 17.8721 2.82475 17.4816 2.17157 16.8284C1 15.6569 1 13.7712 1 10V9.5C1 5.72876 1 3.84315 2.17157 2.67157C3.34315 1.5 5.22876 1.5 9 1.5H13C16.7712 1.5 18.6569 1.5 19.8284 2.67157C21 3.84315 21 5.72876 21 9.5V10C21 13.7712 21 15.6569 19.8284 16.8284C18.6569 18 16.7712 18 13 18C12.4395 18.0125 11.9931 18.0551 11.5546 18.155C10.3562 18.4309 9.24652 19.0441 8.14987 19.5789C6.58729 20.3408 5.806 20.7218 5.31569 20.3651C4.37769 19.6665 5.29454 17.5019 5.5 16.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 811 B |
7
public/static/images/main/product_ico03.svg
Normal file
7
public/static/images/main/product_ico03.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M21 10.5667C21 15.8499 16.5222 20.1334 11 20.1334C10.3507 20.1343 9.70324 20.0742 9.06542 19.9545C8.60633 19.8682 8.37678 19.8251 8.21653 19.8496C8.05627 19.8741 7.82918 19.9948 7.37499 20.2364C6.09014 20.9197 4.59195 21.161 3.15111 20.893C3.69874 20.2194 4.07275 19.4112 4.23778 18.5448C4.33778 18.0148 4.09 17.5 3.71889 17.1231C2.03333 15.4115 1 13.1051 1 10.5667C1 5.28357 5.47778 1 11 1C16.5222 1 21 5.28357 21 10.5667Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path id="Ellipse 583" d="M9 8.84615C9 7.82655 9.89543 7 11 7C12.1046 7 13 7.82655 13 8.84615C13 9.21368 12.8837 9.55612 12.6831 9.84381C12.0854 10.7012 11 11.5189 11 12.5385V13" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Vector_2" d="M11 15.5H11.009" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 993 B |
6
public/static/images/main/product_ico04.svg
Normal file
6
public/static/images/main/product_ico04.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M16.4776 7.01106C16.485 7.01102 16.4925 7.01101 16.5 7.01101C18.9853 7.01101 21 9.02942 21 11.5193C21 13.8398 19.25 15.7508 17 16M16.4776 7.01106C16.4924 6.84606 16.5 6.67896 16.5 6.51009C16.5 3.46695 14.0376 1 11 1C8.12324 1 5.76233 3.21267 5.52042 6.03192M16.4776 7.01106C16.3753 8.14759 15.9286 9.1846 15.2428 10.0165M5.52042 6.03192C2.98398 6.27373 1 8.41392 1 11.0183C1 13.4417 2.71776 15.4632 5 15.9273M5.52042 6.03192C5.67826 6.01687 5.83823 6.00917 6 6.00917C7.12582 6.00917 8.16474 6.38194 9.00049 7.01101" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M11 19L11 11M11 19C10.2998 19 8.99153 17.0057 8.5 16.5M11 19C11.7002 19 13.0085 17.0057 13.5 16.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 951 B |
7
public/static/images/main/product_ico05.svg
Normal file
7
public/static/images/main/product_ico05.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Vector" d="M21 10.5005C21 10.0092 20.9947 9.01772 20.9842 8.52488C20.9189 5.45935 20.8862 3.92658 19.7551 2.79115C18.6239 1.65572 17.0497 1.61617 13.9012 1.53706C11.9607 1.4883 10.0393 1.4883 8.09882 1.53705C4.95033 1.61615 3.37608 1.6557 2.24495 2.79114C1.11382 3.92657 1.08114 5.45933 1.01576 8.52487C0.994745 9.51055 0.994745 10.4904 1.01577 11.4761C1.08114 14.5416 1.11383 16.0744 2.24496 17.2098C3.37608 18.3453 4.95033 18.3848 8.09883 18.4639C8.90159 18.4841 9.70108 18.4959 10.5 18.4994" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector 7163" d="M1 4.00049L7.91302 7.92511C10.4387 9.35895 11.5613 9.35895 14.087 7.92511L21 4.00049" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path id="Vector_2" d="M13 15.5005L21 15.5005M13 15.5005C13 14.8003 14.9943 13.492 15.5 13.0005M13 15.5005C13 16.2007 14.9943 17.509 15.5 18.0005" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
3
public/static/images/main/store-arr.svg
Normal file
3
public/static/images/main/store-arr.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector 4054" d="M1.5 1L5.5 5L1.5 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 228 B |
11
public/static/images/main/user.svg
Normal file
11
public/static/images/main/user.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<circle id="Ellipse 1536" cx="10" cy="10.6499" r="9" fill="white"/>
|
||||
<path id="Ellipse 1533" d="M10.9 19.6055C10.604 19.6349 10.3037 19.6499 10 19.6499C5.02944 19.6499 1 15.6205 1 10.6499C1 5.67934 5.02944 1.6499 10 1.6499C14.9706 1.6499 19 5.67934 19 10.6499C19 10.9537 18.985 11.2539 18.9556 11.5499" stroke="#141B34" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<g id="Vector">
|
||||
<path d="M12.2455 8.3999C12.2455 9.64254 11.2367 10.6499 9.99233 10.6499C8.74792 10.6499 7.73912 9.64254 7.73912 8.3999C7.73912 7.15726 8.74792 6.1499 9.99233 6.1499C11.2367 6.1499 12.2455 7.15726 12.2455 8.3999Z" fill="white"/>
|
||||
<path d="M5.94995 15.1499C7.21217 13.8279 9.11902 13.2636 10.9 13.5246M12.2455 8.3999C12.2455 9.64254 11.2367 10.6499 9.99233 10.6499C8.74792 10.6499 7.73912 9.64254 7.73912 8.3999C7.73912 7.15726 8.74792 6.1499 9.99233 6.1499C11.2367 6.1499 12.2455 7.15726 12.2455 8.3999Z" stroke="#141B34" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<circle id="Vector_2" cx="15.85" cy="16.4999" r="3.15" fill="white" stroke="#141B34" stroke-width="1.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -4,7 +4,7 @@ import CanvasLayout from '@/components/canvas/CanvasLayout'
|
||||
import CanvasMenu from '@/components/canvas/CanvasMenu'
|
||||
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
|
||||
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
|
||||
import Header from '@/components/header/Header'
|
||||
import Header from '@/components/layout/Header'
|
||||
import { modalState } from '@/store/modalAtom'
|
||||
import '@/styles/contents.scss'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
|
||||
@ -81,6 +81,19 @@ export default function InputWrapPage (){
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-wrap">
|
||||
<h1>main-radio</h1>
|
||||
<div className="form-main-radio">
|
||||
<div className="d-check-radio">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">物件番号</label>
|
||||
</div>
|
||||
<div className="d-check-radio">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">物件番号</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,6 @@
|
||||
import Header from "@/components/header/Header";
|
||||
import Footer from "@/components/layout/Footer";
|
||||
import Header from "@/components/layout/Header";
|
||||
import MainContents from "@/components/main/MainContents";
|
||||
import '@/styles/style.scss'
|
||||
|
||||
export default function MainPage() {
|
||||
@ -6,8 +8,35 @@ export default function MainPage() {
|
||||
<div className="wrap">
|
||||
<Header/>
|
||||
<div className="content">
|
||||
|
||||
<div className="background-bord"></div>
|
||||
<div className="main-contents">
|
||||
<div className="store-id-wrap">
|
||||
<div className="store-id-box">
|
||||
<div className="store-id-title">販売店ID / 販売店名</div>
|
||||
</div>
|
||||
<span className="store-arr"></span>
|
||||
<div className="store-id-name">ナカザワ建販株式会社（その他 )</div>
|
||||
</div>
|
||||
<div className="main-search-wrap">
|
||||
<div className="search-raido-wrap">
|
||||
<div className="d-check-radio">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">物件番号</label>
|
||||
</div>
|
||||
<div className="d-check-radio">
|
||||
<input type="radio" name="radio01" id="ra02" />
|
||||
<label htmlFor="ra02">FAQ</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="search-input-box">
|
||||
<input type="text" className="main-search" placeholder="検索語を入力してください"/>
|
||||
<button className="search-icon"></button>
|
||||
</div>
|
||||
</div>
|
||||
<MainContents/>
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import { useRecoilState } from "recoil";
|
||||
import { ToggleonMouse } from "../header/Header"
|
||||
import { ToggleonMouse } from "../layout/Header"
|
||||
import { modalState } from "@/store/modalAtom";
|
||||
|
||||
export default function MenuDepth01(){
|
||||
|
||||
9
src/components/layout/Footer.jsx
Normal file
9
src/components/layout/Footer.jsx
Normal file
@ -0,0 +1,9 @@
|
||||
export default function Footer() {
|
||||
return(
|
||||
<footer>
|
||||
<div className="footer-inner">
|
||||
<span>COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</span>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
95
src/components/main/MainContents.jsx
Normal file
95
src/components/main/MainContents.jsx
Normal file
@ -0,0 +1,95 @@
|
||||
import Image from "next/image";
|
||||
import ProductItem from "./ProductItem";
|
||||
|
||||
export default function MainContents() {
|
||||
return(
|
||||
<div className="main-product-list-wrap">
|
||||
<div className="main-product-list">
|
||||
<ProductItem num={1} name={'最近の更新物件一覧'}>
|
||||
<ul className="recently-list">
|
||||
{Array.from({length : 3}).map((_, idx) => (
|
||||
<li key={idx} className="recently-item">
|
||||
<div className="item-inner">
|
||||
<span className="time">2024.07.29 10:00:10</span>
|
||||
<span>R3305X167240611004</span>
|
||||
<span>新津 佑季</span>
|
||||
<span>HITエンジニアリング株式会社</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ProductItem>
|
||||
<ProductItem num={2} name={'お知らせ'}>
|
||||
<div className="notice-box">
|
||||
<div className="notice-day pre">2024.07.19</div>
|
||||
<div className="notice-title">[不具合のご連] 納品先リスト表示不具合と不具合復 旧のお知らせ</div>
|
||||
<div className="notice-contents">
|
||||
<span>
|
||||
Q.TRON S-G2.4+ 285ならびにQ.PEAK DUO S-G11S 275と
|
||||
屋根技術研究所 支持金具/YGアンカー/スレート・板金金具の組み
|
||||
合わせをしたときに 縦桟が拾い出されなかった不具合の修正
|
||||
</span>
|
||||
<span>
|
||||
QREADYシリーズを見積りした際、書類一式【配置図】タブの
|
||||
『パワーコンディショナ型式』欄にPCS型番が表示されるよう
|
||||
に変更
|
||||
</span>
|
||||
<span>
|
||||
QREADYシリーズを見積りした際、書類一式【配置図】タブの
|
||||
『パワーコンディショナ型式』欄にPCS型番が表示されるよう
|
||||
に変更
|
||||
QREADYシリーズを見積りした際、書類一式【配置図】タブの
|
||||
『パワーコンディショナ型式』欄にPCS型番が表示されるよう
|
||||
に変更
|
||||
QREADYシリーズを見積りした際、書類一式【配置図】タブの
|
||||
『パワーコンディショナ型式』欄にPCS型番が表示されるよう
|
||||
に変更
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ProductItem>
|
||||
</div>
|
||||
<div className="main-product-list">
|
||||
<ProductItem num={3} name={'FAQ'}>
|
||||
<ul className="faq-list">
|
||||
{Array.from({length : 3}).map((_, idx) => (
|
||||
<li key={idx} className="faq-item">
|
||||
<div className="faq-item-inner">
|
||||
<div className="faq-num pre">FAQ 26</div>
|
||||
<div className="faq-title pre">型番での商品検索機能追加のお知らせ型番での商品検索機能追加のお知らせ型番での商品検索機能追加のお知らせ</div>
|
||||
<div className="faq-day pre">2024.07.19</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ProductItem>
|
||||
<ProductItem num={4} name={'Data Download'}>
|
||||
<div className="data-download-wrap">
|
||||
<button className="data-down">
|
||||
<span>操作マニュアル</span>
|
||||
</button>
|
||||
<button className="data-down">
|
||||
<span>屋根の説明書</span>
|
||||
</button>
|
||||
</div>
|
||||
</ProductItem>
|
||||
<ProductItem num={5} name={'Sales Contact info'}>
|
||||
<ul className="contact-info-list">
|
||||
<li className="info-item">
|
||||
<div className="icon-box">
|
||||
<Image src="/static/images/main/user.svg" alt="react" width={20} height={20} />
|
||||
</div>
|
||||
<div className="infor-data">山本功希</div>
|
||||
</li>
|
||||
<li className="info-item">
|
||||
<div className="icon-box">
|
||||
<Image src="/static/images/main/mail.svg" alt="react" width={20} height={20} />
|
||||
</div>
|
||||
<div className="infor-data pre">yamamoto.k1@qcells.com</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ProductItem>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
src/components/main/ProductItem.jsx
Normal file
16
src/components/main/ProductItem.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
export default function ProductItem({num, name, children}){
|
||||
return(
|
||||
<div className={`product-item item0${num}`}>
|
||||
<div className="product-item-title-wrap">
|
||||
<h2 className="product-item-title">
|
||||
<span className={`item-logo ico0${num}`}></span>
|
||||
{name}
|
||||
</h2>
|
||||
<button className="more-btn"></button>
|
||||
</div>
|
||||
<div className="product-item-content">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -23,6 +23,7 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.form-main-radio,
|
||||
.form-Arrow-btn,
|
||||
.form-Check-btn{
|
||||
padding: 10px;
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.content{
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
padding-top: 46px;
|
||||
background-color: #F4F4F7;
|
||||
@ -216,3 +215,19 @@ header{
|
||||
}
|
||||
}
|
||||
|
||||
// footer
|
||||
footer{
|
||||
width: 100%;
|
||||
background-color: #F4F4F7;
|
||||
.footer-inner{
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 45px 0;
|
||||
span{
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #CFCFCF;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,356 @@
|
||||
// background img
|
||||
.background-bord{
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
background: url(../../public/static/images/main/main_background.png)no-repeat center;
|
||||
background-size: cover;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// main-wrap
|
||||
.main-contents{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
// contents
|
||||
.store-id-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 33.5px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
.store-id-title{
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
.store-arr{
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
|
||||
}
|
||||
.store-id-name{
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// main-search-form
|
||||
.main-search-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 45px 0;
|
||||
.search-raido-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
.search-input-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 580px;
|
||||
height: 45px;
|
||||
border-radius: 100px;
|
||||
padding: 0 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.30);
|
||||
background: rgba(31, 31, 31, 0.30);
|
||||
.main-search{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.search-icon{
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
background-image: url(../../public/static/images/main/main_search.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 21px 21px;
|
||||
}
|
||||
}
|
||||
|
||||
// main-contents-inner
|
||||
.main-product-list-wrap{
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
.main-product-list{
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
.product-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40px;
|
||||
border-radius: 6px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
|
||||
&.item01{flex: 1; max-height: 400px;}
|
||||
&.item02{flex: none; width: 451px; max-height: 400px;}
|
||||
&.item03{flex: 1;}
|
||||
&.item04{flex: none; width: 351px;}
|
||||
&.item05{flex: none; width: 451px;}
|
||||
.product-item-title-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.product-item-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
.item-logo{
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50px;
|
||||
background: #14324F;
|
||||
margin-right: 12px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 22px 22px;
|
||||
background-position: center;
|
||||
&.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
|
||||
&.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
|
||||
&.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
|
||||
&.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
|
||||
&.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
|
||||
}
|
||||
}
|
||||
.more-btn{
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: auto;
|
||||
background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
.product-item-content{
|
||||
margin-top: 30px;
|
||||
overflow: hidden;
|
||||
.recently-list{
|
||||
.recently-item{
|
||||
border: 1px solid #F2F2F2;
|
||||
background-color: transparent;
|
||||
padding: 29.9px 20px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
.item-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
&.time{
|
||||
padding-left: 22px;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background:url(../../public/static/images/main/clock.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background-color: #BBB;
|
||||
}
|
||||
&:last-child{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.notice-box{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
.notice-day{
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.notice-title{
|
||||
font-size: 14px;
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
margin-bottom: 25px;
|
||||
line-height: 24px;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.notice-contents{
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 10px;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 3px;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 100%;
|
||||
background-color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {width: 4px; /* 스크롤바의 너비 */}
|
||||
&::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
|
||||
&::-webkit-scrollbar-track {background: transparent; /*스크롤바 뒷 배경 색상*/}
|
||||
}
|
||||
.faq-item{
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
.faq-item-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.faq-num{
|
||||
flex: none;
|
||||
padding: 7px 12.5px;
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
border-radius: 110px;
|
||||
border: 1px solid rgba(242, 242, 242, 0.95);
|
||||
margin-right: 20px;
|
||||
}
|
||||
.faq-title{
|
||||
width: 0;
|
||||
flex: 1 1 auto;
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
padding-right: 96px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.faq-day{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.data-download-wrap{
|
||||
width: 100%;
|
||||
.data-down{
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
border-radius: 4px;
|
||||
background-color: #697C8F;
|
||||
margin-bottom: 5px;
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-right: 30px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
background: url(../../public/static/images/main/download.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contact-info-list{
|
||||
padding: 30px;
|
||||
border-radius: 4px;
|
||||
background-color: #F4F4F7;
|
||||
.info-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #fff;
|
||||
&:first-child{padding-top: 0;}
|
||||
&:last-child{padding-bottom: 0; border: none;}
|
||||
.icon-box{
|
||||
display: flex;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.infor-data{
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,7 +122,9 @@ button{
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pre{
|
||||
font-family: 'Pretendard', sans-serif !important;
|
||||
}
|
||||
|
||||
// button
|
||||
.btn-frame{
|
||||
@ -418,4 +420,73 @@ input[type=text]{
|
||||
border: 1px solid #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sort-main-radio
|
||||
.d-check-radio {
|
||||
line-height: 1.1;
|
||||
cursor: pointer;
|
||||
input[type=radio]{
|
||||
position: static;
|
||||
margin-left: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
label{
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 0;
|
||||
word-break: break-all;
|
||||
line-height: 1.2;
|
||||
display: inline;
|
||||
vertical-align: top;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
&::before{
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
top:2px;
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 100%;
|
||||
background-color: transparent;
|
||||
text-align:center;
|
||||
font-size:13px;
|
||||
line-height:1.4;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
&::after{
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
top:6px;
|
||||
left: 4.8px;
|
||||
margin-left: -.8rem;
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
background-color: #fff;
|
||||
text-align:center;
|
||||
font-size:13px;
|
||||
line-height:1.4;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
input[type=radio]:checked + label::after{
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user