Reza
3 years ago
parent
07ca5cf436
commit
3934ae8fd1
10 changed files with 213 additions and 269 deletions
|
After Width: | Height: | Size: 860 B |
|
After Width: | Height: | Size: 411 B |
@ -1,197 +1,132 @@ |
||||
.home-header { |
||||
position: relative; |
||||
|
||||
.home-slider { |
||||
width: 100%; |
||||
margin: 0px auto; |
||||
margin-top: 10px; |
||||
&-dark{ |
||||
.carousel-indicators{ |
||||
li{ |
||||
background-color: inherit !important; |
||||
} |
||||
} |
||||
padding: 2px 0px 0px; |
||||
margin: 20px auto 10px; |
||||
position: relative; |
||||
.rec-arrow-left { |
||||
top: calc(50% - 22px) !important; |
||||
right: 5px !important; |
||||
} |
||||
|
||||
.rec-arrow-right { |
||||
top: calc(50% - 22px) !important; |
||||
left: 5px !important; |
||||
} |
||||
&-light{ |
||||
.carousel-indicators{ |
||||
li{ |
||||
padding: 5px; |
||||
border-radius: 5px !important; |
||||
background-color: rgba(255, 255, 255, 0.281) !important; |
||||
} |
||||
} |
||||
|
||||
.rec-dot_active { |
||||
background-color: green !important; |
||||
color: white !important; |
||||
// box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important; |
||||
} |
||||
|
||||
.Carousel-button-10 { |
||||
background-color: grey !important; |
||||
} |
||||
.rec-pagination { |
||||
z-index: 200; |
||||
// left: calc(50% - 20px) !important; |
||||
& button { |
||||
background-color: grey; |
||||
margin: 2px !important; |
||||
box-shadow: 0px 0px 0px rgba(100, 100, 100, 1); |
||||
&:focus { |
||||
box-shadow: 0px 0px 0px rgba(100, 100, 100, 1); |
||||
} |
||||
} |
||||
span { |
||||
height: 80%; |
||||
width: 8px; |
||||
background-color: white; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
.rec-slider-container { |
||||
margin: 0px !important; |
||||
} |
||||
|
||||
.rec-arrow { |
||||
position: absolute !important; |
||||
z-index: 100; |
||||
background-color: inherit !important; |
||||
box-shadow: none !important; |
||||
border: 0px !important; |
||||
color: grey !important; |
||||
&:focus { |
||||
color: grey !important; |
||||
} |
||||
.item { |
||||
height: 460px; |
||||
background-size: 100% 100% !important; |
||||
background-repeat: no-repeat !important; |
||||
background-position: 0px 0px !important; |
||||
font-family: numeralLight; |
||||
color: white; |
||||
padding-right: 70%; |
||||
padding-top: 120px; |
||||
border-radius: 10px; |
||||
margin: 0px 10px; |
||||
h1 { |
||||
font-family: numeralBold; |
||||
} |
||||
&:disabled { |
||||
color: black !important; |
||||
display: none !important; |
||||
} |
||||
strong { |
||||
font-weight: 300; |
||||
&:enabled { |
||||
color: grey; |
||||
} |
||||
&__cover { |
||||
position: absolute; |
||||
left: 0px; |
||||
top: 0px; |
||||
width: 100%; |
||||
height: 100%; |
||||
background: linear-gradient( |
||||
0deg, |
||||
hsla(0, 0%, 0%, 1) 0%, |
||||
hsla(250, 14%, 61%, 0) 44% |
||||
); |
||||
border-radius: 10px; |
||||
&:hover { |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.home-header { |
||||
max-width: 1350px; |
||||
font-family: numeralLight; |
||||
&__info{ |
||||
&--author{ |
||||
position: absolute; |
||||
left: 30px; |
||||
bottom: 100px; |
||||
h3{ |
||||
margin-right: 5px; |
||||
font-size: 15px; |
||||
} |
||||
i{ |
||||
margin-right: 5px; |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
} |
||||
.item { |
||||
h1 { |
||||
font-family: numeralMedium; |
||||
font-size: 24px; |
||||
} |
||||
h2{ |
||||
font-size: 17px; |
||||
font-family: numeralMedium; |
||||
} |
||||
} |
||||
.carousel-indicators li { |
||||
margin-left: 20px !important; |
||||
max-width: 150px !important; |
||||
div { |
||||
margin-right: 10px; |
||||
} |
||||
strong { |
||||
font-size: 12px; |
||||
} |
||||
b { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
.rec-slider-container { |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.home-header { |
||||
max-width: 1250px; |
||||
.item { |
||||
.slider-header { |
||||
width: 100%; |
||||
justify-content: flex-end; |
||||
img{ |
||||
width: 100%; |
||||
|
||||
padding-top: 360px; |
||||
h1 { |
||||
font-size: calc(100vw / 65); |
||||
} |
||||
h2 { |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
} |
||||
&__info{ |
||||
&--author{ |
||||
position: absolute; |
||||
left: 30px; |
||||
bottom: 100px; |
||||
h3{ |
||||
margin-right: 5px; |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
i{ |
||||
margin-right: 5px; |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
} |
||||
.carousel-indicators li { |
||||
margin-left: 10px !important; |
||||
max-width: 200px !important; |
||||
div { |
||||
margin-right: 10px; |
||||
} |
||||
strong { |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
b { |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
// &__right { |
||||
// width: 60%; |
||||
// height: 100%; |
||||
// // & img { |
||||
|
||||
.carousel-indicators { |
||||
position: absolute !important; |
||||
left: 0px !important; |
||||
right: auto !important; |
||||
bottom: 40px !important; |
||||
z-index: auto !important; |
||||
display: auto !important; |
||||
justify-content: auto !important; |
||||
padding: auto !important; |
||||
margin: 0px !important; |
||||
list-style: auto !important; |
||||
color: white; |
||||
width: 30% !important; |
||||
justify-content: flex-start !important; |
||||
// // border-radius: 10px; |
||||
// // } |
||||
// } |
||||
// &__left { |
||||
// width: 40%; |
||||
// height: 100%; |
||||
// justify-content: center; |
||||
// align-items: flex-end; |
||||
// padding-left: 70px; |
||||
|
||||
span.active { |
||||
height: 80% !important; |
||||
width: 8px !important; |
||||
background-color: yellow !important; |
||||
} |
||||
// h1 { |
||||
// font-size: calc(100vw / 55); |
||||
// color: white; |
||||
// font-family: numeralMedium; |
||||
// letter-spacing: -1px; |
||||
// } |
||||
// h2 { |
||||
// margin-top: 5px; |
||||
// font-size: calc(100vw / 78); |
||||
// color: white; |
||||
// font-family: numeralMedium; |
||||
// } |
||||
// a { |
||||
// text-decoration: none; |
||||
// color: white; |
||||
// margin-top: 10px; |
||||
// font-size: calc(100vw / 90); |
||||
// padding: 6px 10px; |
||||
// border: 1px solid white; |
||||
// border-radius: 5px; |
||||
// font-family: numeralMedium; |
||||
// &:hover { |
||||
// color: white; |
||||
// } |
||||
// } |
||||
// } |
||||
} |
||||
|
||||
.active span { |
||||
background-color: yellow !important; |
||||
height: 80% !important; |
||||
width: 8px !important; |
||||
@media screen and (min-width: 1441px) { |
||||
.home-slider { |
||||
max-width: 1440px; |
||||
width: 100%; |
||||
justify-content: flex-end; |
||||
} |
||||
} |
||||
|
||||
.carousel-indicators li { |
||||
display: auto !important; |
||||
width: auto !important; |
||||
height: auto !important; |
||||
margin: 0px !important; |
||||
text-indent: 0px !important; |
||||
cursor: pointer !important; |
||||
background-color: inherit !important; |
||||
border: 0px !important; |
||||
border-radius: 0px !important; |
||||
text-align: right !important; |
||||
justify-content: flex-start !important; |
||||
font-family: numeralLight !important; |
||||
span { |
||||
height: 80%; |
||||
width: 8px; |
||||
background-color: white; |
||||
border-radius: 10px; |
||||
@media screen and (min-width : 1008px) and (max-width: 1440px){ |
||||
.home-slider{ |
||||
max-width: 1250px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,65 +1,48 @@ |
||||
import React from "react"; |
||||
import Avatar from "@mui/material/Avatar"; |
||||
import _ from "lodash"; |
||||
import React, { Component } from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
import Carousel from "react-elastic-carousel"; |
||||
|
||||
export default function Header(props: any) { |
||||
const { headerData, theme } = props; |
||||
import dropdown from "../../../assets/icons/dropdown.png"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
const HomeSlider = ({ headerData}: any) => { |
||||
return ( |
||||
<header |
||||
className={_.join( |
||||
[ |
||||
"home-header", |
||||
theme === "light" ? "home-header-light" : "home-header-dark", |
||||
], |
||||
" " |
||||
)} |
||||
> |
||||
<div id="myCarousel" className="carousel slide" data-ride="carousel"> |
||||
<div className="carousel-inner"> |
||||
{headerData.map((item: any, i: any) => ( |
||||
<div |
||||
className={i === 0 ? "item active" : "item"} |
||||
style={{ |
||||
background: `url(${ |
||||
"https://dnvn.ir/api/v1/file/" + item.fileId |
||||
})`,
|
||||
}} |
||||
// dataBackgroundImage={`https://dnvn.ir/api/v1/file/${item.fileId}`}
|
||||
key={i} |
||||
<div className="home-slider d-flex"> |
||||
<Carousel |
||||
itemsToShow={1} |
||||
isRTL={true} |
||||
enableTilt={false} |
||||
showArrows={true} |
||||
pagination={true} |
||||
enableAutoPlay={true} |
||||
> |
||||
{headerData.map((item: any, i: any) => ( |
||||
<div className="slider-header d-flex"> |
||||
{/* < |
||||
className="slider-header__right d-flex" |
||||
style={{ backgroundColor: item.backgroundColor }} |
||||
> */} |
||||
<img |
||||
src={`https://dnvn.ir/api/v1/file/${item.fileId}`} |
||||
alt={item.title} |
||||
/> |
||||
|
||||
{/* <div |
||||
style={{ backgroundColor: item.backgroundColor }} |
||||
className="slider-header__left d-flex flex-column" |
||||
> |
||||
<div className="home-header__cover"></div> |
||||
<div className="home-header__info d-flex flex-column"> |
||||
<div className="home-header__info--author d-flex"> |
||||
{item.authorImage && <Avatar src={item.authorImage} />} |
||||
<div className="d-flex flex-column"> |
||||
<h3>{item.extraText}</h3> |
||||
{/* <i>نویسنده</i> */} |
||||
</div> |
||||
</div> |
||||
{/* <h1>{(Number(i) + 1)}</h1> */} |
||||
<h1>{item.title}</h1> |
||||
<h2>{item.subTitle}</h2> |
||||
</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
<div className="carousel-indicators"> |
||||
{headerData.map((item1: any, i: any) => ( |
||||
<li |
||||
className="d-flex align-items-center" |
||||
data-target="#myCarousel" |
||||
data-slide-to={i} |
||||
key={i} |
||||
> |
||||
<span className={i === 0 ? "active" : ""}></span> |
||||
<div className="d-flex flex-column"> |
||||
<b>{"."}</b> |
||||
<strong>{item1.title}</strong> |
||||
</div> |
||||
</li> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</header> |
||||
<h1>{item.title}</h1> |
||||
<h2>{item.subTitle}</h2> |
||||
{item.buttonText && ( |
||||
<Link to={item.link || "/"}>{item.buttonText}</Link> |
||||
)} |
||||
</div> */} |
||||
</div> |
||||
))} |
||||
</Carousel> |
||||
</div> |
||||
); |
||||
} |
||||
}; |
||||
|
||||
export default HomeSlider; |
||||
Loading…
Reference in new issue