Commit 534b84d0 authored by 2breakegg's avatar 2breakegg

style

parent 48af7b16
import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core'; import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewEncapsulation } from '@angular/core';
import 'node_modules/candy/libs.min.js';
import 'node_modules/candy/candy.min.js';
import 'node_modules/candy-shop/me-does/candy.js'; import 'node_modules/candy-shop/me-does/candy.js';
import 'node_modules/candy-shop/modify-role/candy.js'; import 'node_modules/candy-shop/modify-role/candy.js';
import 'node_modules/candy-shop/namecomplete/candy.js'; import 'node_modules/candy-shop/namecomplete/candy.js';
import 'node_modules/candy-shop/notifications/candy.js'; import 'node_modules/candy-shop/notifications/candy.js';
import 'node_modules/candy-shop/notifyme/candy.js'; import 'node_modules/candy-shop/notifyme/candy.js';
import 'node_modules/candy-shop/refocus/candy.js'; import 'node_modules/candy-shop/refocus/candy.js';
import 'node_modules/candy/candy.min.js';
import 'node_modules/candy/libs.min.js';
import * as uuid from 'uuid'; import * as uuid from 'uuid';
import { Cube } from '../cube'; import { Cube } from '../cube';
import { LoginService } from '../login.service'; import { LoginService } from '../login.service';
......
div {
box-sizing: content-box;
}
.progress-text{
float:right;
font-size: 12px;
}
.achievement { .achievement {
float: left; float: left;
position: relative; position: relative;
...@@ -33,8 +42,14 @@ ...@@ -33,8 +42,14 @@
background-size: 48px; background-size: 48px;
} }
div {
box-sizing: content-box; .progress-margin{
margin: 8px 2px;
border: 1px solid #ccc;
}
.progress-thin{
height:12px;
} }
.panel-my { .panel-my {
...@@ -50,3 +65,4 @@ div { ...@@ -50,3 +65,4 @@ div {
.clear { .clear {
clear: both; clear: both;
} }
<div class="panel-my"> <div class="panel-my">
<div> <div>
<span>成就</span> <span>成就</span>
<span style="float:right; font-size: 12px">已解锁 {{progressTotal[0] +'('+progressTotal[1]+')'}}项成就:</span> <span class="progress-text">已解锁 {{progressTotal[0] +'('+progressTotal[1]+')'}}项成就:</span>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class=""> <div class="">
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="progress" style="margin: 8px 2px; border: 1px solid #ccc;"> <div class="progress progress-margin">
<div class="progress-bar progress-bar-success" [style.width]="progressTotal[1]" style="height:12px"></div> <div class="progress-bar progress-bar-success progress-thin" [style.width]="progressTotal[1]" ></div>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
......
...@@ -16,12 +16,16 @@ div { ...@@ -16,12 +16,16 @@ div {
position: relative; position: relative;
} }
.left-box { .left-small-item-box-overflow{
overflow: auto;
height:97px ;
} }
.right-box { .left-small-item-box{
margin-right: -10000px;
position: relative;
float:left;
padding-top: 10px
} }
.left-small-item { .left-small-item {
...@@ -33,6 +37,7 @@ div { ...@@ -33,6 +37,7 @@ div {
background: black; background: black;
text-align: center; text-align: center;
line-height: 100%; line-height: 100%;
position: relative
} }
.left-big-item-box { .left-big-item-box {
...@@ -43,6 +48,11 @@ div { ...@@ -43,6 +48,11 @@ div {
line-height: 100%; line-height: 100%;
} }
.make-div-16-9{
width:100%;
padding-bottom:56.25%;
}
.left-big-item { .left-big-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -76,6 +86,7 @@ img { ...@@ -76,6 +86,7 @@ img {
} }
.select-rectangle { .select-rectangle {
cursor: pointer;
position: absolute; position: absolute;
top: 0px; top: 0px;
z-index: 10; z-index: 10;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<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" (mouseout)="carouselUnlock()" (mouseover)="carouselLock_f()"> <div class="left-big-item-box" (mouseout)="carouselUnlock()" (mouseover)="carouselLock_f()">
<div style="width:100%; padding-bottom:56.25%;"></div> <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"> <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> <video controls="" name="video" (ended)="nextvedio(selectId)" autoplay="true" [src]="videosrc_now" type="video/webm"></video>
</div> </div>
...@@ -11,10 +11,10 @@ ...@@ -11,10 +11,10 @@
</div> </div>
</div> </div>
<div style="overflow: auto; height:97px "> <div class="left-small-item-box-overflow">
<div style="margin-right: -10000px; position: relative; float:left; padding-top: 10px"> <div class="left-small-item-box">
<div class="select-rectangle" [style.left]="(2+120*selectId)+'px'" (mouseout)="carouselUnlock()" (mouseover)="carouselLock_f()"></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);">
<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>
</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)">
......
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