diff --git a/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.html b/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.html index 70691ef..30d616e 100644 --- a/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.html +++ b/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.html @@ -3,7 +3,11 @@
-
+
+
+ Online Doctor Consultation - Medical Oncology + +
@@ -13,26 +17,30 @@
{{consultant.name}}
- {{consultant.specialist}}
- {{consultant.year}}
- {{consultant.qualification}}
- Starts at ₹ {{consultant.payment}}
+ {{consultant.specialist}}
+ {{consultant.year}}
+ {{consultant.qualification}}
+ Starts at ₹ {{consultant.payment}}
- + transcribe - {{consultant.language}} + {{consultant.language}} - + location_on - {{consultant.city}} + {{consultant.city}} + + access_time + {{consultant.time}} +
diff --git a/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.scss b/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.scss index 45b1df0..d8bd382 100644 --- a/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.scss +++ b/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.scss @@ -6,7 +6,7 @@ $black_30: rgba(0, 0, 0, 0.3); $color_red_orange_approx: #4caf50; $black_60: rgba(0, 0, 0, 0.6); .consultant-content { - padding: 1.5rem 1.5rem; + padding: 0rem 0.5rem 1rem; padding-bottom: 4rem; } .scrollHV { @@ -21,13 +21,57 @@ $black_60: rgba(0, 0, 0, 0.6); } } .consultant-span{ - font-size: 13px; - color: rgba(0, 0, 0, 0.54); + font-size: 10px; + color: #0087ba; font-weight: 600; - line-height: 23px; } +.consultant-year{ + font-size: 12px; + color: #0087ba; + font-weight: 700; +} +.consultant-qualification{ + font-size: 12px; + color: #658F9B; + font-weight: 600; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.consultant-amount{ + color: #658F9B; + margin: 0; + font-size: 12px !important; + line-height: normal; +} +.consultant-pay{ + color: #0087BA; + font-size: 15px; +} +.consultant-language{ + color: #658F9B; + padding: 2px 0; + font-size: 12px; + word-break: break-word; + line-height: 16px; + white-space: nowrap; + text-overflow: ellipsis; +} +.consultant-img { + top: 25px; + left: 25px; + height: 24px; + display: flex; + text-align: center; + align-items: center; + border-radius: 6px; + justify-content: center; +} +// .mb{ +// margin-bottom: 0.20rem; +// } .consultant-card-cover { - padding: 0rem 8rem; + padding: 0rem 6rem; position: relative; background-size: cover; margin-left: -8rem; @@ -57,9 +101,10 @@ $black_60: rgba(0, 0, 0, 0.6); overflow-y: auto!important; background-color: #ffff; } -.consultant-profile{ - margin-left: -2rem; -} +// .consultant-profile{ +// margin-left: -2rem; +// } mat-icon{ - color: #207b68f2; + color: #979797; + font-size: 20px; } \ No newline at end of file diff --git a/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.ts b/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.ts index cc47dd6..b65e139 100644 --- a/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.ts +++ b/ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.ts @@ -19,9 +19,10 @@ export class ConsultantsListComponent implements OnInit { payment: '800', language: 'TAMIL, ENGILSH', city: 'Apollo Hospital Chennai', - country: 'USA', - cover:'assets/images/night.jpg', - image:'assets/images/face1.jpg' + image:'assets/images/face1.jpg', + time: 'Available in 3 mins', + img:'assets/images/stethoscope.png' + },{ name: 'Dr. Indhu Mathi', specialist: 'ORTHOPAEDICS', @@ -30,7 +31,9 @@ export class ConsultantsListComponent implements OnInit { payment: '800', language: 'TAMIL, ENGILSH', city: 'Apollo Hospital Chennai', - image:'assets/images/face2.jpg' + image:'assets/images/face2.jpg', + time: 'Available in 4 mins', + img:'assets/images/stethoscope.png' },{ name: 'Dr. Gaurav Kumar', specialist: 'BREAST SURGERY', @@ -39,7 +42,9 @@ export class ConsultantsListComponent implements OnInit { payment: '800', language: 'TAMIL, ENGILSH', city: 'Apollo Hospital Chennai', - image:'assets/images/face3.jpg' + image:'assets/images/face3.jpg', + time: 'Available in 5 mins', + img:'assets/images/stethoscope.png' },{ name: 'Dr. Saloni Sinha', specialist: 'CARDIOLOGY', @@ -48,7 +53,9 @@ export class ConsultantsListComponent implements OnInit { payment: '800', language: 'TAMIL, ENGILSH', city: 'Apollo Hospital Chennai', - image:'assets/images/face4.jpg' + image:'assets/images/face4.jpg', + time: 'Available in 6 mins', + img:'assets/images/stethoscope.png' },{ name: 'Dr. Padmaja', specialist: 'DIABETOLOGY', @@ -57,7 +64,9 @@ export class ConsultantsListComponent implements OnInit { payment: '800', language: 'TAMIL, ENGILSH', city: 'Apollo Hospital Chennai', - image:'assets/images/face5.jpg' + image:'assets/images/face5.jpg', + time: 'Available in 7 mins', + img:'assets/images/stethoscope.png' },{ name: 'Dr. Pradeep ', specialist: 'ENDOCRINOLOGY', @@ -66,7 +75,9 @@ export class ConsultantsListComponent implements OnInit { payment: '800', language: 'TAMIL, ENGILSH', city: 'Apollo Hospital Chennai', - image:'assets/images/face6.jpg' + image:'assets/images/face6.jpg', + time: 'Available in 8 mins', + img:'assets/images/stethoscope.png' } ]; } diff --git a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html index 95a100a..c7784ca 100644 --- a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html +++ b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html @@ -1,11 +1,21 @@
-
- - - - {{serviceListDetails.serviceName}} - +
+
+ +
+
+
+ Online Doctor Consultation - Allergist and Clinical Immunologist +
+
+
+ + {{serviceListDetails.serviceName}} + {{serviceListDetails.info}} + Arrow Right - Online Doctor Consultation + {{serviceListDetails.specialties}}
+
diff --git a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss index e69de29..d7ca3a2 100644 --- a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss +++ b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss @@ -0,0 +1,78 @@ +$white: #fff; +$black_10: rgba(0, 0, 0, 0.1); +$black_30: rgba(0, 0, 0, 0.3); +.Specialties-list-card { + background: $white; + box-shadow: 0 2px 6px $black_10; + transition: all 0.3s ease-in-out 0s; + &:hover { + box-shadow: 0 0 21px $black_30; + } +} +.consultant-card-cover { + // padding: 0rem 6rem; + position: relative; + background-size: cover; + margin-left: 0.5rem; + margin-right: 1rem; +} +.consultant-thumb { + // position: absolute; + // margin-top: 20px; + // margin-left: -45rem; + img { + border: 5px solid #fff;; + border-radius: 100%; + height: 50px; + width: 50px; + // margin-right: -8rem; + } +} +.service-info{ + line-height: 1.5rem!important; +} +.info{ + font-size: 12px!important; + font-weight: 500; + color: rgba(2,71,91,.6); + padding: 0 0 10px; + max-height: 38px; + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.service-Specialties{ + font-size: 10px; + font-weight: 600; + color: #02475b; + padding: 10px 0 0; + border-top: 1px solid rgba(2,71,91,.3); +} + +.Specialties-rightArrow{ + top: 1.5rem; + right: 0; + position: absolute; + padding-right: 0.5rem; +} +.flx{ + width: 47%; +} +.Specialties-spContent{ + width: 100%; + padding: 0 10px 0 0; + position: relative; + min-height: 80px; +} +.mb{ + margin-bottom: 0.60rem; +} +::ng-deep body .mat-card .mat-card-title { + padding-left: 0rem!important; +} +::ng-deep body .mat-card .mat-card-subtitle { + padding-left: 0rem!important; +} + + diff --git a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts index 8f4f60e..d144597 100644 --- a/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts +++ b/ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts @@ -6,8 +6,10 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./service-list.component.scss'] }) export class ServiceListComponent implements OnInit { - serviceName = ['ENT', 'Orthopaedics', 'Breast surgery','Cardiology','Diabetology','Endocrinology','Infertility']; - doctors = ['Dr. Sanjeev', 'Dr. Gopi', 'Dr. Surendar', 'Dr. Kamali', 'Dr. Venkatadesh', 'Dr.Javeed', 'Dr.Cyril']; + // doctors = ['Dr. Sanjeev', 'Dr. Gopi', 'Dr. Surendar', 'Dr. Kamali', 'Dr. Venkatadesh', 'Dr.Javeed', 'Dr.Cyril']; + serviceName = ['Allergist and Clinical Immunologist', 'Bariatrics', 'Breast surgery','Cardiology','Cardiothoracic & Vascular Surgery','Cold, Cough and Fever', 'Colorectal Surgery']; + info = ['Manage allergies and treat immunity', 'For obesity-related disorders', 'For breast tissue removal', 'For heart and blood pressure problems', 'For surgical treatments of thoracic organs', 'For common health concerns', 'For disorders of rectum, anus, and colon']; + specialties = ['Recurring infections, Immunity deficiency', 'Overweight, BMI over 30', 'Breast tissue surgery & removal, Mastectomy', 'Chest pain, Heart Failure, Cholesterol', 'Heart & lung disease, Cardiac transplantation','Fever, Eye Infection, Stomach Ache, Headache', 'Inflammatory bowel disease, Fistula, Intestinal blockage']; serviceData: any = []; constructor() { } @@ -18,7 +20,9 @@ export class ServiceListComponent implements OnInit { const obj: any = { serviceName: this.serviceName[random], // isFavourite: i % 5 === 0 ? true : false, - doctors: this.doctors, + // doctors: this.doctors, + info: this.info[random], + specialties: this.specialties[random], // apino: 21, // state: state[i % 4], //version: this.dropdown[0].name, diff --git a/ng-seed/src/assets/images/stethoscope.png b/ng-seed/src/assets/images/stethoscope.png new file mode 100644 index 0000000..d74898b Binary files /dev/null and b/ng-seed/src/assets/images/stethoscope.png differ