改造一下elementui的Collapse 折叠面板，让它最右边的下拉箭头放在start-block里面，而且图标用我自定义的图片而且也拥有箭头旋转的效果

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item name="1">
      <template #title>
        <div class="start-block">
          <span>面板 1</span>
          <img 
            class="custom-arrow" 
            :src="arrowIcon" 
            alt="箭头"
            :class="{ rotated: isOpen('1') }"
          />
        </div>
      </template>
      内容 1
    </el-collapse-item>
    <el-collapse-item name="2">
      <template #title>
        <div class="start-block">
          <span>面板 2</span>
          <img 
            class="custom-arrow" 
            :src="arrowIcon" 
            alt="箭头"
            :class="{ rotated: isOpen('2') }"
          />
        </div>
      </template>
      内容 2
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1'],
      arrowIcon: 'path/to/your/custom-arrow.png', // 自定义箭头图片路径
    };
  },
  methods: {
    // 判断折叠面板是否展开
    isOpen(name) {
      return this.activeNames.includes(name);
    },
  },
};
</script>

<style scoped>
.start-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.custom-arrow {
  width: 16px; /* 自定义箭头宽度 */
  height: 16px; /* 自定义箭头高度 */
  transition: transform 0.3s ease;
}

.rotated {
  transform: rotate(90deg); /* 旋转90度 */
}
</style>