|
|
@ -20,6 +20,7 @@ const Ecommerce = () => { |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className="mt-24"> |
|
|
|
{/* 第一行四个盒子 */} |
|
|
|
<div className="flex flex-wrap lg:flex-nowrap justify-center "> |
|
|
|
<div className="bg-white dark:text-gray-200 dark:bg-secondary-dark-bg h-44 rounded-xl w-full lg:w-80 p-8 pt-9 m-3 bg-hero-pattern bg-no-repeat bg-cover bg-center"> |
|
|
|
<div className="flex justify-between items-center"> |
|
|
@ -27,6 +28,9 @@ const Ecommerce = () => { |
|
|
|
<p className="font-bold text-gray-400">Earnings</p> |
|
|
|
<p className="text-2xl">$63,448.78</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
{/* 模范button组件 */} |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
style={{ backgroundColor: currentColor }} |
|
|
@ -34,6 +38,8 @@ const Ecommerce = () => { |
|
|
|
> |
|
|
|
<BsCurrencyDollar /> |
|
|
|
</button> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<div className="mt-6"> |
|
|
|
<Button |
|
|
@ -46,7 +52,7 @@ const Ecommerce = () => { |
|
|
|
</div> |
|
|
|
<div className="flex m-3 flex-wrap justify-center gap-1 items-center"> |
|
|
|
{earningData.map((item) => ( |
|
|
|
<div key={item.title} className="bg-white h-44 dark:text-gray-200 dark:bg-secondary-dark-bg md:w-56 p-4 pt-9 rounded-2xl "> |
|
|
|
<div key={item.title} className="bg-white h-44 dark:text-gray-200 dark:bg-secondary-dark-bg md:w-56 p-4 pt-9 rounded-2xl "> |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
style={{ color: item.iconColor, backgroundColor: item.iconBg }} |
|
|
@ -66,8 +72,10 @@ const Ecommerce = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
{/* 第二行放一个时间轴图表组件 */} |
|
|
|
<div className="flex gap-10 flex-wrap justify-center"> |
|
|
|
<div className="bg-white dark:text-gray-200 dark:bg-secondary-dark-bg m-3 p-4 rounded-2xl md:w-780 "> |
|
|
|
{/* 实际的盒子 */} |
|
|
|
<div className="bg-white dark:text-gray-200 dark:bg-secondary-dark-bg m-3 p-4 rounded-2xl" > |
|
|
|
<div className="flex justify-between"> |
|
|
|
<p className="font-semibold text-xl">Revenue Updates</p> |
|
|
|
<div className="flex items-center gap-4"> |
|
|
@ -103,7 +111,7 @@ const Ecommerce = () => { |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="mt-5"> |
|
|
|
<SparkLine currentColor={currentColor} id="line-sparkLine" type="Line" height="80px" width="250px" data={SparklineAreaData} color={currentColor} /> |
|
|
|
<SparkLine currentColor={currentColor} id="line-sparkLine" type="Line" height="80px" width="800px" data={SparklineAreaData} color={currentColor} /> |
|
|
|
</div> |
|
|
|
<div className="mt-10"> |
|
|
|
<Button |
|
|
@ -114,12 +122,13 @@ const Ecommerce = () => { |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<Stacked currentMode={currentMode} width="320px" height="360px" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
{/* <div> |
|
|
|
<div |
|
|
|
className=" rounded-2xl md:w-400 p-4 m-3" |
|
|
|
style={{ backgroundColor: currentColor }} |
|
|
@ -148,7 +157,7 @@ const Ecommerce = () => { |
|
|
|
<Pie id="pie-chart" data={ecomPieChartData} legendVisiblity={false} height="160px" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> */} |
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="flex gap-10 m-4 flex-wrap justify-center"> |
|
|
|