vue图片及视频顺序显示

jeecg vue图片及视频顺序显示

<a-tabs defaultActiveKey="1" >
		// pane框标题
        <a-tab-pane tab="图片信息" key="1">
          <a-tabs default-active-key="111" tab-position="left">
            <a-tab-pane key="111" tab="图片" v-if="imgFrontList.length>0">

              <template >
                <div v-for="(fileRecord,index) in imgFrontList" :key="index">
                  <div style="float: left;width:120px;height:120px;margin-right: 10px;margin: 0 8px 8px 0;">
                    <div
                      style="width: 100%;height: 92%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                      <img  style="width: 100%;height: 100%" :src="fileRecord.ipSite"  :preview="fileRecord">
                    </div>
                    // 拍摄图片本人
                    <div class="contant" style=" text-align:center; color: #409eff">{{fileRecord.user}}</div>
                  </div>
                </div>
              </template>
            </a-tab-pane>
            <a-tab-pane key="112" tab="视频" v-if="videoFrontList.length>0">
              <div v-for="(fileRecord,index) in videoFrontList" :key="index">
                <div style="float: left;width:130px;height:130px;margin-right: 10px;margin: 0 8px 8px 0;">
                  <div
                    style="width: 100%;height: 92%;position: relative;padding: 8px;border: 1px solid #d9d9d9;border-radius: 4px;">
                    <video :src="fileRecord.ipSite" controls="controls" width="100%" height="100%"></video>
                  </div>
                  <div class="contant" style=" text-align:center; color: #409eff">{{fileRecord.user}}</div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="113" tab="提示" v-if="videoFrontList.length == 0 && imgFrontList.length == 0">
              <b>无报修故障信息</b>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>

        <a-tab-pane tab="维修故障信息" key="2" >
			........
        </a-tab-pane>
      </a-tabs>