# 卡片-可展开收起

<template>
  <div class="wrapper">
    <dof-minibar title="5.5卡片-可展开收起"></dof-minibar>
    <div class="title-box">
      <text class="title-text">示例</text>
    </div>
    <div class="card-box">
      <dof-card class="m-b-16" :collapsable="true" :collapsed="false">
        <div class="placeholder">
          <div class="slider-text-box">
            <text class="slider-text">温度</text>
            <text class="divider">|</text>
            <text class="slider-text">{{ value }}℃</text>
          </div>
        </div>
        <div slot="body">
          <dof-card-item>
            <div class="item-box">
              <dof-slider v-model="sv" :min="1" :max="4" class="m-b-20">
                <dof-slider-scale :value="1">低</dof-slider-scale>
                <dof-slider-scale :value="2">中</dof-slider-scale>
                <dof-slider-scale :value="3">高</dof-slider-scale>
                <dof-slider-scale :value="4">强</dof-slider-scale>
              </dof-slider>
            </div>
          </dof-card-item>
        </div>
      </dof-card>
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  background-color: #f9f9f9;
}
.m-b-16 {
  margin-bottom: 16px;
}
.title-box {
  padding: 32px;
  background-color: #e5e5e8;
}
.title-text {
  font-family: PingFangSC-Medium;
  font-size: 36px;
  color: #000000;
  font-weight: 500;
}
.card-box {
  padding: 16px 32px;
}
.slider-text-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.slider-text {
  font-family: COLMO-Mono-Regular;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.8);
}
.divider {
  font-family: COLMO-Mono-Regular;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 14px;
}
.placeholder {
  /* height: 104px; */
  display: flex;
  flex-direction: row;
  align-items: center;
}
.item-box {
  padding-bottom: 32px;
}

@media screen and (weex-theme: colmo) {
  .wrapper {
    background-color: #151617;
  }
}
</style>

<script>
import { DofMinibar, DofCard, DofCardItem, DofSlider, DofSliderScale, Core } from 'dolphin-weex-ui'
import { Bridge } from 'dolphin-native-bridge'
export default {
  components: { DofMinibar, DofCard, DofCardItem, DofSlider, DofSliderScale },
  data: () => ({
    sv: 1
  }),
  computed: {},
  created() {
    const params = {
      event: 'error1',
      eventParams: {
        param_1: 'xxxxx',
        param_2: 123456
      }
    }

    Bridge.trackEvent(params)
      .then(res => {
        Core.alert(res)
      })
      .catch(err => {
        Core.alert(err)
      })
  },
  methods: {}
}
</script>