collapse折叠标题

 

 

代码：

<template>

  <div class="businessAdd">

    <div style="margin-left: 40px;height: auto;">

      <!-- 标题 -->

      <div class="" style="display: flex;padding-top: 20px;">

        <div class="topSign" />

        <span class="topWords">

          商机立项

        </span>

      </div>

      <!-- 内容 -->

      <div class="buttonContent">

        <el-row type="flex">

          <el-button type="primary">保存</el-button>

          <el-button type="primary">提交</el-button>

          <el-button type="primary">返回</el-button>

        </el-row>

      </div>

      <!-- 基本信息 -->

      <div>

        <el-collapse v-model="activeNames" style="border:none;margin-left:30px;">

          <div class="">

            <el-collapse-item name="1">

              <span slot="title" class="collapse-title">基本信息</span>

              <div class="row">

              </div>

            </el-collapse-item>

          </div>

          <!--项目概况-->

          <div class="">

            <el-collapse-item name="2">

              <span slot="title" class="collapse-title">项目工时/计划</span>

              <div class="row1">

              </div>

            </el-collapse-item>

          </div>

          <div class="">

            <el-collapse-item name="3">

              <span slot="title" class="collapse-title">项目成本收入</span>

              <div class="row">

              </div>

            </el-collapse-item>

          </div>

          <div class="">

            <el-collapse-item name="4">

              <span slot="title" class="collapse-title">附件上传</span>

              <div class="row">

              </div>

            </el-collapse-item>

          </div>

        </el-collapse>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  data(){

    return {

      //展开标题

      activeNames: ['1', '2', '3','4'],

    }

  },

  methods: {

  },

}

</script>

<style lang="scss" scoped>

.businessAdd {

    width: 98%;

    height: auto;

    background-color: #FFFFFF;

    margin: 0 auto;

    padding-right: 2%;

    border-radius: 10px;

    .topSign{

      width: 3px;

      height: 16px;

      background: #1497ED;

      margin-top: 5px;

      margin-right: 10px;

      border-radius: 2px 2px 2px 2px;

      opacity: 1;

    }

    .topWords{

      font-size: 16px;

      font-family: Microsoft YaHei-Bold, Microsoft YaHei;

      font-weight: bold;

      color: #333333;

      line-height: 28px;

    }

    .buttonContent{

      width: 50%;

      height: 50px;

      margin: 10px 0;

    }

    .collapse-title{

        flex: 1 0 90%;

        order: 1;

      }

       ::v-deep .el-collapse-item__header{

        font-weight: 900;

        background-color:#F8F9FA;

        border-radius: 5px;

        font-size: 16px;

        padding-left: 40px;

      }

      .el-collapse-item__header {

        flex: 1 0 auto;

        order: -1;

      }

}

</style>

 

改变下拉的标志

 

 

.businessAdd {

    width: 98%;

    height: auto;

    background-color: #FFFFFF;

    margin: 0 auto;

    padding-right: 2%;

    border-radius: 10px;

    padding-bottom: 30px;

    .topSign{

      width: 3px;

      height: 16px;

      background: #1497ED;

      margin-top: 5px;

      margin-right: 10px;

      border-radius: 2px 2px 2px 2px;

      opacity: 1;

    }

    .topWords{

      font-size: 16px;

      font-family: Microsoft YaHei-Bold, Microsoft YaHei;

      font-weight: bold;

      color: #333333;

      line-height: 28px;

    }

    .buttonContent{

      width: 50%;

      height: 50px;

      margin: 10px 0;

    }

    .collapse-title{

        flex: 1 0 90%;

        order: 1;

      }

       ::v-deep .el-collapse-item__header{

        font-weight: 900;

        background-color:#F8F9FA;

        border-radius: 5px;

        font-size: 16px;

        padding-left: 40px;

      }

      .el-collapse-item__header {

        flex: 1 0 auto;

        order: -1;

      }

      ::v-deep .el-icon-arrow-right:before {

        background: url('../../../../assets/right.png') no-repeat !important;//改变下拉标志

        content: '' !important;

        display: block !important;

        width: 20px !important;

        height: 20px !important;

        font-size: 20px !important;

        background-size: 20px !important;

      }

}