Skip to content

M
mycard
Commit fc99d173 authored by 2breakegg's avatar 2breakegg
Browse files
Options

shop interface

parent bd7df783
Hide whitespace changes
Inline Side-by-side
Showing with 39 additions and 114 deletions
app/cube-description/cube-description.component.css
View file @ fc99d173
/*:host {*/ /*:host {*/
/*display: flex;*/ /*display: flex;*/
/*}*/ /*}*/
div {
font-size: 12px;
}
.panel { .panel {
display: flex; display: flex;
...@@ -14,11 +17,15 @@ ...@@ -14,11 +17,15 @@
} }
.left-box { .left-box {
overflow: hidden;
float: left; }
.right-box{
} }
.left-small-item { .left-small-item {
cursor: pointer;
width: 116px; width: 116px;
height: 65px; height: 65px;
margin: 2px; margin: 2px;
...@@ -52,8 +59,6 @@ ...@@ -52,8 +59,6 @@
} }
.img-fixed { .img-fixed {
/*max-height: 100%;*/
/*max-width: 100%;*/
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
...@@ -70,17 +75,14 @@ img { ...@@ -70,17 +75,14 @@ img {
max-height: 100%; max-height: 100%;
} }
div {
font-size: 13px;
}
.select-rectangle { .select-rectangle {
position: absolute; position: absolute;
top: 0px; top: 0px;
z-index: 10; z-index: 10;
width: 116px; width: 116px;
height: 77px; height: 77px;
background: url('http://store.steampowered.com/public/images/v5/game_highlight_activethumb.png'); /*background: url('http://store.steampowered.com/public/images/v5/game_highlight_activethumb.png');*/
background: url('http://2breakegg.github.io/image/select.png');
} }
.icon_play{ .icon_play{
......
app/cube-description/cube-description.component.html
View file @ fc99d173
<!--<div class="panel">--> <!--<div class="panel">-->
<div class="row"> <div class="row">
<div class="left-box col-md-8"> <div class="left-box col-md-8">
<div class="left-big-item-box"> <div class="left-big-item-box" (mouseout)="carouselUnlock()" (mouseover)="carouselLock_f()">
<div style="width:100%; padding-bottom:56.25%;"></div> <div style="width:100%; padding-bottom:56.25%;"></div>
<!--单视频-->
<div class="left-big-item" [style.opacity]="selectId<videosrc.length ? 1:0" [style.display]="selectId<videosrc.length? 'block':'none'" *ngIf="videosrc.length"> <div class="left-big-item" [style.opacity]="selectId<videosrc.length ? 1:0" [style.display]="selectId<videosrc.length? 'block':'none'" *ngIf="videosrc.length">
<video controls="" name="video" (ended)="nextvedio(key)" autoplay="true" [src]="videosrc_now" type="video/webm"> <video controls="" name="video" (ended)="nextvedio(selectId)" autoplay="true" [src]="videosrc_now" type="video/webm"></video>
</video>
</div> </div>
<!--多视频-->
<!--<div *ngFor="let src of videosrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key]" [style.display]="divOpacity[key]? 'block':'none'">-->
<!--<video controls="" name="video" (ended)="nextvedio(key)" [autoplay]="!key">-->
<!--<source [src]="src[0]" type="video/webm">-->
<!--</video>-->
<!--&lt;!&ndash;<img [src]="src[0]"/>&ndash;&gt;-->
<!--</div>-->
<div *ngFor="let src of imgsrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key+videosrc.length]" [style.display]="divOpacity[key+videosrc.length]? 'block':'none'"> <div *ngFor="let src of imgsrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key+videosrc.length]" [style.display]="divOpacity[key+videosrc.length]? 'block':'none'">
<img class="img-fixed" [src]="src"/> <img class="img-fixed" [src]="src"/>
</div> </div>
</div> </div>
<div style="overflow: auto; height:97px "> <div style="overflow: auto; height:97px ">
<div style="margin-right: -10000px; position: relative; float:left; padding-top: 10px"> <div style="margin-right: -10000px; position: relative; float:left; padding-top: 10px">
<div class="select-rectangle" [style.left]="(2+120*selectId)+'px'" ></div> <div class="select-rectangle" [style.left]="(2+120*selectId)+'px'" (mouseout)="carouselUnlock()" (mouseover)="carouselLock_f()"></div>
<div *ngFor="let src of videosrc ; index as key" class="left-small-item" (click)="select(key);" style="position: relative"> <div *ngFor="let src of videosrc ; index as key" class="left-small-item" (click)="select(key);" style="position: relative">
<img class="img-fixed" [src]="src[1]"/> <i class="fa fa-play-circle icon_play" aria-hidden="true"></i>
<img class="img-fixed" [src]="src[1]"/>
<i class="fa fa-play-circle icon_play" aria-hidden="true" ></i>
<!--<img src="file:///C:/Users/break/Desktop/icon-movie.png" style="position:absolute; top:50%; left:50%; margin: -16px 0 0 -16px;"/>-->
</div> </div>
<div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="select(key+videosrc.length)"> <div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="select(key+videosrc.length)">
<img class="img-fixed" [src]="src"/> <img class="img-fixed" [src]="src"/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!--<div class="left-box col-md-8">--> <div class="right-box col-md-4">
<!--<div class="left-big-item-box">-->
<!--<div style="width:100%; padding-bottom:56.25%;"></div>-->
<!--<div *ngFor="let src of videosrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key]" [style.display]="divOpacity[key]? 'block':'none'" >-->
<!--<video controls="" name="media" id='vdo2' autoplay="false">-->
<!--<source [src]="src[0]" type="video/webm">-->
<!--</video>-->
<!--&lt;!&ndash;<img [src]="src[0]"/>&ndash;&gt;-->
<!--</div>-->
<!--&lt;!&ndash;<div *ngFor="let src of imgsrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key+videosrc.length]" [style.display]="divOpacity[key+videosrc.length]? 'block':'none'" >&ndash;&gt;-->
<!--&lt;!&ndash;<img class="img-fixed" [src]="src"/>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>-->
<!--<div style="width:100%; overflow: hidden; height:65px ">-->
<!--<div>-->
<!--<div *ngFor="let src of videosrc ; index as key" class="left-small-item" (click)="show(key)" style="position: relative">-->
<!--<img class="img-fixed" [src]="src[1]"/>-->
<!--<img src="file:///C:/Users/break/Desktop/icon-movie.png" style="position:absolute; top:50%; left:50%; margin: -16px 0 0 -16px; width:1"/>-->
<!--</div>-->
<!--&lt;!&ndash;<div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="show(key+videosrc.length)">&ndash;&gt;-->
<!--&lt;!&ndash;<img class="img-fixed" [src]="src"/>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="col-md-4">
<img [src]="imgsrc[0]"/> <img [src]="imgsrc[0]"/>
<p [innerHTML]="currentCube.description"></p> <p [innerHTML]="currentCube.description"></p>
<dl> <dl>
......
app/cube-description/cube-description.component.ts
View file @ fc99d173
...@@ -14,38 +14,21 @@ import Timer = NodeJS.Timer; ...@@ -14,38 +14,21 @@ import Timer = NodeJS.Timer;
export class CubeDescriptionComponent implements OnChanges { export class CubeDescriptionComponent implements OnChanges {
@Input() @Input()
currentCube: Cube; currentCube: Cube;
// videosrc: any[] = [
// ['file:///C:/Users/break/Desktop/movie480.webm', 'file:///C:/Users/break/Desktop/movie.png'],
// ['file:///C:/Users/break/Desktop/movie480_2.webm', 'file:///C:/Users/break/Desktop/movie_2.jpg']
// ];
// imgsrc: string[] = [
// 'http://cdn.akamai.steamstatic.com/steam/apps/545980/ss_bfc8d95b53734e03998342b1def248f560c440e3.600x338.jpg?t=1492488208',
// 'http://cdn.akamai.steamstatic.com/steam/apps/15370/0000004764.1920x1080.jpg?t=1447351397',
// 'http://cdn.akamai.steamstatic.com/steam/apps/15370/0000004767.600x338.jpg?t=1447351397'
// ];
//
// divOpacity: number[] = (function (imgsrc, videosrc) {
// length = imgsrc.length + videosrc.length;
// let arr = [1];
// while (--length > 0) {
// arr.push(0)
// }
// return arr;
// })(this.imgsrc, this.videosrc)
videosrc: any[]; videosrc: any[];
videosrc_now: string; videosrc_now: string;
imgsrc: string[]; imgsrc: string[];
divOpacity: number[]; divOpacity: number[];
selectId = 0; selectId = 0;
timeOutId: Timer; timeOutId: Timer;
carouselLock = false;
carouselTime = 5000;
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
if (changes.currentCube) { if (changes.currentCube) {
clearTimeout(this.timeOutId);
this.videosrc = []; this.videosrc = [];
this.imgsrc = []; this.imgsrc = [];
this.divOpacity = []; this.divOpacity = [];
...@@ -67,24 +50,12 @@ export class CubeDescriptionComponent implements OnChanges { ...@@ -67,24 +50,12 @@ export class CubeDescriptionComponent implements OnChanges {
} }
} }
// 多视频用
// nextvedio(key): void {
// console.log('nextvedio');
// let videos = document.getElementsByName('video');
// if (key + 1 < videos.length) {
// videos[key + 1].play();
// this.appear(key + 1);
// } else {
// this.nextpic(key);
// }
// }
// 单视频用
nextvedio(key: number): void { nextvedio(key: number): void {
console.log('nextvedio'); console.log('nextvedio');
let videosrc = this.videosrc; let videosrc = this.videosrc;
if (key + 1 < videosrc.length) { if (key + 1 < videosrc.length) {
this.videosrc_now = videosrc[key + 1][0]; this.videosrc_now = videosrc[key + 1][0];
this.appear(key + 1);
console.log(videosrc); console.log(videosrc);
} else { } else {
this.nextpic(key); this.nextpic(key);
...@@ -92,13 +63,19 @@ export class CubeDescriptionComponent implements OnChanges { ...@@ -92,13 +63,19 @@ export class CubeDescriptionComponent implements OnChanges {
} }
nextpic(key: number): void { nextpic(key: number): void {
console.log('nextpic' + key);
let that = this; let that = this;
key = this.divOpacity.length > key + 1 ? key : this.videosrc.length - 1; console.log('nextpic' + key);
this.appear(key + 1); if (this.carouselLock) {
this.timeOutId = setTimeout(function () { this.timeOutId = setTimeout(function () {
that.nextpic(key + 1) that.nextpic(key)
}, 5000); }, this.carouselTime);
} else {
key = this.divOpacity.length > key + 1 ? key : this.videosrc.length - 1;
this.appear(key + 1);
this.timeOutId = setTimeout(function () {
that.nextpic(key + 1)
}, this.carouselTime);
}
} }
appear(key: number): void { appear(key: number): void {
...@@ -113,15 +90,13 @@ export class CubeDescriptionComponent implements OnChanges { ...@@ -113,15 +90,13 @@ export class CubeDescriptionComponent implements OnChanges {
select(key: number): void { select(key: number): void {
clearTimeout(this.timeOutId); clearTimeout(this.timeOutId);
let videosrc = this.videosrc; let videosrc = this.videosrc;
// this.stop();
let videos = <NodeListOf<HTMLVideoElement>>document.getElementsByName('video'); let videos = <NodeListOf<HTMLVideoElement>>document.getElementsByName('video');
videos[0].pause();
if (key < videosrc.length) { if (key < videosrc.length) {
this.videosrc_now = videosrc[key][0]; this.videosrc_now = videosrc[key][0];
console.log(videosrc); console.log(videosrc);
console.log(this.videosrc_now); console.log(this.videosrc_now);
// videos[key].play();
videos[0].play(); videos[0].play();
this.appear(key); this.appear(key);
} else { } else {
...@@ -129,21 +104,11 @@ export class CubeDescriptionComponent implements OnChanges { ...@@ -129,21 +104,11 @@ export class CubeDescriptionComponent implements OnChanges {
} }
} }
// carouselUnlock(): void {
// play(key, ele) { this.carouselLock = false;
// console.log('play'); }
// // console.log(key);
// // console.log(ele);
// // if(!key){
// // ele.play();
// // }
// }
// stop() { carouselLock_f(): void {
// let videos = document.getElementsByName('video'); this.carouselLock = true;
// for (let video of videos) { }
// console.log(video);
// video.pause();
// }
// }
} }
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