MiniPrograms/pages/approval/approval.vue

<template>
  <view class="u-page">
    <view class="u-demo-block">
      <text class="u-demo-block__title"></text>
      <view class="u-demo-block__content">
        <view class="album">
          <view class="album__avatar">
            <image
              :src="parentinfo.avatarUrl"
              mode=""
              style="width: 32px;height: 32px;"
            ></image>
          </view>
          <view class="album__content">
            <u--text
              text="XXX"
              type="primary"
              bold
              size="17"
            ></u--text>
            <u--text
              margin="0 0 8px 0"
              text="孩子的校园生活与成长记录"
            ></u--text>
            <u-album :urls="urls2"></u-album>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {mapState} from 'vuex'
    export default {
        data() {
            return {
                albumWidth: 0,
                urls2: [
                    'https://cdn.uviewui.com/uview/album/1.jpg',
                    'https://cdn.uviewui.com/uview/album/2.jpg',
                    'https://cdn.uviewui.com/uview/album/3.jpg',
                    'https://cdn.uviewui.com/uview/album/4.jpg',
                    'https://cdn.uviewui.com/uview/album/5.jpg',
                    'https://cdn.uviewui.com/uview/album/6.jpg',
                    'https://cdn.uviewui.com/uview/album/7.jpg',
                    'https://cdn.uviewui.com/uview/album/8.jpg',
                    'https://cdn.uviewui.com/uview/album/9.jpg',
                    'https://cdn.uviewui.com/uview/album/10.jpg',
                ],
            }
        },
				computed:{
					...mapState('m_parent',['parentinfo'])
				}
    }
</script>

<style lang="scss">
    .album {
        @include flex;
        align-items: flex-start;

        &__avatar {
             background-color: $u-bg-color;
             padding: 5px;
             border-radius: 3px;
         }
    
        &__content {
             margin-left: 10px;
             flex: 1;
         }
    }
</style>