# 折叠面板

<template>
  <div class="wrapper">
    <dof-minibar title="4.6折叠面板"></dof-minibar>
    <scroller>
      <div class="title-box">
        <text class="title-text">基础样式</text>
        <text class="desc-text">多个折叠面板排列时，允许展开所有面板</text>
      </div>
      <div class="box">
        <dof-collapse @change="onChange_01" :activeNames="activeNames_01">
          <dof-collapse-item name="1" :collapsed="collapsed">
            <div slot="title"><text class="change-title">单元格1</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="2">
            <div slot="title"><text class="change-title">单元格2</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构、界面、任务流程、操作方式、视觉风格、用户情感绑定、品牌感等元素在整个产品系统中保持一致，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
            </div>
          </dof-collapse-item>
          <dof-collapse-item name="3">
            <div slot="title"><text class="change-title">单元格3</text></div>
            <div class="collapse-content">
              <text class="collapse-content-text"
                >产品信息架构，帮助用户高效、轻松地使用产品，给用户带来统一流畅的使用体验。</text
              >
            </div>
          </dof-collapse-item>
        </dof-collapse>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #fff;
}
.title-box {
  padding: 32px;
  background-color: #e5e5e8;
}
.title-text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  font-weight: 500;
}
.desc-text {
  font-size: 28px;
  color: #666;
  margin-top: 16px;
}

.change-title {
  height: 104px;
  line-height: 104px;
  font-size: 32px;
  color: #000000;
}
.collapse-content {
  padding-left: 32px;
  /* background-color: #f9f9f9; */
}
.collapse-content-text {
  line-height: 60px;
  font-size: 28px;
  color: #666666;
  padding: 30px 64px 30px 0;
}

@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
  .change-title {
    color: rgba(255, 255, 255, 0.8);
    font-family: PingFangSC-Regular;
    font-size: 32px;
  }
  .collapse-content-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 24px;
    line-height: 48px;
  }
}
</style>

<script>
import { DofMinibar, DofCollapse, DofCollapseItem } from 'dolphin-weex-ui'
export default {
  components: { DofMinibar, DofCollapse, DofCollapseItem },
  data: () => ({
    activeNames_01: [1]
  }),
  created() {},
  methods: {
    onChange_01(e) {
      this.activeNames_01 = e.name
      modal.toast({
        message: JSON.stringify(this.activeNames_01)
      })
    }
  }
}
</script>