diff --git a/index.html b/index.html index 6ad7935..b31bfe8 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,10 @@ - + بیمارستان شمال diff --git a/src/App.jsx b/src/App.jsx index 39eeeba..40686af 100644 --- 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); diff --git a/src/index.css b/src/index.css index 362a508..d67c113 100644 --- 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,22 +47,15 @@ -moz-osx-font-smoothing: grayscale; } - - - body { background-color: #fff; + min-height: 92vh; + overflow: hidden; /* جلوگیری از اسکرول کل صفحه */ margin: 0; - min-height: 100vh; + padding: 0; } - - - - - - -.mainBox { +.mainBox { background-color: #373fd6; color: #fff; text-align: center; @@ -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; - - -} -.contentBoxRow { - background-color: #d9dbfc; - display: grid; - width: 100%; - grid-template-columns: repeat(12,1fr); - height: 100%; - overflow: hidden; - min-height: 0; - + height: calc(100vh - 60px); + display: flex; + flex-direction: column; + gap: 5px; + box-sizing: border-box; /* حتما اضافه شود */ + padding: 10px; } -.statusBox{ - +.contentBoxRow { + background-color: #d9dbfc; + width: 100%; + height: 100%; + + /* مهم: این خط اضافه شد تا فرزندان کنار هم قرار بگیرند */ + display: flex; + align-items: center; /* عمودی وسط چین */ + gap: 20px; /* فاصله بین دایره وضعیت و اسلایدر */ + + overflow: hidden; + min-height: 0; /* بسیار مهم برای فیکس شدن ارتفاع در فلکس */ + flex: 1; +} + +/* استایل باکس وضعیت (دایره سمت راست) */ +.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; - -} \ No newline at end of file + transform: rotate(-180deg) !important; +} diff --git a/src/service/callApi.js b/src/service/callApi.js index 0c24ce1..b131865 100644 --- 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' }) diff --git a/vite.config.js b/vite.config.js index dde53ea..69d621e 100644 --- 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 - // } + })