Modification of arrow direction and position of Element-Ui's el-collapse folding panel

During development, we often modify the style of element-ui. Sometimes it is difficult to find the relative style class name. The following is a class that can modify the el-collapse position and arrow direction. If the style does not take effect, you can add a style. Penetrate (deep)

html part:

<el-collapse accordion class="question-list">
   <el-collapse-item class="question-item">
      <template slot="title" class="title">title</template>
      <div class="text">text</div>
   </el-collapse-item>
</el-collapse>

css part:

<style lang="scss" scoped>
// 使得标题与箭头位于中间
.collapse-title {
  // flex: 1 0 90%; //位于左侧
  flex: 0 1 54%;// 位于中间
  order: 1;
}
.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;
}
// 原来是向右侧方向的箭头
//  默认方向
.el-collapse-item__arrow,
.el-tabs__nav {
  transform: rotate(90deg);
}
// 点击后方向
/deep/ .el-collapse-item__arrow.is-active {
  transform: rotate(-90deg);
}

</style>