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 {*/
/*display: flex;*/
/*}*/
div {
font-size: 12px;
}
.panel {
display: flex;
......@@ -14,11 +17,15 @@
}
.left-box {
overflow: hidden;
float: left;
}
.right-box{
}
.left-small-item {
cursor: pointer;
width: 116px;
height: 65px;
margin: 2px;
......@@ -52,8 +59,6 @@
}
.img-fixed {
/*max-height: 100%;*/
/*max-width: 100%;*/
width: 100%;
height: 100%;
object-fit: contain;
......@@ -70,17 +75,14 @@ img {
max-height: 100%;
}
div {
font-size: 13px;
}
.select-rectangle {
position: absolute;
top: 0px;
z-index: 10;
width: 116px;
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{
......
app/cube-description/cube-description.component.html
View file @ fc99d173
<!--<div class="panel">-->
<div class="row">
<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 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>
<video controls="" name="video" (ended)="nextvedio(selectId)" autoplay="true" [src]="videosrc_now" type="video/webm"></video>
</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'">
<img class="img-fixed" [src]="src"/>
</div>
</div>
<div style="overflow: auto; height:97px ">
<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">
<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;"/>-->
<img class="img-fixed" [src]="src[1]"/> <i class="fa fa-play-circle icon_play" aria-hidden="true"></i>
</div>
<div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="select(key+videosrc.length)">
<img class="img-fixed" [src]="src"/>
</div>
</div>
</div>
</div>
<!--<div class="left-box col-md-8">-->
<!--<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">
<div class="right-box col-md-4">
<img [src]="imgsrc[0]"/>
<p [innerHTML]="currentCube.description"></p>
<dl>
......
app/cube-description/cube-description.component.ts
View file @ fc99d173
......@@ -14,38 +14,21 @@ import Timer = NodeJS.Timer;
export class CubeDescriptionComponent implements OnChanges {
@Input()
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_now: string;
imgsrc: string[];
divOpacity: number[];
selectId = 0;
timeOutId: Timer;
carouselLock = false;
carouselTime = 5000;
ngOnChanges(changes: SimpleChanges): void {
if (changes.currentCube) {
clearTimeout(this.timeOutId);
this.videosrc = [];
this.imgsrc = [];
this.divOpacity = [];
......@@ -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 {
console.log('nextvedio');
let videosrc = this.videosrc;
if (key + 1 < videosrc.length) {
this.videosrc_now = videosrc[key + 1][0];
this.appear(key + 1);
console.log(videosrc);
} else {
this.nextpic(key);
......@@ -92,13 +63,19 @@ export class CubeDescriptionComponent implements OnChanges {
}
nextpic(key: number): void {
console.log('nextpic' + key);
let that = this;
key = this.divOpacity.length > key + 1 ? key : this.videosrc.length - 1;
this.appear(key + 1);
this.timeOutId = setTimeout(function () {
that.nextpic(key + 1)
}, 5000);
console.log('nextpic' + key);
if (this.carouselLock) {
this.timeOutId = setTimeout(function () {
that.nextpic(key)
}, 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 {
......@@ -113,15 +90,13 @@ export class CubeDescriptionComponent implements OnChanges {
select(key: number): void {
clearTimeout(this.timeOutId);
let videosrc = this.videosrc;
// this.stop();
let videos = <NodeListOf<HTMLVideoElement>>document.getElementsByName('video');
videos[0].pause();
if (key < videosrc.length) {
this.videosrc_now = videosrc[key][0];
console.log(videosrc);
console.log(this.videosrc_now);
// videos[key].play();
videos[0].play();
this.appear(key);
} else {
......@@ -129,21 +104,11 @@ export class CubeDescriptionComponent implements OnChanges {
}
}
//
// play(key, ele) {
// console.log('play');
// // console.log(key);
// // console.log(ele);
// // if(!key){
// // ele.play();
// // }
// }
carouselUnlock(): void {
this.carouselLock = false;
}
// stop() {
// let videos = document.getElementsByName('video');
// for (let video of videos) {
// console.log(video);
// video.pause();
// }
// }
carouselLock_f(): void {
this.carouselLock = true;
}
}
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