shop interface

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

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

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

-<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 class="panel">-->
+  <div style="overflow: hidden; width:600px; margin-right: 5px;">
+    <div class="left-big-item-box">
+      <div *ngFor="let src of imgsrc" class="left-big-item"  >
+        <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>
       </div>
-    </dd>
+    </div>
+  </div>
+<!--</div>-->
+
+{{divOpacity[0]}}
+{{divOpacity[1]}}
+<!--<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

 /**
  * Created by zh99998 on 16/9/2.
  */
-import { Component, Input, OnInit } from '@angular/core';
-import { remote } from 'electron';
-import { Cube } from '../cube';
+import {ChangeDetectorRef, Component, Input, Pipe} from '@angular/core';
+import {Cube} from '../cube';
 
 
 @Component({
@@ -11,8 +10,68 @@ import { Cube } from '../cube';
   templateUrl: './cube-description.component.html',
   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;
+  }
+
+  test(v: number): void {
+    console.log(v);
+    console.log(this.divOpacity[1])
+  }
+
+  show(num1: number): void {
+    console.log(num1);
+    let divOpacity = this.divOpacity;
+    divOpacity.map(function (val, key) {
+      divOpacity[key] = 0;
+    })
+    divOpacity[num1] = 1;
+    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;
+  }
 }