готовый проект без бекенда
This commit is contained in:
parent
c41ed37b33
commit
0564ff9582
|
@ -40,6 +40,45 @@ const Section = styled.div`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
${(props) => props.theme.mediaQueries.tabletLandscape} {
|
||||||
|
.user-section {
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 400px;
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
${(props) => props.theme.mediaQueries.tabletPortrait} {
|
||||||
|
|
||||||
|
.user-section {
|
||||||
|
flex-direction: column;
|
||||||
|
img {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 430px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
${(props) => props.theme.mediaQueries.slimMobile} {
|
||||||
|
.user-section {
|
||||||
|
|
||||||
|
img {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.description-section {
|
.description-section {
|
||||||
h3 {
|
h3 {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
@ -111,6 +150,42 @@ const MapSection = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 450px;
|
height: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
${(props) => props.theme.mediaQueries.tabletLandscape} {
|
||||||
|
.content {
|
||||||
|
gap: 5px;
|
||||||
|
left: 5%;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
${(props) => props.theme.mediaQueries.tabletPortrait} {
|
||||||
|
h3 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
position: relative;
|
||||||
|
transform: translateY(0);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 200px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
export default function page({ params }: Props) {
|
export default function page({ params }: Props) {
|
||||||
|
@ -211,12 +286,6 @@ export default function page({ params }: Props) {
|
||||||
<MapSection>
|
<MapSection>
|
||||||
<h1>Расположение участка захоронения</h1>
|
<h1>Расположение участка захоронения</h1>
|
||||||
<YMaps>
|
<YMaps>
|
||||||
<div className='content'>
|
|
||||||
<h3>Расположение участка</h3>
|
|
||||||
<p>Кладбище: Градское</p>
|
|
||||||
<p>Квартал: 7</p>
|
|
||||||
<p>Участок: 32453</p>
|
|
||||||
</div>
|
|
||||||
<Map
|
<Map
|
||||||
className='map'
|
className='map'
|
||||||
defaultState={{
|
defaultState={{
|
||||||
|
@ -232,6 +301,12 @@ export default function page({ params }: Props) {
|
||||||
>
|
>
|
||||||
<Placemark geometry={[55.684758, 37.738521]} />
|
<Placemark geometry={[55.684758, 37.738521]} />
|
||||||
</Map>
|
</Map>
|
||||||
|
<div className='content'>
|
||||||
|
<h3>Расположение участка</h3>
|
||||||
|
<p>Кладбище: Градское</p>
|
||||||
|
<p>Квартал: 7</p>
|
||||||
|
<p>Участок: 32453</p>
|
||||||
|
</div>
|
||||||
</YMaps>
|
</YMaps>
|
||||||
</MapSection>
|
</MapSection>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -52,8 +52,8 @@ const Section = styled.div`
|
||||||
${(props) => props.theme.mediaQueries.tabletLandscape} {
|
${(props) => props.theme.mediaQueries.tabletLandscape} {
|
||||||
.item {
|
.item {
|
||||||
img {
|
img {
|
||||||
height: 200px;
|
height: 250px;
|
||||||
width: 300px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -66,32 +66,36 @@ const Section = styled.div`
|
||||||
|
|
||||||
${(props) => props.theme.mediaQueries.tabletPortrait} {
|
${(props) => props.theme.mediaQueries.tabletPortrait} {
|
||||||
.list {
|
.list {
|
||||||
grid-template-columns: 1fr;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-logo {
|
.user-logo {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider {
|
.item {
|
||||||
display: block;
|
width: 100%;
|
||||||
max-width: 470px;
|
|
||||||
max-height: 340px;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
height: 340px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 470px;
|
|
||||||
max-height: 340px;
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
${(props) => props.theme.mediaQueries.mobile} {
|
.slider {
|
||||||
|
display: block;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 340px;
|
||||||
|
/* max-width: 470px; */
|
||||||
|
|
||||||
|
|
||||||
|
.slick-track {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
@ -106,16 +110,16 @@ const some_cool_mans = [
|
||||||
{ images: ['/old men.png', '/image 7.png'] }
|
{ images: ['/old men.png', '/image 7.png'] }
|
||||||
] as man[]
|
] as man[]
|
||||||
|
|
||||||
export default function Page({}: Props) {
|
const settings = {
|
||||||
const setting = {
|
|
||||||
infinite: true,
|
infinite: true,
|
||||||
slidesToShow: 1,
|
slidesToShow: 1,
|
||||||
slidesToScroll: 1,
|
slidesToScroll: 1,
|
||||||
speed: 500,
|
speed: 500,
|
||||||
arrows: false,
|
arrows: false,
|
||||||
dots: false
|
dots: false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function Page({}: Props) {
|
||||||
const onEnterMouse =
|
const onEnterMouse =
|
||||||
(some_man: man) =>
|
(some_man: man) =>
|
||||||
(event: React.MouseEvent<HTMLImageElement>): void => {
|
(event: React.MouseEvent<HTMLImageElement>): void => {
|
||||||
|
@ -150,16 +154,10 @@ export default function Page({}: Props) {
|
||||||
onMouseLeave={onLeaveMouse(item)}
|
onMouseLeave={onLeaveMouse(item)}
|
||||||
className='user-logo'
|
className='user-logo'
|
||||||
/>
|
/>
|
||||||
<div className='slider'>
|
<Slider {...settings} className='slider'>
|
||||||
<Slider {...setting}>
|
|
||||||
<div>
|
|
||||||
<img src={item.images[0]} />
|
<img src={item.images[0]} />
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img src={item.images[1]} />
|
<img src={item.images[1]} />
|
||||||
</div>
|
|
||||||
</Slider>
|
</Slider>
|
||||||
</div>
|
|
||||||
</Link>
|
</Link>
|
||||||
<h3>Иванов Иван Иванович</h3>
|
<h3>Иванов Иван Иванович</h3>
|
||||||
<div className='data'>
|
<div className='data'>
|
||||||
|
|
|
@ -474,7 +474,7 @@ export const ReviewsContainer = styled.div`
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-slide {
|
.slick-slide {
|
||||||
display: flex;
|
display: fleFx;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,7 +20,6 @@ export default function Header({}: Props) {
|
||||||
|
|
||||||
const pathname = usePathname()
|
const pathname = usePathname()
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setMenuState(false)
|
setMenuState(false)
|
||||||
}, [pathname])
|
}, [pathname])
|
||||||
|
@ -82,11 +81,9 @@ export default function Header({}: Props) {
|
||||||
onClick={() => setMenuState(true)}
|
onClick={() => setMenuState(true)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className='menu-container'>
|
<div className='menu-container'>
|
||||||
<div className='title-active'>
|
<div className='title-active'>
|
||||||
|
|
||||||
<div className='contact'>
|
<div className='contact'>
|
||||||
<div className='addresses'>
|
<div className='addresses'>
|
||||||
<p>ул. Курчатова, д. 4</p>
|
<p>ул. Курчатова, д. 4</p>
|
||||||
|
|
Loading…
Reference in New Issue