shop interface

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

@@ -9,60 +9,72 @@
   position: relative;
 }
 
-.left-small-item{
-  width:116px;
-  height:65px;
-  margin:2px;
+.left-box {
+  overflow: hidden;
+  /*width: 600px;*/
+  margin-right: 5px;
   float:left;
-  background:black;
+}
+
+.left-small-item {
+  width: 116px;
+  height: 65px;
+  margin: 2px;
+  float: left;
+  background: black;
   text-align: center;
   line-height: 100%;
 }
 
-.left-big-item-box{
-  width:600px;
-  height:337px;
+.left-big-item-box {
+  width: 600px;
+  height: 337px;
   text-align: center;
   background: black;
-  position:relative;
+  position: relative;
   line-height: 100%;
 }
 
-.left-big-item{
-  width:100%;
-  height:100%;
-  position:absolute;
+.left-big-item {
+  width: 100%;
+  height: 100%;
+  position: absolute;
   line-height: 100%;
 }
 
-.block{
-  width:50px;
-  height:50px;
-  background:black;
+.block {
+  width: 50px;
+  height: 50px;
+  background: black;
 }
-img{
+
+img {
   max-height: 100%;
   max-width: 100%;
 }
+
+div{
+  font-size:13px;
+}
 /*#left {*/
-  /*font-size: 14px;*/
-  /*margin-right: 8px;*/
-  /*display: flex;*/
-  /*flex-direction: column;*/
-  /*flex-grow: 1;*/
+/*font-size: 14px;*/
+/*margin-right: 8px;*/
+/*display: flex;*/
+/*flex-direction: column;*/
+/*flex-grow: 1;*/
 /*}*/
 
 /*#left p {*/
-  /*flex-grow: 1;*/
+/*flex-grow: 1;*/
 /*}*/
 
 /*#right {*/
-  /*width: 160px;*/
-  /*flex-shrink: 0;*/
+/*width: 160px;*/
+/*flex-shrink: 0;*/
 /*}*/
 
 /*.tag {*/
-  /*font-size: 12px;*/
-  /*padding: 2px 5px;*/
+/*font-size: 12px;*/
+/*padding: 2px 5px;*/
 /*}*/
 

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

 <!--<div class="panel">-->
-  <div style="overflow: hidden; width:600px; margin-right: 5px;">
+<div class="row">
+  <div class="left-box col-md8">
     <div class="left-big-item-box">
-      <div *ngFor="let src of imgsrc" class="left-big-item"  >
-        <img [src]="src">
+      <div *ngFor="let src of imgsrc ; index as key" class="left-big-item" [style.opacity]="divOpacity[key]" >
+        <img [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)="test(key)">
-          <img [src]="entry.key">
+        <div *ngFor="let src of imgsrc ; index as key" class="left-small-item" (click)="show(key)">
+          <img [src]="src"/>
         </div>
       </div>
     </div>
   </div>
 <!--</div>-->
 
-{{divOpacity[0]}}
-{{divOpacity[1]}}
+  <div style=" float: right" class="col-md3">
+    <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">-->

app/cube-description/cube-description.component.ts

 /**
  * Created by zh99998 on 16/9/2.
  */
-import {ChangeDetectorRef, Component, Input, Pipe} from '@angular/core';
+import {ChangeDetectorRef, Component, Input} from '@angular/core';
 import {Cube} from '../cube';
 
 
@@ -11,35 +11,19 @@ import {Cube} from '../cube';
   styleUrls: ['./cube-description.component.css'],
 })
 
-@Pipe({name: 'keys'})
-
 export class CubeDescriptionComponent {
 
   @Input()
   currentCube: Cube;
 
-  divOpacity: number[] = [1, 0, 0];
-  div1 = 1;
-  div2 = 0;
-  color1 = 'red';
-  hrefs = 'http://abc.efg.ijk';
   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'
   ];
-
-  constructor(private ref: ChangeDetectorRef) {
-
-  }
-
-  transform(value, args: string[]): any {
-    let keys = [];
-    for (let key in value) {
-      keys.push({key: key, value: value[key]});
-    }
-    return keys;
-  }
+  divOpacity: number[] = this.imgsrc.map(function (val: any, key: any) {
+    return key === 0 ? 1 : 0;
+  });
 
   test(v: number): void {
     console.log(v);
@@ -56,22 +40,4 @@ export class CubeDescriptionComponent {
     console.log(this.divOpacity);
   }
 
-  showxx(num: number): void {
-    console.log(num);
-    this.div1 = 0;
-    this.div2 = 1;
-  }
-
-  changecolor() {
-    this.color1 = 'green';
-    console.log(this.color1);
-    this.ref.detectChanges()
-  }
-
-  ngStyle() {
-    let styles = {
-      'background': this.color1
-    }
-    return styles;
-  }
 }