elementui的Collapse 折疊面板箭頭修改方向以及位置

<el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <span class="collapse-title" slot="title">{{ collapseTitle }}</span>
      </el-collapse-item>
 </el-collapse>

　　

data() {
    return {
      collapseTitle: "查看更多",
    }
}

<style lang="scss" scoped>
// 使得標題與箭頭位於中間
.collapse-title {
  // flex: 1 0 90%; //位於左側
  flex: 0 1 54%;// 位於中間
  order: 1;
}
::v-deep .el-collapse {
  border: none;
}

// 使得標題與箭頭位於內容的下方
.el-collapse-item {
  position: relative;
}

::v-deep .el-collapse-item__header {
  padding: 20px;
  position: absolute;
  bottom: -40px;
  width: 100%;
  // background: red;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}
// 原來是向右側方向的箭頭
// 點擊后方向
/deep/ .el-collapse-item__arrow.is-active {
  transform: rotate(-90deg);
}
//  默認方向
/deep/ .el-collapse-item__arrow,
.el-tabs__nav {
  transform: rotate(90deg);
}
</style>