digikala danovin added

master
mahdi andalib 3 years ago
parent d92e0b3880
commit 61405cb4ed
  1. 57
      src/components/Digikala/Banners.js
  2. 7
      src/components/Digikala/Offer.js
  3. BIN
      src/components/Digikala/danovin.jpg
  4. BIN
      src/components/Digikala/greeeeen.jpg
  5. 2
      src/components/Digikala/index.js
  6. 11
      src/components/Digikala/index.scss

@ -0,0 +1,57 @@
import React from "react";
import pic2 from "./pic2.jpg";
import danovin from "./danovin.jpg";
import greeeeen from "./greeeeen.jpg";
const Banners = ({ mainBanner, leftBanner, midTopBanner, midBottomBanner }) => {
return (
<div
className="flex justify-between w-10/12 mx-auto my-10"
style={{
height: "400px",
}}
>
<div
className={`h-full w-1/2 rounded-xl flex items-center`}
style={{
background: mainBanner ? "" : "rgba(134,160,185,0.16)",
}}
>
<img src={danovin} className="rounded-xl h-full" />
</div>
<div className="flex h-full w-1/2 ">
<div className="flex flex-col w-1/2 h-full px-6 justify-center items-between">
<div
className={`${midTopBanner ? "" : "h-1/2 "} w-full rounded-xl mb-2`}
style={{
background: midTopBanner ? "" : "rgba(134,160,185,0.16)",
}}
>
<img src={pic2} className="rounded-xl" />
</div>
<div
className={`${
midBottomBanner ? "" : "h-1/2 "
} w-full rounded-xl mt-2`}
style={{
background: midBottomBanner ? "" : "rgba(134,160,185,0.16)",
}}
>
<img src={pic2} className="rounded-xl" />
</div>
</div>
<div
className=" h-full w-1/2 rounded-xl"
style={{
background: leftBanner ? "" : "rgba(134,160,185,0.16)",
}}
>
<img src={greeeeen} className="rounded-xl h-full" />
</div>
</div>
</div>
);
};
export default Banners;

@ -5,12 +5,11 @@ import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "./index";
import "./index.scss";
import leftArrow from "./white-left-arrow.svg";
import General from "./General.png";
import oloom4 from "./oloom4.jpg";
import o2 from "./o2.jpg";
import o3 from "./o3.jpg";
import r1 from "./r1.jpg";
@ -39,11 +38,11 @@ const Offer = ({ products }) => {
</button>
</div>
{/* left */}
<div className="w-10/12 flex flex-row items-center rounded-lg bg-white">
<div className="w-10/12 flex flex-row items-center rounded-lg bg-white cursor-pointer">
<Swiper
// spaceBetween={0}
slidesPerView={5}
navigation
// navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}
onSlideChange={() => console.log("slide change")}

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

@ -3,11 +3,13 @@ import ImageSlider from "./ImageSlider";
import { SliderData } from "./SliderData";
import Categories from "./Categories";
import Offer from "./Offer";
import Banners from "./Banners";
const Digikala = () => {
return (
<div>
<ImageSlider slides={SliderData} />
<Banners />
<Categories />
<Offer />
</div>

@ -1,11 +0,0 @@
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.tabbar {
cursor: pointer;
}
.active2,
.active2 li a {
cursor: move !important;
}
Loading…
Cancel
Save