로그인화면, 물건현황

This commit is contained in:
basssy 2024-10-14 17:58:38 +09:00
parent 67f56df408
commit d2ec45437d
9 changed files with 331 additions and 197 deletions

View File

@ -1,10 +1,11 @@
import React from 'react'
import React, { useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useForm } from 'react-hook-form'
import { sessionStore } from '@/store/commonAtom'
import { useRecoilValue, useRecoilState } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRouter } from 'next/navigation'
export default function ChangePasswordPop() {
const globalLocaleState = useRecoilValue(globalLocaleStore)
@ -12,7 +13,7 @@ export default function ChangePasswordPop() {
const { patch } = useAxios(globalLocaleState)
const { getMessage } = useMessage()
const [sessionState, setSessionState] = useRecoilState(sessionStore)
const router = useRouter()
const formInitValue = {
password1: '',
password2: '',
@ -74,6 +75,8 @@ export default function ChangePasswordPop() {
if (res.result.resultCode === 'S') {
alert(getMessage('main.popup.login.success'))
setSessionState({ ...sessionState, pwdInitYn: 'Y' })
//
router.push('/')
} else {
alert(res.result.resultMsg)
}
@ -154,7 +157,6 @@ export default function ChangePasswordPop() {
className="btn-origin grey"
onClick={() => {
router.push('/login')
setOpen(false)
}}
>
{getMessage('main.popup.login.btn2')}

View File

@ -76,16 +76,7 @@ export default function Stuff() {
headerCheckboxSelectionCurrentPageOnly: true, //
checkboxSelection: true,
showDisabledCheckboxes: true,
// .centered {
// .ag-header-cell-label {
// justify-content: center !important;
// }
// }
cellStyle: { textAlign: 'center' },
//suppressMovable: true, //
// width : 100
// minWidth : 100
// maxWidth : 100
valueFormatter: function (params) {
if (params.value) {
return dayjs(params?.value).format('YYYY.MM.DD HH:mm:ss')
@ -96,8 +87,8 @@ export default function Stuff() {
},
{
field: 'objectNo',
width: '180px',
headerName: getMessage('stuff.gridHeader.objectNo'),
// headerClass: 'centered', //_test.scss
cellRenderer: function (params) {
if (params.data.objectNo) {
return (

View File

@ -7,11 +7,16 @@ import Select from 'react-dropdown-select'
import Link from 'next/link'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
import { isEmptyArray } from '@/util/common-utils'
import { useMessage } from '@/hooks/useMessage'
import { useForm } from 'react-hook-form'
import { useRecoilValue } from 'recoil'
import { sessionStore } from '@/store/commonAtom'
import FindAddressPop from './popup/FindAddressPop'
import DesignRequestPop from './popup/DesignRequestPop'
export default function StuffDetail() {
const sessionState = useRecoilValue(sessionStore)
const router = useRouter()
const searchParams = useSearchParams()
const { getMessage } = useMessage()
@ -56,14 +61,18 @@ export default function StuffDetail() {
const [prefValue, setPrefValue] = useState('')
const [saleStoreList, setSaleStoreList] = useState([]) //
const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
const [areaIdList, setAreaIdList] = useState([]) //
const [windSpeedList, setWindSpeedList] = useState([]) //
const [isFormValid, setIsFormValid] = useState(false) //,
const [buttonValid, setButtonValid] = useState(false) //
const [showButtonValid, setShowButtonValid] = useState(false) //
const objectNo = searchParams.get('objectNo') //url set
// const [] //1
// const [] //2
const [editMode, setEditMode] = useState('NEW')
const [detailData, setDetailData] = useState({})
@ -85,15 +94,15 @@ export default function StuffDetail() {
// API
get({ url: '/api/object/prefecture/list' }).then((res) => {
if (!isEmptyArray(res)) {
// console.log('API :::', res)
console.log('도도부현API 결과:::', res)
setPrefCodeList(res)
}
})
// API /api/object/saleStore//list -
// 1 saleStoreId=201TES01
// T01
//1 : X167
get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
// get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
if (!isEmptyArray(res)) {
// console.log(' :::::', res)
setSaleStoreList(res)
@ -111,32 +120,31 @@ export default function StuffDetail() {
// API
get({ url: '/api/object/prefecture/list' }).then((res) => {
if (!isEmptyArray(res)) {
// console.log(' API :::', res)
console.log('신규화면 도도부현API 결과:::', res)
setPrefCodeList(res)
}
})
// API /api/object/saleStore//list -
// 1 saleStoreId=201TES01
// T01
//1 : X167
get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
get({ url: `/api/object/saleStore/T01/list` }).then((res) => {
// get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
if (!isEmptyArray(res)) {
// console.log(' :::::', res)
const firstList = res.filter((row) => row.saleStoreLevel === '1')
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
// console.log('first:::::', firstList)
// console.log('otherList:::::', otherList)
//1
setSaleStoreList(firstList)
//1
form.setValue('saleStoreId', firstList[0].saleStoreId)
//form.setValue('saleStoreId', firstList[0].saleStoreId)
//1
form.setValue('saleStoreName', firstList[0].saleStoreId)
form.setValue('saleStoreName', firstList[0]?.saleStoreId)
//1
setOriginOtherSaleStoreList(otherList)
setOtherSaleStoreList(otherList)
form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
form.setValue('otherSaleStoreName', otherList[0].saleStoreId)
// form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
form.setValue('otherSaleStoreName', otherList[0]?.saleStoreId)
}
})
}
@ -144,32 +152,83 @@ export default function StuffDetail() {
//1
const onSelectionChange = (key) => {
if (key == null) {
if (!isEmptyArray(key)) {
setOtherSaleStoreList(otherSaleStoreList)
form.setValue('saleStoreId', key[0].saleStoreId)
form.setValue('saleStoreName', key[0].saleStoreId)
// 1 2 list
// 
let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key[0].saleStoreId)
setOtherSaleStoreList(newOtherSaleStoreList)
} else {
//X
form.setValue('saleStoreId', '')
form.setValue('saleStoreName', '')
} else {
const name = saleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
form.setValue('saleStoreId', key.target.value)
form.setValue('saleStoreName', name)
setOtherSaleStoreList(originOtherSaleStoreList)
}
}
//2
const onSelectionChange2 = (key) => {
const name = otherSaleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
form.setValue('otherSaleStoreId', key.target.value)
form.setValue('otherSaleStoreNm', name)
if (!isEmptyArray(key)) {
form.setValue('otherSaleStoreId', key[0].saleStoreId)
form.setValue('otherSaleStoreId', key[0].saleStoreId)
} else {
form.setValue('otherSaleStoreId', '')
form.setValue('otherSaleStoreId', '')
}
}
//
const _zipNo = watch('zipNo')
useEffect(() => {
if (_zipNo !== '' && _zipNo.length === 7 && !_zipNo.match(/\D/g)) {
setButtonValid(true)
//setButtonValid(true)
} else {
setButtonValid(false)
//setButtonValid(false)
}
}, [_zipNo])
//
const setZipInfo = (info) => {
console.log('팝업에서 넘어온 데이타::::::::', info)
// const params = {
// zipcode: _zipNo,
// }
// get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
// //7830060
// //9302226
// //0790177 3
// if (res.status === 200) {
// if (res.results != null) {
// console.log('::', res.results)
// // console.log('prefcode::', res.results[0].prefcode)
// // console.log('address::', res.results[0].address2 + res.results[0].address3)
// setPrefValue(res.results[0].prefcode)
// form.setValue('prefId', res.results[0].prefcode)
// form.setValue('prefName', res.results[0].address1)
// form.setValue('address', res.results[0].address2 + res.results[0].address3)
// } else {
// alert(' . .')
// form.setValue('prefId', '')
// form.setValue('prefName', '')
// form.setValue('address', '')
// form.setValue('zipNo', '')
// setPrefValue('')
// setAreaIdList([])
// form.setValue('areaId', '')
// // form.setValue('areaName', '')
// setWindSpeedList([])
// form.setValue('windSpeed', '')
// }
// } else {
// alert(res.message)
// }
// })
}
//
// dispCompanyName: '', //
// objectName: '', //
@ -201,10 +260,10 @@ export default function StuffDetail() {
const _installHeight = watch('installHeight')
useEffect(() => {
// console.log('mode:::::', editMode)
console.log('mode:::::', editMode)
if (editMode === 'NEW') {
const formData = form.getValues()
// console.log('::::::::::::', formData)
console.log('폼::::::::::::', formData)
let errors = {}
if (!_dispCompanyName || _dispCompanyName.trim().length === 0) {
errors.dispCompanyName = true
@ -251,7 +310,7 @@ export default function StuffDetail() {
errors.installHeight = true
}
// console.log('errors::', errors)
console.log('errors::', errors)
setIsFormValid(Object.keys(errors).length === 0)
} else {
// console.log(' ')
@ -273,49 +332,21 @@ export default function StuffDetail() {
// API
const onSearchPostNumber = () => {
const params = {
zipcode: _zipNo,
}
console.log('주소검색클릭!!')
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
//7830060
//9302226
//0790177 3
if (res.status === 200) {
if (res.results != null) {
console.log('주소검색::', res.results)
// console.log('prefcode::', res.results[0].prefcode)
// console.log('address::', res.results[0].address2 + res.results[0].address3)
setPrefValue(res.results[0].prefcode)
form.setValue('prefId', res.results[0].prefcode)
form.setValue('prefName', res.results[0].address1)
form.setValue('address', res.results[0].address2 + res.results[0].address3)
} else {
alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
form.setValue('prefId', '')
form.setValue('prefName', '')
form.setValue('address', '')
form.setValue('zipNo', '')
setPrefValue('')
setAreaIdList([])
form.setValue('areaId', '')
// form.setValue('areaName', '')
setWindSpeedList([])
form.setValue('windSpeed', '')
}
} else {
alert(res.message)
}
})
setShowButtonValid(true)
}
useEffect(() => {
console.log('우편번호검색해서 값이왔어:::::::::::', prefValue)
if (prefValue !== '') {
//
// /api/object/prefecture//list
get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
if (!isEmptyArray(res)) {
// console.log(' ::::::::', res)
console.log('발전량 시뮬레이션::::::::', res)
//res areaId
// form.setValue('areaId', res[0].areaId)
form.setValue('areaId', res[0].prefId)
form.setValue('areaName', res[0].prefName)
setAreaIdList(res)
@ -404,7 +435,7 @@ export default function StuffDetail() {
workName: null,
}
console.log('임시저장params::', params)
return
// return
await post({ url: '/api/object/save-object', data: params }).then((res) => {
console.log('res::::::', res)
})
@ -498,18 +529,16 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div className="select-wrap mr5" style={{ width: '567px' }}>
{saleStoreList?.length > 0 && (
<select className="select-light" onChange={onSelectionChange} value={form.watch('saleStoreId')}>
{saleStoreList.map((row) => {
return (
<option key={row.saleStoreLevel} value={row.saleStoreId}>
{row.saleStoreName}
</option>
)
})}
</select>
)}
<div style={{ width: '567px', marginRight: '5px' }}>
<Select
options={saleStoreList}
value={form.watch('saleStoreId')}
onChange={onSelectionChange}
labelField="saleStoreName"
valueField="saleStoreId"
searchBy="saleStoreName"
clearable={true}
></Select>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input type="text" className="input-light" value={form.watch('saleStoreId')} {...form.register('saleStoreId')} readOnly />
@ -526,18 +555,17 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div className="select-wrap mr5" style={{ width: '567px' }}>
{otherSaleStoreList?.length > 0 && (
<select className="select-light" onChange={onSelectionChange2} value={form.watch('otherSaleStoreId')}>
{otherSaleStoreList.map((row) => {
return (
<option key={row.saleStoreId} value={row.saleStoreId} text={row.saleStoreName}>
{row.saleStoreName}
</option>
)
})}
</select>
)}
<div style={{ width: '567px', marginRight: '5px' }}>
<Select
options={otherSaleStoreList}
value={form.watch('otherSaleStoreId')}
labelField="saleStoreName"
valueField="saleStoreId"
searchBy="saleStoreName"
clearable={true}
onChange={onSelectionChange2}
disabled={form.watch('saleStoreId') !== '' ? false : true}
></Select>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
<input
@ -558,20 +586,12 @@ export default function StuffDetail() {
<td>
<div className="flx-box">
<div className="input-wrap mr5" style={{ width: '200px' }}>
<input
type="text"
className="input-light"
maxLength={7}
{...form.register('zipNo', {
minLength: { value: 7, message: '7자리만가능' },
pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
})}
/>
<input type="text" className="input-light" disabled />
</div>
<Button className="btn-origin grey" isDisabled={!buttonValid} onClick={onSearchPostNumber}>
<Button className="btn-origin grey" onClick={onSearchPostNumber}>
주소검색
</Button>
<div className="guide">*우편번호 7자리를 입력한 , 주소검색 버튼을 클릭해 주십시오</div>
<div className="guide">*주소검색 버튼을 클릭한 , 도도부현 정보를 선택해주십시오.</div>
</div>
</td>
</tr>
@ -581,20 +601,16 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div className="input-wrap mr5" style={{ width: '200px' }}>
<input type="text" className="input-light" value={form.watch('prefName')} {...form.register('prefName')} readOnly />
{/* {prefCodeList?.length > 0 && (
<Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
{prefCodeList.map((row) => {
return <SelectItem key={row.prefId}>{row.prefName}</SelectItem>
})}
</Select>
)} */}
{/* {prefCodeList?.length > 0 && (
<select>
<option value=""></option>
<div className="select-wrap" style={{ width: '200px' }}>
{prefCodeList?.length > 0 && (
<select className="select-light" name="prefName" {...register('prefId')} disabled>
{prefCodeList.map((row) => (
<option key={row.prefId} value={row.prefId}>
{row.prefName}
</option>
))}
</select>
)} */}
)}
</div>
<div className="input-wrap mr5" style={{ width: '580px' }}>
<input type="text" className="input-light" value={form.watch('address')} {...form.register('address')} />
@ -644,8 +660,8 @@ export default function StuffDetail() {
})}
</select>
</div>
<span>m/s이하</span>
<button className="btn-origin grey mr5">풍속선택</button>
<span className="mr10">m/s이하</span>
<button className="btn-origin grey">풍속선택</button>
</div>
</td>
</tr>
@ -784,6 +800,8 @@ export default function StuffDetail() {
)}
</>
)}
{showButtonValid && <FindAddressPop setShowButtonValid={setShowButtonValid} zipInfo={setZipInfo} />}
<DesignRequestPop />
</>
)
}

View File

@ -40,7 +40,6 @@ export default function StuffQGrid(props) {
suppressMovable: true,
resizable: false,
suppressSizeToFit: false,
headerClass: 'centered', //_test.scss
}
}, [])
@ -67,11 +66,7 @@ export default function StuffQGrid(props) {
//
const onCellDoubleClicked = useCallback((event) => {
// if (event.column.colId === 'company') {
// return
// } else {
props.getCellDoubleClicked(event)
// }
}, [])
//
@ -82,7 +77,6 @@ export default function StuffQGrid(props) {
}, [])
const onGridReady = useCallback((event) => {
// console.log('event:::', event)
// width
event.api.sizeColumnsToFit()
}, [])
@ -92,6 +86,13 @@ export default function StuffQGrid(props) {
gridData ? setRowData(gridData) : ''
}, [gridData])
// row
const getRowClass = (row) => {
if (row.data.objectNo.substring(0, 1) === 'T') {
return 'important_row'
}
}
return (
<div className="ag-theme-quartz" style={{ height: 500 }}>
<AgGridReact
@ -107,10 +108,10 @@ export default function StuffQGrid(props) {
onSelectionChanged={onSelectionChanged}
onCellDoubleClicked={onCellDoubleClicked}
pagination={isPageable}
//paginationPageSize={paginationPageSize}
//paginationPageSizeSelector={paginationPageSizeSelector}
autoSizeStrategy={autoSizeStrategy}
overlayNoRowsTemplate={'<span className="ag-overlay-loading-center">물건 목록이 없습니다.</span>'}
// getRowStyle={getRowStyle}
getRowClass={getRowClass}
/>
</div>
)

View File

@ -260,7 +260,8 @@ export default function StuffSearchCondition() {
options={schSelSaleStoreList}
value={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
labelField="saleStoreName"
valueField="saleStoreName"
valueField="saleStoreId"
searchBy="saleStoreName"
onChange={onSelectionChange}
clearable={true}
onClearAll={handleClear}

View File

@ -0,0 +1,5 @@
import React from 'react'
export default function DesignRequestPop() {
return <div></div>
}

View File

@ -0,0 +1,111 @@
import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { queryStringFormatter } from '@/util/common-utils'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRecoilValue } from 'recoil'
import FindAddressPopQGrid from './FindAddressPopQGrid'
export default function FindAddressPop(props) {
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
const [prefId, setPrefId] = useState('')
const [address1, setAddress1] = useState('')
const [address2, setAddress2] = useState('')
const [address3, setAddress3] = useState('')
const gridRef = useRef()
const [gridProps, setGridProps] = useState({
gridData: [],
isPageable: false,
gridColumns: [],
})
const formInitValue = {
zipNo: '',
}
const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
defaultValues: formInitValue,
})
const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
//
const searchPostNum = () => {
// //7830060
// //9302226
// //0790177 3
console.log(watch('zipNo'))
const params = {
zipcode: watch('zipNo'),
}
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
console.log('우편조회 API결과:::::', res)
if (res.status === 200) {
} else {
alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
}
})
}
//
const zipInfo = () => {
console.log('주소적용 클릭:::::::::')
// setAddress3('3333')
// setAddress3('4444')
// setAddress3('5555')
props.zipInfo({
zipNo: '3434343',
address1: '3333',
address2: '4444',
address3: '5555',
})
props.setShowButtonValid(false)
}
//
const handleKeyUp = (e) => {
let input = e.target
input.value = input.value.replace(/[^0-9]/g, '')
}
return (
<div className="modal-popup">
<div className="modal-dialog middle">
<div className="modal-content">
<div className="modal-header">
<h1 className="title">우편번호 郵便番号</h1>
<button className="modal-close" onClick={() => props.setShowButtonValid(false)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="modal-body-inner">
<div className="address-input-wrap">
<input
type="text"
className="address-input"
maxLength={7}
onKeyUp={handleKeyUp}
{...form.register('zipNo')}
placeholder="우편번호의 7자리를 입력하세요. 郵便番号の7桁を入力してください。"
/>
<button className="search-btn" onClick={searchPostNum}></button>
</div>
<div className="address-grid">
<FindAddressPopQGrid {...gridProps} gridRef={gridRef} />
</div>
</div>
<div className="footer-btn-wrap">
<button className="btn-origin grey mr5" onClick={() => props.setShowButtonValid(false)}>
닫다 閉じる
</button>
<button className="btn-origin navy " onClick={zipInfo}>
주소적용 住所適用
</button>
</div>
</div>
</div>
</div>
</div>
)
}

View File

@ -0,0 +1,6 @@
import React from 'react'
export default function FindAddressPopGrid(props) {
const { gridData, gridColumns, isPageable = true, gridRef } = props
return <div></div>
}

View File

@ -1,64 +1,63 @@
.q-grid{
height: fit-content;
.ag-theme-quartz {
outline: none;
border: none;
--ag-border-radius: 0px;
--ag-wrapper-border-radius: 0px;
--ag-header-height: 40px;
--ag-header-foreground-color: white;
--ag-header-background-color: #5D6A76;
// --ag-header-cell-hover-background-color: rgb(80, 40, 140);
--ag-header-cell-moving-background-color: #5D6A76;
.ag-root-wrapper{
outline: none;
border: none;
}
.ag-header{
border-bottom: none;
border-radius: 4px;
}
.ag-header-cell{
font-size: 13px;
color: #fff;
}
.ag-header-cell-label{
justify-content: center;
}
.ag-header-cell-resize{
&:after{
display: none;
}
}
.ag-row{
border-bottom: 1px solid #ECF0F4;
&:nth-child(2n){
background-color: #F7F9FA;
}
&.important_row{
background-color: #e7e7e7;
}
}
.ag-cell{
font-size: 13px;
color: #45576F;
}
.ag-icon-desc::before,
.ag-icon-asc::before,
.ag-icon-filter::before{
color: #fff;
}
.q-grid {
height: fit-content;
.ag-theme-quartz {
outline: none;
border: none;
--ag-border-radius: 0px;
--ag-wrapper-border-radius: 0px;
--ag-header-height: 40px;
--ag-header-foreground-color: white;
--ag-header-background-color: #5d6a76;
// --ag-header-cell-hover-background-color: rgb(80, 40, 140);
--ag-header-cell-moving-background-color: #5d6a76;
.ag-root-wrapper {
outline: none;
border: none;
}
.copy-ico-wrap{
display: flex;
align-items: center;
.copy_ico{
width: 18px;
height: 18px;
background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
background-size: cover;
margin-left: 12px;
}
.ag-header {
border-bottom: none;
border-radius: 4px;
}
}
.ag-header-cell {
font-size: 13px;
color: #fff;
}
.ag-header-cell-label {
justify-content: center;
}
.ag-header-cell-resize {
&:after {
display: none;
}
}
.ag-row {
border-bottom: 1px solid #ecf0f4;
&:nth-child(2n) {
background-color: #f7f9fa;
}
&.important_row {
background-color: #e7e7e7;
}
}
.ag-cell {
font-size: 13px;
color: #45576f;
}
.ag-icon-desc::before,
.ag-icon-asc::before,
.ag-icon-filter::before {
color: #fff;
}
}
.copy-ico-wrap {
display: flex;
align-items: center;
.copy_ico {
width: 18px;
height: 18px;
background: url(../../public/static/images/sub/copy_grid_ico.svg) no-repeat center;
background-size: cover;
margin-left: 12px;
}
}
}