progress

2026-03-16 14:42:04 +08:00
parent dcddc14d7e
commit fbeb3a509a
11 changed files with 572 additions and 239 deletions
--- a/frontend/src/app/projects/view/service-card/styles.module.css
+++ b/frontend/src/app/projects/view/service-card/styles.module.css
@@ -0,0 +1,116 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+  cursor: pointer;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list > p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  overflow-wrap: anywhere;
+}
+
+.list > p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}
+.servicesHealth,
+.servicesStatus {
+  display: flex;
+  align-items: start;
+  gap: 4px;
+  width: 100%;
+  align-self: stretch;
+}
+.servicesHealth > div,
+.servicesStatus > div {
+  display: flex;
+  padding: 4px 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  border-radius: 6px;
+  border: 1px solid rgba(22, 159, 49, 0.25);
+  background: rgba(22, 159, 49, 0.05);
+  color: #179f31;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.servicesHealth > div:nth-child(2) {
+  border: 1px solid rgba(207, 176, 0, 0.25);
+  background: rgba(207, 176, 0, 0.05);
+  color: #cfb000;
+}
+.servicesHealth > div:nth-child(2) > div {
+  color: #cfb000;
+}
+.servicesHealth > div:nth-child(3) {
+  border: 1px solid rgba(117, 118, 153, 0.25);
+  background: rgba(117, 118, 153, 0.05);
+  color: #757696;
+}
+.servicesHealth > div:nth-child(3) > div {
+  color: #757696;
+}
+.servicesHealth > div > div,
+.servicesStatus > div > div {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #179f31;
+  font-family: Inter;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.servicesStatus > div:nth-child(1) {
+  border-radius: 6px;
+  border: 1px solid rgba(80, 241, 255, 0.25);
+  background: rgba(80, 241, 255, 0.05);
+  color: #82eeff;
+}
+.servicesStatus > div:nth-child(1) > div {
+  color: #82eeff;
+}
+.servicesStatus > div:nth-child(2) {
+  border-radius: 6px;
+  border: 1px solid rgba(89, 127, 241, 0.25);
+  background: rgba(89, 127, 241, 0.05);
+  color: #617ee9;
+}
+.servicesStatus > div:nth-child(2) > div {
+  color: #617ee9;
+}