<template>
  <page-layout>
   <q-list class="">
      <q-expansion-item
        v-for="item,i in list"
        :key="i"
        dense-toggle
        switch-toggle-side
        :label="item.title"
        class="expand-item text-grey-8"
      >
        <q-card>
          <q-card-section>
            <div v-html="item.content"></div>
          </q-card-section>
        </q-card>
      </q-expansion-item>
    </q-list>
  </page-layout>
</template>
<script setup>
import {reactive} from 'vue'
// TODO:app help
const list = reactive([{title:'xxxx',content:'asdfads<br/>asdf'},{title:'aaaa',content:'asdfads<br/>asdf'}])
</script>
<style lang="scss" scoped>
.expand-item{
  :deep(.q-item__section--avatar){
    min-width: auto;
  }
}
</style>
