Skip to content

A
allorepar
Commit 9d736d93 by amalk
Options

31-07-2019

parent 3673f7ce
Showing with 220 additions and 13 deletions
src/app/productbooking/productbooking.page.html
<ion-header> <ion-header>
<ion-toolbar> <div class="app_header">
<ion-title>productbooking</ion-title> <button class="nav_btn back_btn floatLeft" (click)="goBack()">
</ion-toolbar> </button>
</ion-header> <div class="nav_title floatLeft"><h4>Product booking</h4></div>
<button class="nav_btn nav_btn_text floatRight">
</button>
<div class="clear"></div>
</div>
</ion-header>
<ion-content> <ion-content>
</ion-content> </ion-content>
src/app/productbooking/productbooking.page.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { trigger, transition, animate, style } from '@angular/animations';
import { Router,ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-productbooking', selector: 'app-productbooking',
...@@ -7,9 +10,22 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +10,22 @@ import { Component, OnInit } from '@angular/core';
}) })
export class ProductbookingPage implements OnInit { export class ProductbookingPage implements OnInit {
constructor() { } constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
ngOnInit() { ngOnInit() {
} }
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
goBack() {
this.location.back();
}
} }
src/app/purchaseparts/purchaseparts.page.html
...@@ -21,8 +21,9 @@ ...@@ -21,8 +21,9 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="product_section"> <div class="product_section">
<ion-row> <ion-slides pager="false" [options]="slideOpts">
<ion-col col-4> <ion-slide>
<div class="product_outter">
<div class="product_div"> <div class="product_div">
<div class="rating">3.1</div> <div class="rating">3.1</div>
<div class="product_img"> <div class="product_img">
...@@ -31,8 +32,10 @@ ...@@ -31,8 +32,10 @@
</div> </div>
<h4>PM 237</h4> <h4>PM 237</h4>
<hr> <hr>
</ion-col> </div>
<ion-col col-4> </ion-slide>
<ion-slide>
<div class="product_outter">
<div class="product_div"> <div class="product_div">
<div class="rating">3.1</div> <div class="rating">3.1</div>
<div class="product_img"> <div class="product_img">
...@@ -41,8 +44,10 @@ ...@@ -41,8 +44,10 @@
</div> </div>
<h4>Mega 3inch Band</h4> <h4>Mega 3inch Band</h4>
<hr> <hr>
</ion-col> </div>
<ion-col col-4> </ion-slide>
<ion-slide>
<div class="product_outter">
<div class="product_div"> <div class="product_div">
<div class="rating">3.1</div> <div class="rating">3.1</div>
<div class="product_img"> <div class="product_img">
...@@ -51,14 +56,95 @@ ...@@ -51,14 +56,95 @@
</div> </div>
<h4>PM 237</h4> <h4>PM 237</h4>
<hr> <hr>
</ion-col> </div>
</ion-row> </ion-slide>
<ion-slide>
<div class="product_outter">
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
<img src="../../assets/img/asset_dummy_item1.png">
</div>
</div>
<h4>PM 237</h4>
<hr>
</div>
</ion-slide>
<ion-slide>
<div class="product_outter">
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
<img src="../../assets/img/asset_dummy_item2.png">
</div>
</div>
<h4>Mega 3inch Band</h4>
<hr>
</div>
</ion-slide>
<ion-slide>
<div class="product_outter">
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
<img src="../../assets/img/asset_dummy_item3.png">
</div>
</div>
<h4>PM 237</h4>
<hr>
</div>
</ion-slide>
</ion-slides>
</div> </div>
<div class="header_submenu"> <div class="header_submenu">
<h4>People most purchased</h4> <h4>People most purchased</h4>
<button class="more_btn">More</button> <button class="more_btn">More</button>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="product_list_bay">
<ul>
<li (click)="goToPage('productbooking')">
<div class="badge premium_badge">Premium</div>
<img src="../../assets/img/asset_dummy_item1.png">
<h4>PM 237</h4>
<p>Lorem ipsum</p>
<div class="rating">3.1</div>
<hr>
</li>
<li (click)="goToPage('productbooking')">
<div class="badge bestseller_badge">Best Seller</div>
<img src="../../assets/img/asset_dummy_item2.png">
<h4>PM 237</h4>
<p>Lorem ipsum</p>
<div class="rating">3.0</div>
<hr>
</li>
<li (click)="goToPage('productbooking')">
<div class="badge on_offer">On Offer</div>
<img src="../../assets/img/asset_dummy_item3.png">
<h4>PM 237</h4>
<p>Lorem ipsum</p>
<div class="rating">3.7</div>
<hr>
</li>
<li (click)="goToPage('productbooking')">
<img src="../../assets/img/asset_dummy_item1.png">
<h4>PM 237</h4>
<p>Lorem ipsum</p>
<div class="rating">2.8</div>
<hr>
</li>
<li (click)="goToPage('productbooking')">
<img src="../../assets/img/asset_dummy_item2.png">
<h4>PM 237</h4>
<p>Lorem ipsum</p>
<div class="rating">3.5</div>
<hr>
</li>
</ul>
</div>
</div> </div>
</ion-content> </ion-content>
\ No newline at end of file
src/app/purchaseparts/purchaseparts.page.scss
...@@ -55,6 +55,12 @@ ...@@ -55,6 +55,12 @@
} }
.product_section{ .product_section{
padding: 10px; padding: 10px;
ion-slides{
.product_outter{
min-width: 100%;
padding: 5px;
}
}
.product_div{ .product_div{
background: #f6f5fa; background: #f6f5fa;
text-align: center; text-align: center;
...@@ -85,6 +91,7 @@ ...@@ -85,6 +91,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 14px; font-size: 14px;
text-align: left;
} }
hr{ hr{
border:2px solid #fbd339; border:2px solid #fbd339;
...@@ -121,4 +128,90 @@ ...@@ -121,4 +128,90 @@
} }
} }
} }
.product_list_bay{
ul{
margin:0px;
padding:10px;
li{
list-style: none;
width:47.5%;
position: relative;
padding-top:20px;
padding-left: 8px;
padding-right: 8px;
text-align: center;
margin:4px;
max-height: 220px;
background: #ffffff;
display: inline-block;
border-radius: 10px;
-webkit-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
-moz-box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
box-shadow: 0px 5px 20px 1px rgba(158,151,186,0.3);
img{
height: 130px;
width: auto;
}
h4{
color: #282438;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
text-align: left;
margin-top: 0px;
margin-bottom: 1px;
}
p{
margin: 0px;
color: #9e97ba;
text-align: left;
font-size:10px;
}
hr{
border:2px solid #fbd339;
width:30px;
border-radius: 20px;
height:0px;
margin-left:0px;
}
.rating{
background-color: rgba(255, 255, 255, 0.9);
background-image: url("../../assets/img/asset_star.png");
position: absolute;
bottom: 25px;
right: 10px;
padding-left: 25px;
background-size: 12px;
background-repeat: no-repeat;
background-position: center left 6px;
padding-right: 10px;
border-radius: 15px;
}
.badge{
position: absolute;
top:0px;
right:0px;
height: 23px;
border-radius: 0px;
font-size: 14px;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-top-right-radius: 10px;
}
.premium_badge{
}
.bestseller_badge{
background-color: #fbd339;
}
.on_offer{
background-color: #7baf38;
color: #fff;
}
}
}
}
} }
src/app/purchaseparts/purchaseparts.page.ts
...@@ -10,6 +10,12 @@ import { Router,ActivatedRoute } from '@angular/router'; ...@@ -10,6 +10,12 @@ import { Router,ActivatedRoute } from '@angular/router';
}) })
export class PurchasepartsPage implements OnInit { export class PurchasepartsPage implements OnInit {
slideOpts = {
initialSlide: 1,
speed: 400,
slidesPerView:3
};
constructor( constructor(
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment