fengjie-datascreen/src/components/Correspondence/index.vue

<template>
  <div class="box-4-content">
    <div class="top-box">
      <div class="title">融合通信</div>
      <div class="icon-box flex">
        <div class="item"><img src="/src/assets/images/r-icon-1.png" />白帝城</div>
        <div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
        <div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
        <div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
        <div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
        <div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div>
      </div>
    </div>
    <div class="bom-box">
      <Title2 title="最近联系" />
      <div class="table">
        <div class="header">
          <div>人员姓名</div>
          <div>部门</div>
          <div>职位</div>
          <div>时间</div>
        </div>
        <div class="list">
          <div class="item" v-for="(item, index) in 10" :key="index">
            <div>January</div>
            <div>消防队</div>
            <div>消防员</div>
            <div>消防员</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps({
    width: {
      type: Number,
      default: () => 0
    },
    id: {
      type: String,
      default: () => ''
    }
  })
</script>

<style lang="scss" scoped>
  .box-4-content {
    position: relative;
    margin: vw(8);
    width: vw(300);
    height: vh(1060);
    background-image: url('@/assets/images/bg-1.png');
    background-size: 100% 100%;
    .bom-box {
      .table {
        width: 100%;
        margin-top: vh(5);
        .header {
          height: vh(28);
          font-weight: 400;
          font-size: vw(12);
          color: #0096ff;
          display: flex;
          background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
          & > div {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .list {
          overflow-y: auto;
          height: vh(490);
          /* 滚动条整体样式 */
          &::-webkit-scrollbar {
            width: vw(4); /* 滚动条的宽度 */
          }
          /* 滚动条轨道 */
          &::-webkit-scrollbar-track {
            background: 'transparent'; /* 轨道的背景色 */
          }
          /* 滚动条滑块 */
          &::-webkit-scrollbar-thumb {
            background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
            border-radius: 5px; /* 滑块的圆角 */
          }
          .item {
            height: vh(50);
            font-weight: 400;
            font-size: vw(14);
            color: #f1f7ff;
            display: flex;
            &:nth-child(2n + 1) {
              background: linear-gradient(
                90deg,
                rgba(0, 150, 255, 0) 0%,
                rgba(0, 150, 255, 0.22) 100%
              );
            }
            & > div {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              white-space: nowrap; /* 保证文本在一行内显示 */
              overflow: hidden; /* 隐藏溢出的内容 */
              text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
            }
          }
        }
      }
      .title {
        span {
          margin-left: vw(30);
          font-weight: 800;
          font-size: vw(15);
          line-height: vh(26);
          text-align: center;
          font-style: normal;
          text-transform: none;
          background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
        }
      }
    }
    .top-box {
      width: 100%;
      height: vh(500);
      .icon-box {
        font-weight: 400;
        font-size: vw(14);
        color: #ffffff;
        line-height: vh(16);
        flex-wrap: wrap;
        .item {
          width: 33.33%;
          margin-top: vh(40);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &:nth-child(3n) {
            margin-right: 0;
          }
          & > img {
            width: vw(54);
            height: auto;
          }
        }
      }
      .title {
        width: vw(260);
        height: vh(26);
        text-align: center;
        line-height: vh(26);
        margin-left: vw(32.5);
        font-size: vw(16);
        font-weight: 800;
        color: #fff;
        background-image: url('@/assets/images/title-1.png');
        background-size: 100% 100%;
      }
    }
  }
</style>