AI_Engineering/ais_search_zj/web/src/components/NewSliderCardUpDown.vue

<template>
  <div class="slider-card">
    <a-carousel
      style="width: 700px; height: 70px"
      :dots="false"
      dot-position="left"
      autoplay
      :speed="1000"
      :autoplaySpeed="4000"
    >
      <div v-for="(qg, i) in questions" :key="'item-list-' + i">
        <div class="item-list">
          <div
            class="item"
            v-for="(q, i) in qg"
            @click="emits('ask', q.name)"
            :key="'item-' + i"
            v-login-required
          >
            <div class="diver"></div>
            <div>{{ q.name }}</div>
          </div>
        </div>
      </div>
    </a-carousel>
  </div>
</template>
<script setup>
const { questions } = window.AppGlobalConfig;

const emits = defineEmits(['ask']);
</script>
<style scoped lang="scss">
.slider-card {
  width: 782px;
  height: 34px;
  display: flex;
  //border: 1px solid red;
  position: relative;
  overflow: hidden;

  :deep(.slick-slide .item-list) {
    display: flex;
    height: 70px;
  }
  .hot-box {
    display: flex;
    align-items: center;
    font-family: PangMenZhengDao, PangMenZhengDao;
    font-weight: 400;
    font-size: 18px;
    height: 31px;
    color: #3B3B3B;
    img {
      width: 13px;
      height: 16px;
      margin-right: 7px;
    }
  }
  .item-list {
    >.item {
      border: 1px solid #E3E4E4;
      background: #fff;
      >div {
        color: #3C4755;
      }
    }
  }
  .diver {
    width: 1px;
    height: 13px;
    margin: 3px 3px 0px 13px;
    border: 1px solid #ffffff;
    opacity: 0.2;
  }
  :deep(.slick-slide .item-list .item) {
    cursor: pointer;
    height: 34px;
    // background: rgba(255,255,255, 70);
    border-radius: 4px;
    margin-right: 10px;
    //border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    .diver {
      width: 1px;
      height: 13px;
      margin-right: 13px;
      margin-left: -3px;
      border: 1px solid #ffffff;
      opacity: 0.2;
    }
    .name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #1d385f;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}
</style>