hongze_fsms_web/src/components/dropdown-text/index.vue

<script setup>
  
</script>

<template>
  <div class="dropdown-text-box">
    <!-- <el-button type="primary" 
    > -->
      <div class="dropdown-text">
        <slot></slot>
      </div>
      <el-icon style="margin-left: 13px;"><arrow-down /></el-icon>
    <!-- </el-button> -->
  </div>
</template>
  
<style lang="scss">
  .dropdown-text-box{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--themeColor);
    border-radius: 4px;
    color: white;
    cursor: pointer;
    height: 40px; 
    padding: 9px 13px 9px 20px;
    box-sizing: border-box;
    .dropdown-text{
      display: flex;
      align-items: center;
      height: 100%;
      border-right: solid 1px white;
      padding-right: 20px;
      flex-grow: 1;
    }
    &:hover{
      background-color: #c4b565;
      border-color: #c4b565;
    }
  }
</style>