Commit 893b0bb6 authored by 2breakegg's avatar 2breakegg

style

parent e563544a
......@@ -111,6 +111,26 @@ img {
box-sizing: initial;
}
.appear{
animation:appear 0.5s;
opacity: 1; z-index: 100
}
.disappear{
animation:disappear 0.5s;
opacity: 0; z-index: 0
}
@keyframes appear {
from{ opacity: 0; z-index: 0}
to{opacity: 1; z-index: 100}
}
@keyframes disappear {
from{ opacity: 1; z-index: 100}
to{opacity: 0; z-index: 0}
}
/*#left {*/
/*font-size: 14px;*/
/*margin-right: 8px;*/
......
......@@ -3,46 +3,52 @@
<div class="left-box col-md-8">
<div class="left-big-item-box" (mouseout)="carouselUnlock()" (mouseover)="carouselLock_f()">
<div class="make-div-16-9"></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(selectId)" autoplay="true" [src]="videosrc_now" type="video/webm"></video>
</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 class="left-big-item"
[ngClass]="{'disappear':!(selectId<videosrc.length), 'appear':(selectId<videosrc.length) }">
<video controls="" name="video" (ended)="nextvedio(selectId)" autoplay="true" [src]="videosrc_now"
type="video/webm"></video>
</div>
<div *ngFor="let src of imgsrc ; index as key" class="left-big-item"
[ngClass]="{'disappear':!divOpacity[key+videosrc.length], 'appear':!!divOpacity[key+videosrc.length]}">
<img class="img-fixed" [src]="src"/>
</div>
</div>
<div class="left-small-item-box-overflow">
<div class="left-small-item-box">
<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);">
<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 class="left-small-item-box-overflow">
<div class="left-small-item-box">
<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);">
<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="right-box col-md-4">
<img [src]="imgsrc[0]"/>
<p [innerHTML]="currentCube.description"></p>
<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 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 class="right-box col-md-4">
<img [src]="imgsrc[0]"/>
<p [innerHTML]="currentCube.description"></p>
<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 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>
<!--<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>-->
......
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