From 653f4e166688f712c1a52a9d6e6cea2a22c24268 Mon Sep 17 00:00:00 2001 From: limengnan <420004014@qq.com> Date: Thu, 15 Jan 2026 15:17:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8C=89=E7=85=A7=E6=95=88=E6=9E=9C=E5=9B=BE?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/renderer/src/assets/new/file.png | Bin 1301 -> 1307 bytes .../renderer/src/assets/new/leftjiantou2.png | Bin 502 -> 488 bytes .../renderer/src/assets/new/rightjiantou2.png | Bin 500 -> 502 bytes frontend/src/renderer/src/views/Dashboard.vue | 16 ++--- frontend/src/renderer/src/views/Detection.vue | 59 ++++++++++-------- .../renderer/src/views/DiagnosticMessage.vue | 8 +-- .../src/renderer/src/views/GenerateReport.vue | 4 +- frontend/src/renderer/src/views/Header.vue | 20 +++--- frontend/src/renderer/src/views/License.vue | 12 ++-- .../src/renderer/src/views/PatientCreate.vue | 3 +- .../src/renderer/src/views/PatientProfile.vue | 44 +++++++------ .../src/renderer/src/views/PhotoAlbum.vue | 13 ++++ .../src/renderer/src/views/PopUpReport.vue | 8 ++- 13 files changed, 113 insertions(+), 74 deletions(-) diff --git a/frontend/src/renderer/src/assets/new/file.png b/frontend/src/renderer/src/assets/new/file.png index b6c18002bbe76dd235885183d5c8f93055d53552..9c7dfec033eb8b615167c3fb52e291e6bf88db59 100644 GIT binary patch delta 605 zcmbQrHJfXL7n6d4fvKC3g}J4hp^K%Vp__q|fu)(7rMZE*lar~Fi;2nPEG8M4B1fEx zmN6N`Kut2orASGkxFjew%_=27ximL5uf)^ER;ePlKrbaT#R{s|0+-&&M$At2|C92k zFfcH7d%8G=RNUG#WxqF5qRcV*`qy)(b-A?YO}lYpjly$<4h6FpY8mwn5AIw_2{zd+ zs<9$?$5zv=+)7WB_!<@3ow6QPUN3#`$XE2FQr!0P?|n5tKh(_sUc0~Td&nzRhGyF* zR{JY#_Uzw#%g+2Ax6&d%zwXbkPfZr`nOy(kz|E&-0meR@E4aTg|Jk#%S|NM0Si^>> z13uQ~)yE4LXfSR)c;kBd(qy;t+12q4yJL<8Zsl^w@8B;97x%()q)3 zoh#ZW+RT~BbEccsF3a@H?c9#jsy=q|Z!T)Y+|=O-(|)#AY~KBNieD&UC4%cN(m%ho$7yq2=;ApWBx}L4|lks&{aBJItd()7^E`c?_ emBoJR9$-M delta 599 zcmbQuHI-|F7n6dUldGGNiMgY*lewXxp__q)xr?QXv5BjxlcTGdo00M4EG8M4A}5@R zmN6N`Kuxm1rASGkxFjew%_=27ximL5uf)^ER;ePlKrbaT#R{s|5|`e|M$At2kt;V> zGcYi=db&7I{nk;PA!*$HdSbsC>>A$N#8Wq~| zTp>ZDi}7@C86(G|Gy@|A#z(;+YU?czs+&7Z*R4Fc>0H+A1MPVaRC!vQ6}+#`Klh|M z?F75r-vd`I0|KX;gx+M}@?!XGkg>};b5_lHCc6oG>|0(l+*zJ^VAGZd_X-OP7~ZTs z{ZCrEe)ByRGyYD7Pxrg~ZWysWdDh6~ebn*5>p-^0Q)O4)ygvQFfhkX(J><*CVXWW7 zEE_f>q7oZ9P7Ewv$1JD6A#0w W_~z?D?~4i;fWXt$&t;ucLK6U%!SQtf diff --git a/frontend/src/renderer/src/assets/new/leftjiantou2.png b/frontend/src/renderer/src/assets/new/leftjiantou2.png index c39f96e48b57fe9a8966ccb2187e3382c23f6715..174f0703df0e793addbdcba212028b83cd8aa328 100644 GIT binary patch delta 412 zcmV;N0b~C51Ly;gR)2j-L_t(IPkocIP69y?hG$mnC`j%wJb(qQiFOoHP!KB+q9pyf+#h;+f;5suG#4Y?Q_8#;N5uaE`qcu6=H-BsY#S8R>-vi9!^>FDv zC-J-bJQCX7m&6Lp_s|4U+d9B)c&yH>?TB*D2f7B}ZsDOHZgFd2FR^0Tv80(g#GH|U zArm*K%rmQ4fxSl*d5%{R=H%#+w5cqWf4cP;N`x;)C_BEV2@Oh0{Bm|yE6O>0ElTpM z$nhWcFU>KKLVvg2S^{N`#RgYE2u*;r?nw$Zzc+#H#&h={+9fU@-_ikt5_lG zvz#!L$*Q`5T@5^&sdLMg*dUnzg7g@eNlGPejQiDqnAk9_bDuyBV@p8IA0wKNgxC<) zRo9HAb(l|o2P*ZZ_<_C_u^mw`_R_DF;03s1!olW@s}(=5*`L$?48wr{0000Evsvlt8pjcf*k!Qy5$IR-|j1_OZxe#iG-J{gRkr`&VydC&RIckY2KVDn6a zUtPUXk*!c4YsSBy$!AxuMX(1!v>%e_TyebURVdmYdRp$(@P9f}94~ms0FIoaa@ww$ zsx_y2PLw=~P_eeERy%c5b^$UWj+gX+7wprb4OT1+?IEK!Vg)bDQdiby#pZGZql*8y z%88<;1o}vKNkyMIrp((VdQLG05_wIE(H8+C6t*bbrtsU3Phcd#iWKtO?~8;M!`JCr zLm}aTk%+sUgMVSQG^HQ*l{BDFD`hX{$EGmuv%g4l0zWpvcyhmbs8K&Yfg4@Bffj|k z{J|d2WIw1jA?y@mjON^~;~9#KO90mUA$_o0=Z75=yWtW9Ikq(5nc{lhjwehlQoDvG zkKE8hmI-c8EK_0&m*1}tL{h>$|d6qXi;NhCrF!MNkh-d;3j#UC7Zd-Kh|?+)fJ zOeUzB2f6m(ABYgLh`21*>3<2-U%)c}zS9E&oTRFzXd@m7a(_5Nzzt?@0^$q@GOiqB1)toI zghlBPLIQLBB6c)3C05i>_s>Q3Ym*T)Nb zK@3Iw?oR%h6@RyATjy4XK4x*%TY3J<3mH z^!QvVM!%-v{q7Fc?DH>3e)wHvEa`!f4|^p#wh<2mgd@)~<3OZG{Vh6h?>zu~0jVpg U`${#yPyhe`07*qoM6N<$f{3lYVE_OC delta 424 zcmV;Z0ayO^1M~xsR)2{}L_t(IPkoZDPXj>^#b=h*Au13BMFPDvCho|v5%pGAPa;w`3ns2Ou75tZnFP=<0HPL_MH8cV zuh&!^n;1idUz*Qw8M2#j*>+sn4daNYvtg?$sZUStah-yY3|M%(+vLYEJt;P<9LcPo zLIEEAw;(1qpdjm~?Fo6@|C=>$b}#rfQEXT$>t&_s0R>sSL&g1un@g8a3NbGDKNz1hrlKi0Wj(K2AY`lhbZ3qi+VyHFk zkF1M{zdWhI0qn$X>a@uVuJBj01 zH-fQbbcGP(iiyKe#o?SQtEhN33mAXZYp8vjNkFB2>LEkahqSYh;e&8L0is_gGN3RP Sdg93d0000
-
+
+
{{ calculateAge(patientInfo.birth_date) }}岁
结束检测
-
+
@@ -37,7 +38,8 @@
-
+
@@ -46,7 +48,7 @@
-
+
@@ -705,7 +707,7 @@
提示
- +
本次检测未截图或录像操作，不予存档记录！
本次检测未截图操作，存档记录不可生成报告！
@@ -827,7 +829,7 @@
+ border: 1px solid #242E3D;"> @@ -836,7 +838,7 @@
+ border: 1px solid #242E3D;"> @@ -2707,7 +2709,7 @@ function viewClick(e){ width: 100%; height: 100%; background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); - border: 1px solid #262d40; + border: 1px solid #242E3D; border-radius: 4px; } .body-header-box{ @@ -2716,7 +2718,7 @@ function viewClick(e){ /* background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); */ background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); - border: 1px solid #262d40; + border: 1px solid #242E3D; border-radius: 4px; } .body-foot-box{ @@ -2726,7 +2728,7 @@ function viewClick(e){ /* background:linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); */ background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); - border: 1px solid #262d40; + border: 1px solid #242E3D; border-radius: 4px; } .body-title-display{ @@ -2796,10 +2798,9 @@ function viewClick(e){ .currencytext1{ min-width: 100px; font-size: 16px; - color: #FFFFFF; font-family: "Noto Sans SC"; font-weight: 400; - color: #D1D5DB; + color: rgba(255, 255, 255, 0.6); } .currencytext2{ font-weight: 700; @@ -2829,7 +2830,7 @@ function viewClick(e){ display: flex; align-items: center; justify-content: center; - height: calc(100% - 50px); + height: calc(100% - 70px); } .body-footbottom-left{ width: 28%; @@ -2899,7 +2900,7 @@ function viewClick(e){ height: 346px; /* background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); */ background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); - border: 1px solid #262d40; + border: 1px solid #242E3D; border-radius: 4px; } .body-userinfo-expandbox{ @@ -2910,7 +2911,7 @@ function viewClick(e){ height: 534px ; /* background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); */ background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); - border: 1px solid #262d40; + border: 1px solid #242E3D; border-radius: 4px; } .body-userinfo-box3{ @@ -2918,7 +2919,7 @@ function viewClick(e){ height: 100% ; /* background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); */ background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); - border: 1px solid #262d40; + border: 1px solid #242E3D; border-radius: 4px; } @@ -2928,7 +2929,7 @@ function viewClick(e){ height: calc(100% - 348px - 14px) ; /* background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); */ background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); - border: 1px solid #262d40; + border: 1px solid #242E3D; border-radius: 4px; margin-top: 15px; } @@ -2936,7 +2937,7 @@ function viewClick(e){ width: 100%; height: calc(100% - 534px - 14px) ; background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); - border: 1px solid #262d40; + border: 1px solid #242E3D; border-radius: 4px; margin-top: 15px; } @@ -3242,8 +3243,7 @@ function viewClick(e){ bottom: 0; margin: auto; border-radius: 10px; - background: #1b202c; - /* background: linear-gradient(135deg, rgba(53, 67, 90, 1) 0%, rgba(53, 67, 90, 1) 0%, rgba(62, 79, 105, 1) 99%, rgba(62, 79, 105, 1) 100%); */ + background: linear-gradient(135deg, rgba(53, 67, 90, 1) 0%, rgba(53, 67, 90, 1) 0%, rgba(62, 79, 105, 1) 99%, rgba(62, 79, 105, 1) 100%); } .pop-up-camera-container{ width: 668px; @@ -3329,7 +3329,7 @@ function viewClick(e){ .pop-up-camera-line{ width: 4px; height: 13px; - background-color: rgba(38, 111, 255, 1); + background-color: #0b94d5; margin-right: 3px; } .pop-up-camera-title{ @@ -3349,9 +3349,7 @@ function viewClick(e){ } .pop-up-camera-body :deep(.el-input__wrapper:hover) { - border-color: rgba(38, 111, 255, 1); - - + border-color: #14aaff; } .pop-up-camera-body :deep( .el-input__inner) { font-weight: 400; @@ -3537,7 +3535,18 @@ function viewClick(e){ height: 40px; } .pop-up-camera-display .el-select__wrapper:hover{ - border-color: #3d4c65; + border-color: #14aaff; box-shadow: 0 0 0 1px transparent inset; } +.pop-up-camera-display .el-checkbox__input.is-checked .el-checkbox__inner{ + background-color: #14aaff; + border-color: #14aaff; +} +.pop-up-camera-display .el-checkbox__inner{ + background-color: rgba(255, 255, 255, 0); + border-color: rgba(120, 120, 120, 1); +} +.pop-up-camera-display .el-checkbox__inner:hover{ + border-color: #14aaff; +} \ No newline at end of file diff --git a/frontend/src/renderer/src/views/DiagnosticMessage.vue b/frontend/src/renderer/src/views/DiagnosticMessage.vue index 329d7b38..c6b19289 100644 --- a/frontend/src/renderer/src/views/DiagnosticMessage.vue +++ b/frontend/src/renderer/src/views/DiagnosticMessage.vue @@ -6,7 +6,7 @@
诊断信息
-
+
@@ -352,7 +352,7 @@ async function handleDiagnosticInfo(status) { margin: auto; background: #35435a; border-radius: 10px; - box-shadow: 0px 0px 10px rgba(80, 80, 80, 1); + box-shadow: 0px 0px 10px #111821; border-width: 1px; border-style: solid; border-color: #1b2535; @@ -409,7 +409,7 @@ async function handleDiagnosticInfo(status) { color: #fff; } .DiagnosticMessage-container .el-textarea__inner:hover{ - box-shadow: 0 0 0 1px #266fff inset; + box-shadow: 0 0 0 1px #14aaff inset; } .DiagnosticMessage-container .form-container { width: 100%; @@ -450,7 +450,7 @@ async function handleDiagnosticInfo(status) { height: 40px; } .DiagnosticMessage-container .el-select__wrapper:hover{ - border-color: #3d4c65; + border-color: #14aaff; box-shadow: 0 0 0 1px transparent inset; } .DiagnosticMessage-container .el-select__placeholder{ diff --git a/frontend/src/renderer/src/views/GenerateReport.vue b/frontend/src/renderer/src/views/GenerateReport.vue index c1f0ab15..1b1a515e 100644 --- a/frontend/src/renderer/src/views/GenerateReport.vue +++ b/frontend/src/renderer/src/views/GenerateReport.vue @@ -516,11 +516,13 @@ function closePopUpOnlyReport(e) { width: 50%; border-right:1px solid rgb(208, 208, 208) ; box-sizing: border-box; + padding-right: 20px; + } .generateReport-container-rightbox{ width: 50%; box-sizing: border-box; - margin-left: 80px; + margin-left: 40px; } .displayflex{ display: flex; diff --git a/frontend/src/renderer/src/views/Header.vue b/frontend/src/renderer/src/views/Header.vue index dce30f1f..80a94050 100644 --- a/frontend/src/renderer/src/views/Header.vue +++ b/frontend/src/renderer/src/views/Header.vue @@ -16,14 +16,14 @@
-
{{ time }} {{ headerWeek }}
- +
{{ time }} {{ headerWeek }}
+
- 激活授权 + 激活授权 +
@@ -396,12 +397,15 @@ const activatePackage = async () => { .activatePackage{ width: 118px; height: 40px; - background: #266fff; - border-color: #266fff; + background: #0b94d5; + border-color: #0b94d5; color: #fff; } .activatePackage:hover{ background: #14AAFF; border-color: #14AAFF; } +.license_activate:hover{ + color: rgb(20, 170, 255); +} \ No newline at end of file diff --git a/frontend/src/renderer/src/views/PatientCreate.vue b/frontend/src/renderer/src/views/PatientCreate.vue index 4d8531ba..f24467df 100644 --- a/frontend/src/renderer/src/views/PatientCreate.vue +++ b/frontend/src/renderer/src/views/PatientCreate.vue @@ -566,7 +566,8 @@ const handleSave = async () => { font-family: 'Noto Sans SC'; font-weight: 400 !important; font-style: normal !important; - color: #FFFFFF !important; + color: rgba(255, 255, 255, 0.6) !important; + line-height: 40px !important; } diff --git a/frontend/src/renderer/src/views/PatientProfile.vue b/frontend/src/renderer/src/views/PatientProfile.vue index e969211c..f31f049a 100644 --- a/frontend/src/renderer/src/views/PatientProfile.vue +++ b/frontend/src/renderer/src/views/PatientProfile.vue @@ -93,7 +93,7 @@ :data="recordData" style=" margin-left: 10px; margin-top: 10px; - width: calc(100% - 20px);height: calc(100% - 70px);" + width: calc(100% - 20px);height: calc(100% - 88px);" @cell-click="selectRecord" @selection-change="handleSelectionChange" row-key="id" highlight-current-row> @@ -916,6 +916,7 @@ function viewPatientProfile() { //对比报告 message: '请选择相同类型报告对比', duration: 5000 }) + return } if(selectedData.value[0].data_ids.split(',').length == 1){ isAloneReportComparison.value = true @@ -1096,20 +1097,23 @@ historyAPI.VideoDelById(ids).then((response)=>{ .patientprofile-container-leftbox{ width: 550px; height: 350px; - background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); + background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); + border: 1px solid #242E3D; border-radius: 5px; } .patientprofile-container-leftbottombox{ margin-top: 15px; width: 550px; height: calc(100% - 350px - 15px) ; - background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); + background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); + border: 1px solid #242E3D; border-radius: 5px; } .patientprofile-container-rightbox{ width: calc(100% - 550px - 15px) ; height: 100%; - background: linear-gradient(135deg, rgba(42, 54, 73, 1) 0%, rgba(42, 54, 73, 1) 0%, rgba(34, 43, 56, 1) 100%, rgba(34, 43, 56, 1) 100%); + background: linear-gradient(135deg, #1a1e2a 0%, #222b38 100%); + border: 1px solid #242E3D; border-radius: 5px; } @@ -1313,6 +1317,9 @@ historyAPI.VideoDelById(ids).then((response)=>{ border-color: #0b94d5; } +.patient-profile-container .el-checkbox__inner:hover{ + border-color: #14aaff; +} .patient-profile-container .el-checkbox__input.is-indeterminate .el-checkbox__inner:before{ top: 6px; } @@ -1325,7 +1332,7 @@ historyAPI.VideoDelById(ids).then((response)=>{ background-color: #1f2a45 !important; } .patientprofile-son-text{ - font-weight: 700; + font-weight: 400; font-style: normal; font-size: 14px; color: #FFFFFF; @@ -1345,7 +1352,7 @@ historyAPI.VideoDelById(ids).then((response)=>{ } .patientprofile-container-databg{ width: 100%; - height: calc(100% - 40px); + height: calc(100% - 52px); background-color: rgba(55, 65, 81, 1); border-radius: 10px; display: flex; @@ -1368,12 +1375,12 @@ historyAPI.VideoDelById(ids).then((response)=>{ .patientprofile-container-video{ width: 100%; height: 32%; - margin-top: 5px; + margin-top: 27px; } .patientprofile-container-info{ width: 100%; - height: 36%; - margin-top: 5px; + height: 29%; + margin-top: 27px; } .patientprofile-container-data-displaycup{ @@ -1393,10 +1400,11 @@ historyAPI.VideoDelById(ids).then((response)=>{ margin-right: 3px; } .patientprofile-container-data-title{ - font-weight: 700; + font-weight: 400; font-style: normal; - font-size: 15px; + font-size: 20px; color: #FFFFFF; + margin-left: 5px; } .button-width70{ width: 70px !important; @@ -1547,10 +1555,10 @@ historyAPI.VideoDelById(ids).then((response)=>{ height: calc(100% - 45px); } .patientprofile-son-detectiontext{ - font-weight: 700; + font-weight: 400; font-style: normal; font-size: 14px; - color: #00CC00; + color: #3BF2C6; margin-left: 20px; } @@ -1776,16 +1784,16 @@ historyAPI.VideoDelById(ids).then((response)=>{ .patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td{ background-color: #194764 !important; - border-top:1px solid rgba(38, 111, 255, 1); - border-bottom:1px solid rgba(38, 111, 255, 1) + border-top:1px solid #14aaff; + border-bottom:1px solid #14aaff } .patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td:last-child{ - border-right:1px solid rgba(38, 111, 255, 1); + border-right:1px solid #14aaff; } .patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td:first-child{ - border-left:1px solid rgba(38, 111, 255, 1); + border-left:1px solid #14aaff; } .patient-profile-container .patientprofile-container .el-table .el-table__row.current-row:last-child td{ - border-bottom:1px solid rgba(38, 111, 255, 1) + border-bottom:1px solid #14aaff } diff --git a/frontend/src/renderer/src/views/PhotoAlbum.vue b/frontend/src/renderer/src/views/PhotoAlbum.vue index 32380466..ba5bbcb1 100644 --- a/frontend/src/renderer/src/views/PhotoAlbum.vue +++ b/frontend/src/renderer/src/views/PhotoAlbum.vue @@ -423,4 +423,17 @@ onMounted(() => { background-image: url(@/assets/process/del-selected.png); margin-right:5px ; } + +.PhotoAlbum-bg .el-checkbox__inner{ + background-color: rgba(255, 255, 255, 0); + border-color: rgba(120, 120, 120, 1); +} +.PhotoAlbum-bg .el-checkbox__input.is-checked .el-checkbox__inner{ + background-color: #0b94d5; + border-color: #0b94d5; + +} +.PhotoAlbum-bg .el-checkbox__inner:hover{ + border-color: #14aaff; +} \ No newline at end of file diff --git a/frontend/src/renderer/src/views/PopUpReport.vue b/frontend/src/renderer/src/views/PopUpReport.vue index ac2d260c..e400b414 100644 --- a/frontend/src/renderer/src/views/PopUpReport.vue +++ b/frontend/src/renderer/src/views/PopUpReport.vue @@ -73,7 +73,7 @@ style="width: 100%;height: 100%; object-fit:contain; ">
头部姿态
-
+
倾斜角
旋转角
@@ -150,7 +150,7 @@ style="width: 100%;height: 100%; object-fit:contain; ">
头部姿态
-
+
倾斜角
旋转角
@@ -463,11 +463,13 @@ function getFormattedTime() { width: calc(50% - 5px); border-right:1px solid rgb(208, 208, 208) ; box-sizing: border-box; + padding-right: 5px; } .PopUpReport-container-rightbox{ - margin-left: 10px; + margin-left: 5px; width: calc(50% - 5px); box-sizing: border-box; + padding-right: 5px; } .displayflex{ display: flex;