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-toolbar>
<ion-title>productbooking</ion-title>
</ion-toolbar>
</ion-header>
<div class="app_header">
<button class="nav_btn back_btn floatLeft" (click)="goBack()">
</button>
<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>
src/app/productbooking/productbooking.page.ts
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({
selector: 'app-productbooking',
......@@ -7,9 +10,22 @@ import { Component, OnInit } from '@angular/core';
})
export class ProductbookingPage implements OnInit {
constructor() { }
constructor(
private router: Router,
private route: ActivatedRoute,
private location: Location
) { }
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 @@
<div class="clear"></div>
</div>
<div class="product_section">
<ion-row>
<ion-col col-4>
<ion-slides pager="false" [options]="slideOpts">
<ion-slide>
<div class="product_outter">
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
......@@ -31,8 +32,10 @@
</div>
<h4>PM 237</h4>
<hr>
</ion-col>
<ion-col col-4>
</div>
</ion-slide>
<ion-slide>
<div class="product_outter">
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
......@@ -41,8 +44,10 @@
</div>
<h4>Mega 3inch Band</h4>
<hr>
</ion-col>
<ion-col col-4>
</div>
</ion-slide>
<ion-slide>
<div class="product_outter">
<div class="product_div">
<div class="rating">3.1</div>
<div class="product_img">
......@@ -51,14 +56,95 @@
</div>
<h4>PM 237</h4>
<hr>
</ion-col>
</ion-row>
</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_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 class="header_submenu">
<h4>People most purchased</h4>
<button class="more_btn">More</button>
<div class="clear"></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>
</ion-content>
\ No newline at end of file
src/app/purchaseparts/purchaseparts.page.scss
......@@ -55,6 +55,12 @@
}
.product_section{
padding: 10px;
ion-slides{
.product_outter{
min-width: 100%;
padding: 5px;
}
}
.product_div{
background: #f6f5fa;
text-align: center;
......@@ -85,6 +91,7 @@
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
text-align: left;
}
hr{
border:2px solid #fbd339;
......@@ -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';
})
export class PurchasepartsPage implements OnInit {
slideOpts = {
initialSlide: 1,
speed: 400,
slidesPerView:3
};
constructor(
private router: Router,
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