rsxm-master/src/views/recruitment/card/ListView.vue

<template>
  <!-- 页面的 HTML 模板部分 -->
  <div>
    <!-- 表头保持固定 -->
    <ul class="header-list">
      <li class="singleBackground topLi">
<!--        <div> 序号</div>-->
        <div>区域</div>
        <div>入职人数</div>
        <div>占比</div>
      </li>
    </ul>
    <!-- 滚动区域 -->
    <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
      <div class="scroll_list" :style="{ transform: `translate(0vw,-${scrollTop}px)` }">
        <div ref="scrollItemBox">
          <li v-for="(item, index) in pieData" :key="index" @click="visible = true"
            :class="{ 'singleBackground': index % 2 == 0, 'evenBackground': index % 2 == 1 }">
<!--            <div>{{ `${index + 1 >= 10 ? index + 1 : '0' + (index + 1)}` }}</div>-->
            <div>{{ item.zone }}</div>
            <div>{{ item.count }}人</div>
            <div>{{ item.proportion }}</div>
            <div></div>
          </li>
        </div>
        <!-- 复制一份数据用于无缝滚动 -->
        <div v-html="copyHtml"></div>
      </div>
    </div>
  </div>
  <div class="carousel-modal-container" v-if="visible">
    <el-carousel :interval="4000" indicator-position="none" :autoplay="false" height="14vw">
      <el-carousel-item>
        <div class="carousel-item-content">
          <div class="carousel-item-title">
            仁寿县劳务合作社联合送工
          </div>
          <div style="height:10vw;">
            <img src="@/assets/recruitment/plghlhsg5.svg" class="carousel-image">
          </div>
        </div>
      </el-carousel-item>

      <el-carousel-item>
        <div class="carousel-item-content">
          <div class="carousel-item-title">
            批量化规模化送工现场1
          </div>
          <div style="height:10vw;">
            <img src="@/assets/recruitment/plghlhsg.svg" class="carousel-image">
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="carousel-item-content">
          <div class="carousel-item-title">
            批量化规模化送工现场2
          </div>
          <div style="height:10vw;">
            <img src="@/assets/recruitment/plghlhsg4.svg" class="carousel-image">
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="carousel-item-content">
          <div class="carousel-item-title">
            仁寿县劳务合作社联合送工
          </div>
          <div style="height:10vw;">
            <img src="@/assets/recruitment/plghlhsg3.svg" class="carousel-image">
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="close-btn" @click="closeModal">X</div>
  </div>

</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
const pieRef = ref(null);
const pieData = [
  {
    "zone": "四川 - 成都",
    "count": 2920,
    "proportion": 29.87
  },
  {
    "zone": "省外",
    "count": 1490,
    "proportion": 15.24
  },
  {
    "zone": "四川 - 南充",
    "count": 598,
    "proportion": 6.12
  },
  {
    "zone": "四川 - 内江",
    "count": 473,
    "proportion": 4.84
  },
  {
    "zone": "四川 - 乐山",
    "count": 421,
    "proportion": 4.31
  },
  {
    "zone": "四川 - 眉山",
    "count": 386,
    "proportion": 3.95
  },
  {
    "zone": "四川 - 巴中",
    "count": 373,
    "proportion": 3.82
  },
  {
    "zone": "四川 - 宜宾",
    "count": 313,
    "proportion": 3.2
  },
  {
    "zone": "四川 - 达州",
    "count": 313,
    "proportion": 3.2
  },
  {
    "zone": "四川 - 广元",
    "count": 300,
    "proportion": 3.07
  },
  {
    "zone": "四川 - 泸州",
    "count": 294,
    "proportion": 3.01
  },
  {
    "zone": "四川 - 遂宁",
    "count": 278,
    "proportion": 2.84
  },
  {
    "zone": "四川 - 自贡",
    "count": 276,
    "proportion": 2.82
  },
  {
    "zone": "四川 - 资阳",
    "count": 272,
    "proportion": 2.78
  },
  {
    "zone": "四川 - 绵阳",
    "count": 231,
    "proportion": 2.36
  },
  {
    "zone": "四川 - 德阳",
    "count": 222,
    "proportion": 2.27
  },
  {
    "zone": "四川 - 凉山",
    "count": 177,
    "proportion": 1.81
  },
  {
    "zone": "四川 - 雅安",
    "count": 166,
    "proportion": 1.7
  },
  {
    "zone": "四川 - 广安",
    "count": 162,
    "proportion": 1.66
  },
  {
    "zone": "四川 - 攀枝花",
    "count": 54,
    "proportion": 0.55
  },
  {
    "zone": "四川 - 阿坝",
    "count": 47,
    "proportion": 0.48
  },
  {
    "zone": "四川 - 甘孜",
    "count": 9,
    "proportion": 0.09
  }
]
const visible = ref(false);
// 滚动相关变量
const scrollTop = ref(0); // 列表滚动高度
const speed = ref(120); // 滚动速度
const copyHtml = ref(''); // 复制的HTML内容
const scrollItemBox = ref(null); // 滚动项容器引用
let timer = null;

// 生命周期钩子
onMounted(() => {
  if (pieRef.value) {
    const chart = echarts.init(pieRef.value);
    chart.setOption(option);
  }

  // 初始化滚动
  initScroll();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

// 初始化滚动
function initScroll() {
  setTimeout(() => {
    if (scrollItemBox.value) {
      copyHtml.value = scrollItemBox.value.innerHTML;
      startScroll();
    }
  }, 100);
}

// 鼠标移入停止滚动
function mEnter() {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
}

// 鼠标移出继续滚动
function mLeave() {
  startScroll();
}

// 开始滚动
function startScroll() {
  if (timer) return;
  timer = setInterval(() => {
    scrollTop.value++;
    // 获取需要滚动的盒子的高度
    if (scrollItemBox.value) {
      const scrollHeight = scrollItemBox.value.offsetHeight;
      // 当滚动高度大于等于盒子高度时，从头开始滚动
      if (scrollTop.value >= scrollHeight) {
        scrollTop.value = 0;
      }
    }
  }, speed.value);
}

// 关闭弹窗
function closeModal() {
  visible.value = false;
  startScroll();
}

</script>

<style lang="scss" scoped>
.carcTitle {
  height: 1.4vw;
  line-height: 1.4vw;
  font-size: 0.8vw;
  text-align: center;
  color: #c4f3fe;
  background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat center;
  background-size: auto 100%;
  margin-top: 0.7vw;
}

.pieMain {
  position: relative;

  .pieBox {
    margin: 0 auto;
    width: 7.6vw;
    height: 7.6vw;
    // border: 1px solid #fff;
    margin-top: 0.5vw;
    background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat center;
    background-size: 100%;
  }

  .pieTitle {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    z-index: 10;
    margin-top: -0.5vw;
  }
}

/* 通用列表样式 - 适用于表头和数据行 */
.header-list,
.scroll_list>div {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 统一的列表项基础样式 */
.header-list li,
.scroll_list li {
  font-size: 0.9vw;
  color: #C4F3FE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2vw;
  padding: 0 0.8vw;
  border-radius: 0.104vw;
  transition: all 0.2s ease;
  list-style: none;
  margin: 0;

  >div {
    height: 100%;
    line-height: 2vw;
    padding: 0 0.2vw;
  }

  >div:first-child {
    width: 50%;
    text-align: left;
    font-weight: bold;
  }

  >div:nth-child(2) {
    width: 25%;
    text-align: center;
  }

  >div:nth-child(3) {
    width: 30%;
    text-align: right;
    font-weight: bold;
  }

  >div:nth-child(4) {
    display: none;
    /* 隐藏多余的div */
  }
}

/* 数据行的悬停效果 */
.scroll_list li {
  &:hover {
    background-color: rgba(203, 242, 250, 0.1);
  }
}

/* 滚动容器样式 */
.scroll_parent_box {
  width: 100%;
  height: 15vw;
  /* 减去表头高度 */
  overflow: hidden;
  position: relative;
}

/* 滚动列表容器 */
.scroll_list {
  transition: all 0ms ease-in 0s;
  width: 100%;
}

.singleBackground {
  background-color: rgba(22, 65, 85, 0.5);
}

.evenBackground {
  background-color: rgba(22, 65, 85, 0.9);
}

.topLi {
  /* 保留表头特有的样式，但使用与数据行一致的基础样式 */
  border: 0.026vw solid;
  border-image: linear-gradient(180deg, rgba(203, 242, 250, 0), rgba(203, 242, 250, 0.8)) 1 1;
}

/* 统一背景色样式 - 表头和数据行使用相同的背景色机制 */
.singleBackground {
  background-color: rgba(22, 65, 85, 0.5);
}

.evenBackground {
  background-color: rgba(22, 65, 85, 0.9);
}

::deep(.el-dialog__header) {
  display: none !important;
}

/* 轮播弹窗容器样式 */
.carousel-modal-container {
  position: fixed;
  top: 54%;
  left: 71%;
  transform: translate(-50%, -50%);
  width: 14vw;
  border-radius: 4px 4px 4px 4px;
  z-index: 100;
  border-radius: 0.104vw;
  padding: 0.26vw;
  height: 14vw;

  .close-btn {
    position: absolute;
    top: 13.5vw;
    right: 5.5vw;
    width: 2vw;
    height: 2vw;
    background-color: #171E22;
    border: 1px solid rgba(203, 242, 250, 0.2);
    border-radius: 50%;
    color: #C4F3FE;
    font-size: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 101;
    // &:hover {
    //   background-color: #1E262A;
    //   border-color: rgba(203, 242, 250, 0.4);
    // }
  }

  .carousel-item-content {
    border-radius: 5px 5px 5px 5px;
    background-color: #171E22;
    padding: 0.001vw 0.4vw 1vw;

    .carousel-item-title {
      background: linear-gradient(90deg, rgba(203, 242, 250, 0) 0%, rgba(203, 242, 250, 0.43) 58%, rgba(203, 242, 250, 0) 100%);
      opacity: 0.5;
      width: 100%;
      height: 1.1vw;
      margin-top: 1vw;
      font-size: 0.8vw;
      line-height: 1.1vw;
      text-align: center;
      border-radius: 4px 4px 4px 4px;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}

::deep(.el-carousel__container) {
  height: 14vw !important;
}
</style>