修改element中Collapse 折叠面板背景颜色

最新推荐文章于 2024-04-18 15:42:10 发布

键盘飞行员

最新推荐文章于 2024-04-18 15:42:10 发布

阅读量567

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_68397463/article/details/137500855

版权

样式展示：

一，使用Collapse 折叠面板

<!-- 折叠面板 -->
              <el-collapse v-model="activeNames" accordion class="foldingPanel" @change="handleChange">
                <div v-if=" securityControlData && securityControlData.find(item => item.dataName === '一键关井')" class="onASeparateLine">
                  <span class="whiteStyle oneClickSwitchText">一键关井</span>
                  <el-button
                    v-model="securityControlData.find(item => item.dataName === '一键关井').value"
                    class="oneClickWellShutdown"
                    type="danger"
                    circle
                    style="margin-left: 8px;"
                    :class="[{ 'oneClickWellShutdownopen': switchValue }, { 'oneClickWellShutdownshut': !switchValue }]"
                    @click="safetyControl('一键关井')"
                  >
                    {{ (!switchValue) ? '关井' : '解锁' }}
                  </el-button>
                </div>
                <el-collapse-item title="一键关井" name="1">
                  <!-- 状态按钮 -->
                  <div class="statusButton">
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '游动承重卡瓦')" class="singleSwitch">
                      <span class="whiteStyle fontSizeSetting">游动承重卡瓦</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '游动承重卡瓦').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '游动承重卡瓦').value }" />
                    </div>
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '游动防顶卡瓦')" class="singleSwitch">
                      <span class="whiteStyle fontSizeSetting">游动防顶卡瓦</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '游动防顶卡瓦').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '游动防顶卡瓦').value }" />
                    </div>
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '固定防顶卡瓦')" class="singleSwitch">
                      <span class="whiteStyle fontSizeSetting">固定防顶卡瓦</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '固定防顶卡瓦').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '固定防顶卡瓦').value }" />
                    </div>
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '固定承重卡瓦')" class="singleSwitch">
                      <span class="whiteStyle fontSizeSetting">固定承重卡瓦</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '固定承重卡瓦').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '固定承重卡瓦').value }" />
                    </div>
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '上闸板')" class="singleSwitch">
                      <span class="whiteStyle fontSizeSetting">上闸板</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '上闸板').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '上闸板').value }" />
                    </div>
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '下闸板')" class="singleSwitch">
                      <span class="whiteStyle fontSizeSetting">下闸板</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '下闸板').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '下闸板').value }" />
                    </div>
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '平衡阀')" class="singleSwitch">
                      <span class="whiteStyle fontSizeSetting">平衡阀</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '平衡阀').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '平衡阀').value }" />
                    </div>
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '放喷阀')" class="singleSwitch">
                      <span class="whiteStyle fontSizeSetting">放喷阀</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '放喷阀').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '放喷阀').value }" />
                    </div>
                    <div v-if="securityControlData && securityControlData.find(item => item.dataName === '环形防喷器')" class="singleSwitch">
                      <span class="whiteStyle  fontSizeSetting">环形防喷器</span>
                      <el-button v-model="securityControlData.find(item => item.dataName === '环形防喷器').value" type="warning" icon="el-icon-s-opportunity" circle size="mini" :class="{ 'switchGray': !securityControlData.find(item => item.dataName === '环形防喷器').value }" />
                    </div>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="闸板互锁" name="2">
                  <div style="margin-left: -255px; font-size: 16px;">闸板互锁: <span style="color: red; font-weight: 600; margin-left: 60px">离线</span></div>
                </el-collapse-item>
                <el-collapse-item title="卡瓦互锁" name="3">
                  <div style="margin-left: -255px; font-size: 16px;">卡瓦互锁: <span style="color: red; font-weight: 600; margin-left: 60px">离线</span></div>
                </el-collapse-item>
                <el-collapse-item title="井口稳定器" name="4">
                  <div style="margin-left: -240px; font-size: 16px;">井口稳定器: <span style="color: red; font-weight: 600; margin-left: 60px">离线</span></div>
                </el-collapse-item>
              </el-collapse>

二.样式修改

// 折叠面板
    /deep/.el-collapse {
      background-color: #303f4b !important;
    }
    /deep/.el-collapse,.el-collapse-item__wrap {
      border: none;
      background-color: #303f4b !important;
    }
    /deep/ .el-collapse-item__header {
        color: #fff;
        background-color: #303f4b !important;
    }
    /deep/ .el-collapse-item__content {
        color: #fff;
        background-color: #303f4b !important;
    }

通过添加样式穿透和!important ；实现修改背景样式