ShangHaiYuan-AnXin/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html

<div class="bigbox">
    <div class="titlebox">
        <div class="titleitembox">
            <div class="item" [ngClass]="{'selectedItem': selectedItem == '封面'}" (click)="clickTitleItem('封面')">
                1.封面
            </div>
            <div class="item" *ngFor="let item of planTemplateData;let key = index" (click)="clickTitleItem(item)" [ngClass]="{'selectedItem': selectedItem == item.groupName}">
                {{key + 2}}.{{item.groupName}}
            </div>
        </div>
        <div class="btnbox">
            <button mat-stroked-button>
                <mat-icon>visibility</mat-icon> 预览
            </button>
            <button mat-flat-button color="primary">
                <mat-icon>save</mat-icon> 提交
            </button>
        </div>
    </div>
    <div class="contentbox">
        <div class="leftbox">

        </div>
        <div class="mainbox">
            <!-- 封面 -->
            <div class="cover"  *ngIf="selectedItem == '封面'">
                <p class="planNum">
                    预案编号: <input type="text" name="" id="">
                </p>
                <h1>民航大厦</h1>
                <ul>
                    <li>
                        <div>
                            对象名称：
                        </div>
                        <div>
                            民航大厦
                        </div>
                    </li>
                    <li>
                        <div>
                            单位性质：
                        </div>
                        <div>
                            高层公共建筑
                        </div>
                    </li>
                    <li>
                        <div>
                            *预案级别：
                        </div>
                        <div>
                            V级
                        </div>
                    </li>
                    <li>
                        <div>
                            *灾害类型：
                        </div>
                        <div>
                            <select ngModel="0">
                                <option value="0">火灾</option>
                                <option value="1">抢险救援</option>
                                <option value="2">其他</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <div>
                            防火级别：
                        </div>
                        <div>
                            二级+
                        </div>
                    </li>
                    <li>
                        <div>
                            防火管辖：
                        </div>
                        <div>
                            上海市某某区某消防大队
                        </div>
                    </li>
                    <li>
                        <div>
                            灭火责任队站：
                        </div>
                        <div>
                            上海市某某区某消防救援大队
                        </div>
                    </li>
                    <li>
                        <div>
                            制作人职务/姓名：
                        </div>
                        <div>
                            <input type="text" style="width: 160px;margin-right: 10px;">
                            <input type="text" style="width: 50px;">
                        </div>
                    </li>
                    <li>
                        <div>
                            审核人职务/姓名：
                        </div>
                        <div>
                           
                        </div>
                    </li>
                    <li>
                        <div>
                            审核时间：
                        </div>
                        <div>
                           
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 模板页面 -->
            <div *ngFor="let item of planTemplateData;let key = index">
                <div *ngIf="selectedItem == item.groupName">
                    <!-- <p>{{item.groupName}}</p> -->
                    <div class="centerBox" *ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'">
                        <span>111</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="rightbox">

        </div>
    </div>
</div>