style

app/candy/candy.component.ts

 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/modify-role/candy.js';
 import 'node_modules/candy-shop/namecomplete/candy.js';
 import 'node_modules/candy-shop/notifications/candy.js';
 import 'node_modules/candy-shop/notifyme/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 { Cube } from '../cube';
 import { LoginService } from '../login.service';

app/cube-achievements/cube-achievements.component.css

+div {
+  box-sizing: content-box;
+}
+
+.progress-text{
+  float:right;
+  font-size: 12px;
+}
+
 .achievement {
   float: left;
   position: relative;
@@ -33,8 +42,14 @@
   background-size: 48px;
 }
 
-div {
-  box-sizing: content-box;
+
+.progress-margin{
+  margin: 8px 2px;
+  border: 1px solid #ccc;
+}
+
+.progress-thin{
+  height:12px;
 }
 
 .panel-my {
@@ -50,3 +65,4 @@ div {
 .clear {
   clear: both;
 }
+

app/cube-achievements/cube-achievements.component.html

 <div class="panel-my">
   <div>
     <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>
   <div class="">
@@ -11,8 +11,8 @@
     <div class="clear"></div>
   </div>
 
-  <div class="progress" style="margin: 8px 2px; border: 1px solid #ccc;">
-    <div class="progress-bar progress-bar-success" [style.width]="progressTotal[1]" style="height:12px"></div>
+  <div class="progress progress-margin">
+    <div class="progress-bar progress-bar-success progress-thin" [style.width]="progressTotal[1]" ></div>
   </div>
 
   <div class="panel-footer">

app/cube-description/cube-description.component.css

@@ -16,12 +16,16 @@ div {
   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 {
@@ -33,6 +37,7 @@ div {
   background: black;
   text-align: center;
   line-height: 100%;
+  position: relative
 }
 
 .left-big-item-box {
@@ -43,6 +48,11 @@ div {
   line-height: 100%;
 }
 
+.make-div-16-9{
+  width:100%;
+  padding-bottom:56.25%;
+}
+
 .left-big-item {
   width: 100%;
   height: 100%;
@@ -76,6 +86,7 @@ img {
 }
 
 .select-rectangle {
+  cursor: pointer;
   position: absolute;
   top: 0px;
   z-index: 10;

app/cube-description/cube-description.component.html

@@ -2,7 +2,7 @@
 <div class="row">
   <div class="left-box col-md-8">
     <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">
         <video controls="" name="video" (ended)="nextvedio(selectId)" autoplay="true" [src]="videosrc_now" type="video/webm"></video>
       </div>
@@ -11,10 +11,10 @@
       </div>
     </div>
 
-    <div style="overflow: auto; height:97px ">
-      <div style="margin-right: -10000px; position: relative; float:left; padding-top: 10px">
+    <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);" 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>
         </div>
         <div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="select(key+videosrc.length)">