edit css

2026-03-25 12:42:54 +03:30
parent 75779ff28e
commit 44323d9a0e
5 changed files with 132 additions and 98 deletions
--- a/index.html
+++ b/index.html
@@ -3,7 +3,10 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
    <title>بیمارستان شمال</title>
  </head>
  <body>
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,7 +19,7 @@ function App() {
    setError(null);
    try {
      const data = await axios
-        .get("http://10.1.20.234:5000/api/v1/get")
+        .get("http://10.1.1.127:8001/api/v1/get")
        .then((res) => res.data);
      setData(data?.data);
      setError(null);
--- a/src/index.css
+++ b/src/index.css
@@ -1,41 +1,40 @@
-
@font-face {
-  font-family: 'vazir';
-  src: url('/vazir/Vazirmatn-Regular.woff2');
+  font-family: "vazir";
+  src: url("/vazir/Vazirmatn-Regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
 }
@font-face {
-  font-family: 'vazir';
-  src: url('/vazir/Vazirmatn-Medium.woff2');
+  font-family: "vazir";
+  src: url("/vazir/Vazirmatn-Medium.woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
 }
@font-face {
-  font-family: 'vazir';
-  src: url('/vazir/Vazirmatn-Bold.woff2');
+  font-family: "vazir";
+  src: url("/vazir/Vazirmatn-Bold.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
 }
@font-face {
-  font-family: 'vazir';
-  src: url('/vazir/Vazirmatn-SemiBold.woff2');
+  font-family: "vazir";
+  src: url("/vazir/Vazirmatn-SemiBold.woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
 }
@font-face {
-  font-family: 'vazir';
-  src: url('/vazir/Vazirmatn-Light.woff2');
+  font-family: "vazir";
+  src: url("/vazir/Vazirmatn-Light.woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
 }
 :root {
-  font-family: vazir,system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: vazir, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;

  color-scheme: light dark;
@@ -48,21 +47,14 @@
  -moz-osx-font-smoothing: grayscale;
 }

-
-
-
 body {
  background-color: #fff;
+  min-height: 92vh;
+  overflow: hidden; /* جلوگیری از اسکرول کل صفحه */
  margin: 0;
-    min-height: 100vh;
+  padding: 0;
 }

-
-
-
-
-
-
 .mainBox {
  background-color: #373fd6;
  color: #fff;
@@ -74,67 +66,87 @@ body {
  font-size: 2rem;
  padding: 0 24px;
 }
+/* تنظیم ارتفاع کلی صفحه با کسر نوارهای تلویزیون */
 .contentBox {
-  height: calc(100vh - 50px);
  width: 100%;
-  display: grid;
-  grid-template-rows: repeat(4,minmax(0,1fr)) !important;
-  gap:5px;
-  
-  
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  box-sizing: border-box; /* حتما اضافه شود */
+  padding: 10px;
 }
+
 .contentBoxRow {
  background-color: #d9dbfc;
-  display: grid;
  width: 100%;
-  grid-template-columns: repeat(12,1fr);
  height: 100%;
-  overflow: hidden;
-  min-height: 0;

+  /* مهم: این خط اضافه شد تا فرزندان کنار هم قرار بگیرند */
+  display: flex;
+  align-items: center; /* عمودی وسط چین */
+  gap: 20px; /* فاصله بین دایره وضعیت و اسلایدر */
+
+  overflow: hidden;
+  min-height: 0; /* بسیار مهم برای فیکس شدن ارتفاع در فلکس */
+  flex: 1;
 }

-.statusBox{
-  
+/* استایل باکس وضعیت (دایره سمت راست) */
+.statusBox {
+  /* ارتفاع را خودکار بگذارید تا توسط فلکس کنترل شود یا 100% */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
-  grid-column: span 2;
+
+  /* اگر می‌خواهید عرض ثابت داشته باشد */
+  flex-shrink: 0;
+  width: 180px;
 }
-.status{
+
+/* استایل دایره وضعیت */
+.status {
  border-radius: 50%;
-  background-color: #a2a6f7 ;
- width: 200px;
-  aspect-ratio: 1/1;
+  background-color: #a2a6f7;
+
+  /* جایگزین aspect-ratio برای تلویزیون */
+  width: 160px;
+  height: 160px;
+
  text-align: center;
  color: #373fd6;
  font-size: 2rem;
  font-weight: bold;
-  display: grid;
-  place-items: center;
+
+  /* جایگزین place-items برای تلویزیون */
+  display: flex;
+  justify-content: center;
+  align-items: center;

  padding: 0 8px;
+  box-sizing: border-box;
+  word-wrap: break-word; /* برای شکستن کلمات طولانی */
 }
+
+/* استایل ردیف اطلاعات (اسلایدر) */
 .infoRow {
-    grid-column: span 10;
-  display: flex;
-  align-items: center;
+  flex: 1; /* باقی فضای خالی را پر کند */
+  height: 100%;
+  overflow: hidden;
  position: relative;
-  padding:4px 0;
 }
 .infoBox {
  background-color: white;
-  border:1px solid #ccc;
+  border: 1px solid #ccc;
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
-  
 }
-.info-row-1{
+.info-row-1 {
  display: flex;
  align-items: center;
  justify-content: center;
@@ -144,10 +156,10 @@ body {
  font-size: 16px;
  color: #575656;
 }
-.info-row-1 span:nth-child(2){
+.info-row-1 span:nth-child(2) {
  font-size: 18px;
  direction: ltr !important;
-  color:#000;
+  color: #000;
 }

 /* CLASSES */
@@ -160,47 +172,70 @@ body {

 .grid {
  display: grid;
-  grid-template-columns:repeat(12,1fr) ;
-  gap:1rem;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
 }

-.col-1{grid-column: span 1;}
-.col-2{grid-column: span 2;}
-.col-3{grid-column: span 3;}
-.col-4{grid-column: span 4;}
-.col-5{grid-column: span 5;}
-.col-6{grid-column: span 6;}
-.col-7{grid-column: span 7;}
-.col-8{grid-column: span 8;}
-.col-9{grid-column: span 9;}
-.col-10{grid-column: span 10;}
-.col-11{grid-column: span 11;}
-.col-12{grid-column: span 12;}
+.col-1 {
+  grid-column: span 1;
+}
+.col-2 {
+  grid-column: span 2;
+}
+.col-3 {
+  grid-column: span 3;
+}
+.col-4 {
+  grid-column: span 4;
+}
+.col-5 {
+  grid-column: span 5;
+}
+.col-6 {
+  grid-column: span 6;
+}
+.col-7 {
+  grid-column: span 7;
+}
+.col-8 {
+  grid-column: span 8;
+}
+.col-9 {
+  grid-column: span 9;
+}
+.col-10 {
+  grid-column: span 10;
+}
+.col-11 {
+  grid-column: span 11;
+}
+.col-12 {
+  grid-column: span 12;
+}

+@media screen and (max-width: 1024px) {
+  /* .mainBox {
+    font-size: 20px;
+  } */

-@media screen and (max-width :1024px){
-  .mainBox{font-size: 20px;}
- 
-  .contentBox{
-    grid-template-rows: repeat(4,minmax(0,1fr)) !important;
-    gap:4px !important;
-
-  }
-  .status{
+  /* .contentBox {
+    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
+    gap: 4px !important;
+  } */
+  /* .status {
    font-size: 1.2rem;
    width: 90px;
-  }
+  } */

  .info-row-1 span:first-child {
    font-size: 13px;
    color: #575656;
  }
-  .info-row-1 span:nth-child(2){
+  .info-row-1 span:nth-child(2) {
    font-size: 14px;
    direction: ltr !important;
-    color:#000;
+    color: #000;
  }
-
 }

 .infoRow .swiper {
@@ -210,13 +245,13 @@ body {
 }

 .swiper .swiper-button-prev svg {
-  color:#000;
+  color: #000;
  width: 30px !important;
  height: 30px !important;
 }

 .infoRow .infoSliderNavigation {
-  position:absolute;
+  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
@@ -224,14 +259,14 @@ body {
  align-items: center;
  justify-content: space-between;
 }
-#infoSliderNavigationNext{
+#infoSliderNavigationNext {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
 }
-#infoSliderNavigationPrev{
+#infoSliderNavigationPrev {
  position: absolute;
  left: 30px;
  top: 50%;
@@ -239,6 +274,5 @@ body {
  cursor: pointer;
 }
 #infoSliderNavigationPrev svg {
-    transform: rotate(-180deg) !important;
-
+  transform: rotate(-180deg) !important;
 }
--- a/src/service/callApi.js
+++ b/src/service/callApi.js
@@ -1,7 +1,7 @@
 import axios from "axios";

 const CallApi = axios.create({
-    baseURL:'http://10.1.20.234:5000/api/v1'
+    baseURL:'http://10.1.1.127:8001/api/v1'
 })


--- a/vite.config.js
+++ b/vite.config.js
@@ -4,8 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
-  // server:{
-  //   host:'10.1.21.12',
-  //   port:5173
-  // }
+
 })