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%; |
width: 100%; |
||||||
margin: 0px auto; |
padding: 2px 0px 0px; |
||||||
margin-top: 10px; |
margin: 20px auto 10px; |
||||||
&-dark{ |
position: relative; |
||||||
.carousel-indicators{ |
.rec-arrow-left { |
||||||
li{ |
top: calc(50% - 22px) !important; |
||||||
background-color: inherit !important; |
right: 5px !important; |
||||||
} |
} |
||||||
} |
|
||||||
|
.rec-arrow-right { |
||||||
|
top: calc(50% - 22px) !important; |
||||||
|
left: 5px !important; |
||||||
} |
} |
||||||
&-light{ |
} |
||||||
.carousel-indicators{ |
|
||||||
li{ |
.rec-dot_active { |
||||||
padding: 5px; |
background-color: green !important; |
||||||
border-radius: 5px !important; |
color: white !important; |
||||||
background-color: rgba(255, 255, 255, 0.281) !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; |
.rec-slider-container { |
||||||
background-color: white; |
margin: 0px !important; |
||||||
border-radius: 10px; |
} |
||||||
|
|
||||||
|
.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 { |
&:disabled { |
||||||
height: 460px; |
color: black !important; |
||||||
background-size: 100% 100% !important; |
display: none !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; |
|
||||||
} |
|
||||||
} |
} |
||||||
strong { |
&:enabled { |
||||||
font-weight: 300; |
color: grey; |
||||||
} |
} |
||||||
&__cover { |
&:hover { |
||||||
position: absolute; |
color: white; |
||||||
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; |
|
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
@media screen and (min-width: 1441px) { |
.rec-slider-container { |
||||||
.home-header { |
border-radius: 10px; |
||||||
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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
.slider-header { |
||||||
.home-header { |
width: 100%; |
||||||
max-width: 1250px; |
justify-content: flex-end; |
||||||
.item { |
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 { |
// // border-radius: 10px; |
||||||
position: absolute !important; |
// // } |
||||||
left: 0px !important; |
// } |
||||||
right: auto !important; |
// &__left { |
||||||
bottom: 40px !important; |
// width: 40%; |
||||||
z-index: auto !important; |
// height: 100%; |
||||||
display: auto !important; |
// justify-content: center; |
||||||
justify-content: auto !important; |
// align-items: flex-end; |
||||||
padding: auto !important; |
// padding-left: 70px; |
||||||
margin: 0px !important; |
|
||||||
list-style: auto !important; |
|
||||||
color: white; |
|
||||||
width: 30% !important; |
|
||||||
justify-content: flex-start !important; |
|
||||||
|
|
||||||
span.active { |
// h1 { |
||||||
height: 80% !important; |
// font-size: calc(100vw / 55); |
||||||
width: 8px !important; |
// color: white; |
||||||
background-color: yellow !important; |
// 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 { |
@media screen and (min-width: 1441px) { |
||||||
background-color: yellow !important; |
.home-slider { |
||||||
height: 80% !important; |
max-width: 1440px; |
||||||
width: 8px !important; |
width: 100%; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.carousel-indicators li { |
@media screen and (min-width : 1008px) and (max-width: 1440px){ |
||||||
display: auto !important; |
.home-slider{ |
||||||
width: auto !important; |
max-width: 1250px; |
||||||
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; |
|
||||||
} |
} |
||||||
} |
} |
||||||
@ -1,65 +1,48 @@ |
|||||||
import React from "react"; |
import React, { Component } from "react"; |
||||||
import Avatar from "@mui/material/Avatar"; |
import { Link } from "react-router-dom"; |
||||||
import _ from "lodash"; |
import Carousel from "react-elastic-carousel"; |
||||||
|
|
||||||
export default function Header(props: any) { |
import dropdown from "../../../assets/icons/dropdown.png"; |
||||||
const { headerData, theme } = props; |
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const HomeSlider = ({ headerData}: any) => { |
||||||
return ( |
return ( |
||||||
<header |
<div className="home-slider d-flex"> |
||||||
className={_.join( |
<Carousel |
||||||
[ |
itemsToShow={1} |
||||||
"home-header", |
isRTL={true} |
||||||
theme === "light" ? "home-header-light" : "home-header-dark", |
enableTilt={false} |
||||||
], |
showArrows={true} |
||||||
" " |
pagination={true} |
||||||
)} |
enableAutoPlay={true} |
||||||
> |
> |
||||||
<div id="myCarousel" className="carousel slide" data-ride="carousel"> |
{headerData.map((item: any, i: any) => ( |
||||||
<div className="carousel-inner"> |
<div className="slider-header d-flex"> |
||||||
{headerData.map((item: any, i: any) => ( |
{/* < |
||||||
<div |
className="slider-header__right d-flex" |
||||||
className={i === 0 ? "item active" : "item"} |
style={{ backgroundColor: item.backgroundColor }} |
||||||
style={{ |
> */} |
||||||
background: `url(${ |
<img |
||||||
"https://dnvn.ir/api/v1/file/" + item.fileId |
src={`https://dnvn.ir/api/v1/file/${item.fileId}`} |
||||||
})`,
|
alt={item.title} |
||||||
}} |
/> |
||||||
// dataBackgroundImage={`https://dnvn.ir/api/v1/file/${item.fileId}`}
|
|
||||||
key={i} |
{/* <div |
||||||
|
style={{ backgroundColor: item.backgroundColor }} |
||||||
|
className="slider-header__left d-flex flex-column" |
||||||
> |
> |
||||||
<div className="home-header__cover"></div> |
<h1>{item.title}</h1> |
||||||
<div className="home-header__info d-flex flex-column"> |
<h2>{item.subTitle}</h2> |
||||||
<div className="home-header__info--author d-flex"> |
{item.buttonText && ( |
||||||
{item.authorImage && <Avatar src={item.authorImage} />} |
<Link to={item.link || "/"}>{item.buttonText}</Link> |
||||||
<div className="d-flex flex-column"> |
)} |
||||||
<h3>{item.extraText}</h3> |
</div> */} |
||||||
{/* <i>نویسنده</i> */} |
</div> |
||||||
</div> |
))} |
||||||
</div> |
</Carousel> |
||||||
{/* <h1>{(Number(i) + 1)}</h1> */} |
</div> |
||||||
<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> |
|
||||||
); |
); |
||||||
} |
}; |
||||||
|
|
||||||
|
export default HomeSlider; |
||||||
Loading…
Reference in new issue