产品库页面

src/app/my/my-routing.module.ts

@@ -54,6 +54,8 @@ import { ArticleDetailComponent } from './article-detail/article-detail.componen
 import { ArticleReadComponent } from './article-read/article-read.component';
 import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
 import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
+import { ProductComponent } from './product/product.component';
+
 
 const myRoutes: Routes = [
   { path: '', component: MyCenterHomeComponent, canActivate: [AuthGuard], data: [{ title: '银盾保险经纪 - 工作台' }] },
@@ -114,7 +116,8 @@ const myRoutes: Routes = [
   { path: 'articleDetail/:id',component:ArticleDetailComponent},
   { path: 'article_read/:id',component:ArticleReadComponent,canActivate:[AuthGuard]},
   { path: 'salary_detail',component:SalaryDetailComponent,canActivate:[AuthGuard]},
-  { path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard]}
+  { path: 'salary_detail/:id',component:SalaryFirstYearComponent,canActivate:[AuthGuard]},
+  { path: 'product',component:ProductComponent,canActivate:[AuthGuard]}
 ];
 
 @NgModule({

src/app/my/my.module.ts

@@ -67,9 +67,10 @@ import { ArticleReadComponent } from './article-read/article-read.component';
 import { SalaryDetailComponent } from './salary-detail/salary-detail.component';
 import { SalaryFirstYearComponent } from './salary-first-year/salary-first-year.component';
 import { DetailModalComponent } from '../common/detail-modal/detail-modal.component';
+import { ProductComponent } from './product/product.component';
 
 @NgModule({
-  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent],
+  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent],
   imports: [
     CommonModule,
     LifeCommonModule,

src/app/my/product/product.component.html

+<div class="scrollContainer">
+  <div class="scrollContent" style="height: 100%;">
+    <div class="issueContainer">
+      <ul class="left">
+        <li *ngFor="let leftItem of leftList" (click)="switchCategory(leftItem.tagId)"
+            [ngClass]="{'actived':leftSelectedId===leftItem.tagId}">{{leftItem.name}}
+        </li>
+      </ul>
+      <div class="right">
+        <ul class="right_header">
+          <li>家财需求 <span class="iconfont icon-xiangxia"></span></li>
+          <li>保险公司 <span class="iconfont icon-xiangxia"></span></li>
+          <li>筛选 <img src="assets/images/product_select.png" alt="筛选" style="width: 16px;height:16px;"></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

src/app/my/product/product.component.scss

+.scrollContainer{
+    height: 100%;
+    .issueContainer {
+        display: flex;
+        height: 100%;
+        .left {
+          width: 90px;
+          height: 100%;
+          overflow-x: hidden;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          background:#F6F6F6;
+          li {
+            position: relative;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            height: 43px;
+            line-height: 43px;
+            text-align: center;
+          }
+          li:before {
+            content: "";
+            display: block;
+            position: absolute;
+            left: 22px;
+            top: 42px;
+            width: 60%;
+            // height: 1px;
+            background: rgba(220, 220, 220, 0.4);
+          }
+      
+          li.actived {
+            background-color: #fff;
+          }
+          li.actived:after {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            width: 4px;
+            height: 50%;
+            font-size: 0;
+            background-color: #F16A5D;
+            margin: auto 0;
+          }
+        }
+        .right {
+            width: 100%;
+            .right_header{
+                display: flex;
+                padding: 0 15px;
+                width: 100%;
+                height: 44px;
+                justify-content: space-between;
+                align-items: center;
+                color: #333;
+                border-bottom: 1px #f5f5f5 solid;
+                .iconfont{
+                    color: #666;
+                    font-size: 10px;
+                }
+            }
+        }
+      }
+}
+
+  
\ No newline at end of file

src/app/my/product/product.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductComponent } from './product.component';
+
+describe('ProductComponent', () => {
+  let component: ProductComponent;
+  let fixture: ComponentFixture<ProductComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/my/product/product.component.ts

+import { Component, OnInit } from '@angular/core';
+import { LifeCommonService } from '../../common/life-common.service';
+
+@Component({
+  selector: 'ydlife-product',
+  templateUrl: './product.component.html',
+  styleUrls: ['./product.component.scss']
+})
+export class ProductComponent implements OnInit {
+  leftList:Array<any>;
+  leftSelectedId:number = null;
+  constructor(public lifeCommonService:LifeCommonService) { }
+
+  ngOnInit() {
+    this.lifeCommonService.setTitle('产品库');
+    this.leftList = [
+      {name:'全部',tagId:null},
+      {name:'推荐',tagId:1},
+      {name:'新品',tagId:2},
+      {name:'意外',tagId:3},
+      {name:'医疗',tagId:4},
+      {name:'旅游',tagId:5},
+      {name:'重疾',tagId:6},
+      {name:'年金',tagId:7},
+      {name:'定寿',tagId:8},
+      {name:'终身寿',tagId:9},
+      {name:'留学',tagId:10},
+      {name:'高端医疗',tagId:11}
+    ]
+  }
+
+  switchCategory(id) {
+    this.leftSelectedId = id;
+  }
+
+}