Skip to content

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

shop interface

parent 5cac8179
Hide whitespace changes
Inline Side-by-side
Showing with 207 additions and 59 deletions
app/cube-description/cube-description.component.css
View file @ 22a57ddd
:host {
display: flex;
}
/*:host {*/
/*display: flex;*/
/*}*/
.panel {
display: flex;
......@@ -15,9 +15,7 @@
.left-box {
overflow: hidden;
/*width: 600px;*/
margin-right: 5px;
float:left;
float: left;
}
.left-small-item {
......@@ -31,8 +29,7 @@
}
.left-big-item-box {
width: 600px;
height: 337px;
width: 100%;
text-align: center;
background: black;
position: relative;
......@@ -43,7 +40,9 @@
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
line-height: 100%;
top: 0px;
}
.block {
......@@ -52,14 +51,38 @@
background: black;
}
.img-fixed {
/*max-height: 100%;*/
/*max-width: 100%;*/
width: 100%;
height: 100%;
object-fit: contain;
}
.left-box video {
width: 100%;
height: 100%;
object-fit: contain;
}
img {
max-height: 100%;
max-width: 100%;
max-height: 100%;
}
div{
font-size:13px;
div {
font-size: 13px;
}
.select-rectangle {
position: absolute;
top: 0px;
z-index: 10;
width: 116px;
height: 77px;
background: url('file:///C:/Users/break/Desktop/select.png');
}
/*#left {*/
/*font-size: 14px;*/
/*margin-right: 8px;*/
......
app/cube-description/cube-description.component.html
View file @ 22a57ddd
<!--<div class="panel">-->
<div class="row">
<div class="left-box col-md8">
<div class="left-box col-md-8">
<div class="left-big-item-box">
<div *ngFor="let src of imgsrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key]" >
<img [src]="src"/>
<div style="width:100%; padding-bottom:56.25%;"></div>
<!--<div class="left-big-item" [style.opacity]="divOpacity[key]" [style.display]="divOpacity[key]? 'block':'none'" *ngIf="videosrc.length">-->
<!--<video controls="" name="video" (ended)="nextvedio(key)" [autoplay]="!key">-->
<!--<source [src]="src[0]" 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>
<!--<img [src]="src[0]"/>-->
</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="width:100%; overflow: hidden; height:65px ">
<div>
<div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="show(key)">
<img [src]="src"/>
<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 *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]"/>
<img src="file:///C:/Users/break/Desktop/icon-movie.png" style="position:absolute; top:50%; left:50%; margin: -16px 0 0 -16px;"/>
</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>-->
<div style=" float: right" class="col-md3">
<!--<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">
<img [src]="imgsrc[0]"/>
<p [innerHTML]="currentCube.description"></p>
<dl>
......@@ -32,31 +79,11 @@
<dd>{{currentCube.released_at | date:'mediumDate'}}</dd>
</dl>
<div id="tags" *ngIf="currentCube.tags">
<div i18n *ngFor="let tag of currentCube.tags" class="btn btn-sm btn-danger tag">{tag, select, installed {已安装} test {测试} recommend {推荐} mysterious {迷之物体} touhou {东方 Project} touhou_pc98 {东方旧作} runtime_installed{已安装的运行库} }</div>
<div i18n *ngFor="let tag of currentCube.tags" class="btn btn-sm btn-danger tag">{tag, select, installed {已安装} test {测试} recommend {推荐} mysterious {迷之物体} touhou {东方 Project} touhou_pc98 {东方旧作} runtime_installed{已安装的运行库} }</div>
</div>
</div>
</div>
<!--<div class="panel" id="left">--><!--<p [innerHTML]="currentCube.description"></p>--><!--<div id="tags" *ngIf="currentCube.tags">--><!--<div i18n *ngFor="let tag of currentCube.tags" class="btn btn-sm btn-danger tag">{tag, select, installed {已安装} test {测试} recommend {推荐} mysterious {迷之物体} touhou {东方 Project} touhou_pc98 {东方旧作} runtime_installed{已安装的运行库} }</div>--><!--</div>--><!--</div>--><!--<div class="panel" id="right">--><!--<dl>--><!--<dt i18n>开发</dt>--><!--<dd>--><!--<div *ngFor="let developer of currentCube.developers">--><!--<a *ngIf="developer.url" target="_blank" [href]="developer.url">{{developer.name}}</a>--><!--<span *ngIf="!developer.url">{{developer.name}}</span>--><!--</div>--><!--</dd>-->
<!--<div class="panel" id="left">-->
<!--<p [innerHTML]="currentCube.description"></p>-->
<!--<div id="tags" *ngIf="currentCube.tags">-->
<!--<div i18n *ngFor="let tag of currentCube.tags" class="btn btn-sm btn-danger tag">{tag, select, installed {已安装} test {测试} recommend {推荐} mysterious {迷之物体} touhou {东方 Project} touhou_pc98 {东方旧作} runtime_installed{已安装的运行库} }</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="panel" id="right">-->
<!--<dl>-->
<!--<dt i18n>开发</dt>-->
<!--<dd>-->
<!--<div *ngFor="let developer of currentCube.developers">-->
<!--<a *ngIf="developer.url" target="_blank" [href]="developer.url">{{developer.name}}</a>-->
<!--<span *ngIf="!developer.url">{{developer.name}}</span>-->
<!--</div>-->
<!--</dd>-->
<!--<dt i18n>发行日期</dt>-->
<!--<dd>{{currentCube.released_at | date:'mediumDate'}}</dd>-->
<!--</dl>-->
<!--</div>-->
<!--<dt i18n>发行日期</dt>--><!--<dd>{{currentCube.released_at | date:'mediumDate'}}</dd>--><!--</dl>--><!--</div>-->
app/cube-description/cube-description.component.ts
View file @ 22a57ddd
/**
* Created by zh99998 on 16/9/2.
*/
import {ChangeDetectorRef, Component, Input} from '@angular/core';
import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Cube} from '../cube';
......@@ -11,33 +11,131 @@ import {Cube} from '../cube';
styleUrls: ['./cube-description.component.css'],
})
export class CubeDescriptionComponent {
export class CubeDescriptionComponent implements OnChanges {
@Input()
currentCube: Cube;
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[] = this.imgsrc.map(function (val: any, key: any) {
return key === 0 ? 1 : 0;
});
// 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: number;
ngOnChanges(changes: SimpleChanges): void {
if (changes.currentCube) {
let trailer = this.currentCube.trailer;
let videosrc = this.videosrc = [];
this.videosrc_now=""
let imgsrc = this.imgsrc = [];
let divOpacity = this.divOpacity = [];
this.selectId = 0;
for (let val of trailer) {
if (val.type === 'video') {
videosrc.push([val.url, val.url2]);
} else if (val.type === 'image') {
imgsrc.push(val.url);
}
if (divOpacity.length) {
divOpacity.push(0);
} else {
divOpacity.push(1);
}
}
}
}
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);
}
}
nextpic(key): 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)
}, 1000);
}
test(v: number): void {
console.log(this.currentCube);
console.log(this.divOpacity);
console.log(v);
console.log(this.divOpacity[1])
}
show(num1: number): void {
console.log(num1);
appear(key: number): void {
console.log('appear' + key)
let divOpacity = this.divOpacity;
divOpacity.map(function (val, key) {
divOpacity[key] = 0;
this.selectId = key;
divOpacity.map(function (val, key2) {
divOpacity[key2] = 0;
})
divOpacity[num1] = 1;
console.log(this.divOpacity);
divOpacity[key] = 1;
}
select(key: number): void {
console.log(this.currentCube);
clearTimeout(this.timeOutId);
this.stop();
let videos = document.getElementsByName('video');
if (key < videos.length) {
videos[key].play();
this.appear(key);
} else {
this.nextpic(key - 1);
}
// this.appear(key);
}
play(key, ele) {
console.log('play');
// console.log(key);
// console.log(ele);
// if(!key){
// ele.play();
// }
}
stop() {
let videos = document.getElementsByName('video');
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