DataCenter/src/components/PicTimeline.vue

<template>
  <div class="pic-container">
    <div v-for="(item, index) in list" :key="item" class="pic-main">
      <div :class="index % 2 == 0 ? 'box' : 'box bottom-box'">
        <div class="card-note">
          {{ item.userName }} 拍摄于
          <br />
          {{ item.createTime }}
        </div>
        <div class="media-box" style="position: relative">
          <el-image
            v-if="item.mediaType == 1"
            style="width: 100%; height: 100%"
            fit="contain"
            :src="item.downloadUrl"
            :preview-src-list="previewSrcList"
          ></el-image>
          <video
            style="width: 100%; height: 100%"
            v-else
            :src="item.downloadUrl"
          ></video>
          <img
            @click="openVideoModal(item.downloadUrl)"
            v-if="item.mediaType == 2"
            src="../assets/icon-player.png"
            style="
              object-fit: contain;
              width: 40px;
              height: 40px;
              position: absolute;
              top: calc(50% - 20px);
              left: calc(50% - 20px);
              background: #fff;
              border-radius: 50%;
            "
            alt=""
          />
        </div>
        <div class="checkbox-group df aic jcsa">
          <el-checkbox
            @change="auditMedia(item.id, 1, index, item.mediaType)"
            :model-value="item.audit == 1"
            label="通过"
          ></el-checkbox>
          <el-checkbox
            @change="auditMedia(item.id, 2, index, item.mediaType)"
            :model-value="item.audit == 2"
            label="未通过"
          ></el-checkbox>
        </div>
      </div>
      <div :class="index % 2 == 0 ? 's-line' : 's-line top210px'"></div>
      <div class="point"></div>
      <div class="l-line" v-if="index + 1 != list.length"></div>
    </div>
    <el-dialog
      v-model="videoModal"
      title="视频审核"
      width="20%"
      :before-close="videoClose"
    >
      <video
        autoplay
        controls
        style="width: 100%; height: 100%"
        :src="currentUrl"
      ></video>
    </el-dialog>
  </div>
</template>
<script>
import { onMounted, ref, watch } from "vue";
import store from "../store";
import { useStore } from "vuex";
import api from "../apis/fetch";
export default {
  setup(props, ctx) {
    let currentUrl = ref("");
    let videoModal = ref(false);
    function openVideoModal(url) {
      currentUrl.value = url;
      videoModal.value = true;
    }

    async function auditMedia(mediaId, a, index, mediaType) {
      //   console.log(mediaId, a, index, mediaType);
      let res = await api.auditMedia({
        mediaId,
        audit: a,
      });
    }
    onMounted(() => {});
    return {
      currentUrl,
      videoModal,
      openVideoModal,
      auditMedia,
      list,
    };
  },
};
</script>
<style scoped>
* {
  --box-width: 200px;
}

.pic-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 20px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.pic-main {
  position: relative;
  width: 120px;
}
.box {
  position: absolute;
  height: 240px;
  width: var(--box-width);
  border: 1px solid #dddddd;
  transition: all 0.5s;
  background: #fff;
  z-index: 10;
}

.s-line {
  position: absolute;
  left: 100px;
  top: 242px;
  height: 20px;
  border-left: 2px dashed;
  box-sizing: border-box;
  border-color: #97caf6;
}
.point {
  position: relative;
  left: 93px;
  top: 258px;
  width: 16px;
  height: 16px;
  background-image: url(../images/blue-circle.png);
}

.l-line {
  position: relative;
  bottom: 30px;
  left: 111px;
  top: 249px;
  height: 3px;
  width: 100px;
  background-color: #0094fe;
}

.bottom-box {
  top: 290px;
}
.top210px {
  top: 270px;
}

.box:hover {
  transform: scale(1.2);
}

.media-box {
  width: 80px;
  height: 80px;
  margin-top: 10px;
}

.card-note {
  height: 30px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #777777;
  padding: 10px 20px;
}

.media-box {
  width: 100%;
  height: 100px;
  margin-top: 20px;
}

.checkbox-group {
  width: 200px;
  height: 50px;
  margin-top: 20px;
}
</style>