Bonus-AI-LargeScreen/src/views/updateFace/faceListResultCount.vue

<template>
  <div class="body-container">
    <table class="mian">
      <thead>
      <tr class="faceListRecoResultRow">
        <th class="faceListRecoResultColume faceListRecoResultColumeSort">序号</th>
        <th class="faceListRecoResultColume faceListRecoResultColumeIPAddr">访问地址</th>
        <th class="faceListRecoResultColume faceListRecoResultColumeDate">访问时间</th>
        <th class="faceListRecoResultColume faceListRecoResultColumeTime">响应时长</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in faceRecognition" :key="index"
          :class="{ 'faceContentRowEven': index % 2 === 0, 'faceContentRowPrime': index % 2 !== 0 }">
        <td class="faceListRecoResultColume faceListRecoResultColumeSort">{{ index + 1 }}</td>
        <td class="faceListRecoResultColume faceListRecoResultColumeIPAddr">{{ item.ip }}</td>
        <td class="faceListRecoResultColume faceListRecoResultColumeDate">{{ item.returnTime }}</td>
        <td class="faceListRecoResultColume faceListRecoResultColumeTime">{{ item.responseTime }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'faceListResultCount',
  data() {
    return {
      faceRecognition: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    }
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

.mian {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column
}

/* Firefox */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* IE 10+ */
* {
  -ms-overflow-style: none;
}

.faceListRecoResultBox {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  position: relative;

}

.faceListRecoResultPic {
  width: 100%;
  height: 3.0625rem;
}

.faceListRecoResultTable {
  width: 100%;


}

tbody {
  height: 100%;
  overflow: auto;
  display: block;
  scroll-behavior: smooth;

}

.faceListRecoResultRow {
  width: 100%;
  background: linear-gradient(to bottom, rgba(47, 47, 214, .6), rgba(255, 255, 255, .7));
  display: flex;
  height: 2.1rem;
  /* 底部边框为2像素宽的黑色边框 */
}

.faceListRecoResultColume {
  font-size: 1rem;
  padding-top: .3rem;
  padding-bottom: .4rem;
  text-align: center;
  height: 2rem;
  color: #FFFFFF;

}

.faceContentRowPrime {
  background-color: RGBA(13, 31, 75, .8);
  display: flex;
}

.faceContentRowEven {
  background-color: RGBA(6, 19, 48, .9);
  display: flex;

}


.faceListRecoResultColumeSort {
  flex: 1
}

.faceListRecoResultColumeIPAddr {
  text-align: center;
  flex: 2
}

.faceListRecoResultColumeDate {
  flex: 2
}

.faceListRecoResultColumeTime {
  flex: 1
}
</style>