webserver-lab/or-lcd-project-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit css

Browse Source
This commit is contained in:
Mojtaba Khorshidkolah
2026-03-25 12:42:54 +03:30
parent 75779ff28e
commit 44323d9a0e
5 changed files with 132 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -3,7 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <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> <title>بیمارستان شمال</title>
</head> </head>
<body> <body>

2
src/App.jsx
View File

@@ -19,7 +19,7 @@ function App() {
setError(null); setError(null);
try { try {
const data = await axios 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); .then((res) => res.data);
setData(data?.data); setData(data?.data);
setError(null); setError(null);

200
src/index.css
View File

@@ -1,41 +1,40 @@
@font-face { @font-face {
font-family: 'vazir'; font-family: "vazir";
src: url('/vazir/Vazirmatn-Regular.woff2'); src: url("/vazir/Vazirmatn-Regular.woff2");
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'vazir'; font-family: "vazir";
src: url('/vazir/Vazirmatn-Medium.woff2'); src: url("/vazir/Vazirmatn-Medium.woff2");
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'vazir'; font-family: "vazir";
src: url('/vazir/Vazirmatn-Bold.woff2'); src: url("/vazir/Vazirmatn-Bold.woff2");
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'vazir'; font-family: "vazir";
src: url('/vazir/Vazirmatn-SemiBold.woff2'); src: url("/vazir/Vazirmatn-SemiBold.woff2");
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'vazir'; font-family: "vazir";
src: url('/vazir/Vazirmatn-Light.woff2'); src: url("/vazir/Vazirmatn-Light.woff2");
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
:root { :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; line-height: 1.5;
color-scheme: light dark; color-scheme: light dark;
@@ -48,21 +47,14 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
body { body {
background-color: #fff; background-color: #fff;
min-height: 92vh;
overflow: hidden; /* جلوگیری از اسکرول کل صفحه */
margin: 0; margin: 0;
min-height: 100vh; padding: 0;
} }
.mainBox { .mainBox {
background-color: #373fd6; background-color: #373fd6;
color: #fff; color: #fff;
@@ -74,67 +66,87 @@ body {
font-size: 2rem; font-size: 2rem;
padding: 0 24px; padding: 0 24px;
} }
/* تنظیم ارتفاع کلی صفحه با کسر نوارهای تلویزیون */
.contentBox { .contentBox {
height: calc(100vh - 50px);
width: 100%; width: 100%;
display: grid; height: calc(100vh - 60px);
grid-template-rows: repeat(4,minmax(0,1fr)) !important; display: flex;
gap:5px; flex-direction: column;
gap: 5px;
box-sizing: border-box; /* حتما اضافه شود */
padding: 10px;
} }
.contentBoxRow { .contentBoxRow {
background-color: #d9dbfc; background-color: #d9dbfc;
display: grid;
width: 100%; width: 100%;
grid-template-columns: repeat(12,1fr);
height: 100%; 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%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
grid-column: span 2;
/* اگر می‌خواهید عرض ثابت داشته باشد */
flex-shrink: 0;
width: 180px;
} }
.status{
/* استایل دایره وضعیت */
.status {
border-radius: 50%; border-radius: 50%;
background-color: #a2a6f7 ; background-color: #a2a6f7;
width: 200px;
aspect-ratio: 1/1; /* جایگزین aspect-ratio برای تلویزیون */
width: 160px;
height: 160px;
text-align: center; text-align: center;
color: #373fd6; color: #373fd6;
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
display: grid;
place-items: center; /* جایگزین place-items برای تلویزیون */
display: flex;
justify-content: center;
align-items: center;
padding: 0 8px; padding: 0 8px;
box-sizing: border-box;
word-wrap: break-word; /* برای شکستن کلمات طولانی */
} }
/* استایل ردیف اطلاعات (اسلایدر) */
.infoRow { .infoRow {
grid-column: span 10; flex: 1; /* باقی فضای خالی را پر کند */
display: flex; height: 100%;
align-items: center; overflow: hidden;
position: relative; position: relative;
padding:4px 0;
} }
.infoBox { .infoBox {
background-color: white; background-color: white;
border:1px solid #ccc; border: 1px solid #ccc;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
.info-row-1{ .info-row-1 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -144,10 +156,10 @@ body {
font-size: 16px; font-size: 16px;
color: #575656; color: #575656;
} }
.info-row-1 span:nth-child(2){ .info-row-1 span:nth-child(2) {
font-size: 18px; font-size: 18px;
direction: ltr !important; direction: ltr !important;
color:#000; color: #000;
} }
/* CLASSES */ /* CLASSES */
@@ -160,47 +172,70 @@ body {
.grid { .grid {
display: grid; display: grid;
grid-template-columns:repeat(12,1fr) ; grid-template-columns: repeat(12, 1fr);
gap:1rem; gap: 1rem;
} }
.col-1{grid-column: span 1;} .col-1 {
.col-2{grid-column: span 2;} grid-column: span 1;
.col-3{grid-column: span 3;} }
.col-4{grid-column: span 4;} .col-2 {
.col-5{grid-column: span 5;} grid-column: span 2;
.col-6{grid-column: span 6;} }
.col-7{grid-column: span 7;} .col-3 {
.col-8{grid-column: span 8;} grid-column: span 3;
.col-9{grid-column: span 9;} }
.col-10{grid-column: span 10;} .col-4 {
.col-11{grid-column: span 11;} grid-column: span 4;
.col-12{grid-column: span 12;} }
.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){ /* .contentBox {
.mainBox{font-size: 20px;} grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
gap: 4px !important;
.contentBox{ } */
grid-template-rows: repeat(4,minmax(0,1fr)) !important; /* .status {
gap:4px !important;
}
.status{
font-size: 1.2rem; font-size: 1.2rem;
width: 90px; width: 90px;
} } */
.info-row-1 span:first-child { .info-row-1 span:first-child {
font-size: 13px; font-size: 13px;
color: #575656; color: #575656;
} }
.info-row-1 span:nth-child(2){ .info-row-1 span:nth-child(2) {
font-size: 14px; font-size: 14px;
direction: ltr !important; direction: ltr !important;
color:#000; color: #000;
} }
} }
.infoRow .swiper { .infoRow .swiper {
@@ -210,13 +245,13 @@ body {
} }
.swiper .swiper-button-prev svg { .swiper .swiper-button-prev svg {
color:#000; color: #000;
width: 30px !important; width: 30px !important;
height: 30px !important; height: 30px !important;
} }
.infoRow .infoSliderNavigation { .infoRow .infoSliderNavigation {
position:absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 10; z-index: 10;
@@ -224,14 +259,14 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
#infoSliderNavigationNext{ #infoSliderNavigationNext {
position: absolute; position: absolute;
right: 30px; right: 30px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer; cursor: pointer;
} }
#infoSliderNavigationPrev{ #infoSliderNavigationPrev {
position: absolute; position: absolute;
left: 30px; left: 30px;
top: 50%; top: 50%;
@@ -239,6 +274,5 @@ body {
cursor: pointer; cursor: pointer;
} }
#infoSliderNavigationPrev svg { #infoSliderNavigationPrev svg {
transform: rotate(-180deg) !important; transform: rotate(-180deg) !important;
} }

2
src/service/callApi.js
View File

@@ -1,7 +1,7 @@
import axios from "axios"; import axios from "axios";
const CallApi = axios.create({ const CallApi = axios.create({
baseURL:'http://10.1.20.234:5000/api/v1' baseURL:'http://10.1.1.127:8001/api/v1'
}) })

5
vite.config.js
View File

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