Appointment/appointments_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

service

Browse Source
This commit is contained in:
Smart 2023-03-06 18:26:00 +05:30
parent 74b44ea46f
commit 6d36e493ce
7 changed files with 192 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.html
View File

@ -2,7 +2,11 @@
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap" *ngFor="let consultant of consultants">
<div class="consultant-list-card">
<div class="consultant-content">
<div class="pad-wrap d-flex mb-1">
<div class="pad-wrap d-flex">
<div class="consultant-img">
<img src="https://newassets.apollo247.com/specialties/ic_oncology.png " alt="Online Doctor Consultation - Medical Oncology" style="width: 40px;">
<!-- <img src="{{consultant.img}}" style="width: 40px;"> -->
</div>
<div class="consultant-card-cover">
<div>
<div class="text-center consultant-thumb">
@ -12,26 +16,30 @@
</div>
<div class="consultant-profile">
<h5 class="text-primary">{{consultant.name}}</h5>
<span class="silk-block mb-1 consultant-span">{{consultant.specialist}}</span><br>
<span class="silk-block mb-1 consultant-span">{{consultant.year}}</span><br>
<span class="silk-block mb-1 consultant-span">{{consultant.qualification}}</span><br>
<span class="silk-block mb-1 consultant-span">Starts at ₹ {{consultant.payment}}</span><br>
<span class="silk-block consultant-span">{{consultant.specialist}}</span><br>
<span class="silk-block mb-1 consultant-year">{{consultant.year}}</span><br>
<span class="silk-block mb-1 consultant-qualification">{{consultant.qualification}}</span><br>
<span class="silk-block mb-1 consultant-amount">Starts at <span class="consultant-pay">₹ {{consultant.payment}}</span> </span><br>
</div>
</div>
<span class="d-flex mb-1">
<span class="d-flex mb">
<mat-icon class="mt-1">transcribe</mat-icon>
<span class="consultant-span mt-1 pl-1">{{consultant.language}}</span>
<span class="mt-1 pl-1 consultant-language">{{consultant.language}}</span>
</span>
<span class="d-flex mb-1">
<span class="d-flex mb">
<mat-icon>location_on</mat-icon>
<span class="consultant-span pl-1">{{consultant.city}}</span>
<span class="consultant-language pl-1">{{consultant.city}}</span>
</span>
<span class="d-flex mb">
<mat-icon>access_time</mat-icon>
<span class="consultant-language pl-1">{{consultant.time}}</span>
</span>
<div class="align-self-center">
<!-- <button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button">
<span class="button-text">Accept</span>
</button> -->
<button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary btn-red" data-scribe-element="profile_edit_button">
<span class="button-text">Booking Appoinment</span>
<span class="button-text">Book Appoinment</span>
</button>
</div>
</div>

63
ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.scss
View File

@ -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;
}
.consultant-list-card {
@ -18,13 +18,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;
@ -54,9 +98,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;
}

27
ng-seed/src/app/appoinment/consultants/consultants-list/consultants-list.component.ts
View File

@ -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'
}
];
}

22
ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.html
View File

@ -1,11 +1,21 @@
<div fxLayout="row wrap" >
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap" *ngFor="let serviceListDetails of serviceData">
<mat-card class="mb-2 example-card">
<mat-card-title-group>
<img width="60" src="assets/images/curve.jpg">
<mat-card-title>{{serviceListDetails.serviceName}}</mat-card-title>
<!-- <mat-card-subtitle>Dr. Saravanan</mat-card-subtitle> -->
<div fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" class="m-gap p-gap flx" *ngFor="let serviceListDetails of serviceData">
<div class="Specialties-list-card">
<mat-card class="mb-2 example-card d-flex Specialties-spContent">
<div class="consultant-card-cover">
<div>
<div class="text-center consultant-thumb">
<img class="img-responsive img-circle" src="https://prodaphstorage.blob.core.windows.net/specialties/bdf0cf0d-754e-4254-aaf7-fdc7aedd7c35.jpg" alt="Online Doctor Consultation - Allergist and Clinical Immunologist" width="120" height="120" alt="user list image">
</div>
</div>
</div>
<mat-card-title-group>
<mat-card-title class="service-info mb">{{serviceListDetails.serviceName}}</mat-card-title>
<mat-card-title class="info service-list">{{serviceListDetails.info}}</mat-card-title>
<span class="Specialties-rightArrow"><img src="https://newassets.apollo247.com/images/ic_arrow_right.svg" alt="Arrow Right - Online Doctor Consultation"></span>
<mat-card-subtitle class="service-Specialties">{{serviceListDetails.specialties}}</mat-card-subtitle>
</mat-card-title-group>
</mat-card>
</div>
</div>
</div>

78
ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.scss
View File

@ -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;
}

10
ng-seed/src/app/appoinment/service-list-details/service-list/service-list.component.ts
View File

@ -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 &amp; 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 &amp; removal, Mastectomy', 'Chest pain, Heart Failure, Cholesterol', 'Heart &amp; 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,

BIN
ng-seed/src/assets/images/stethoscope.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB