xiangyuan-gov-app/src/pages/dig/components/TaskList.vue

<script setup lang="ts">
import Button from '@/components/basic/Button.vue';
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import Width from '@/components/layout/space/Width.vue';

defineEmits(['click'])
defineProps({
  icon: {
    type: String,
    default: 'task-summary',
  },
  title: {
    type: String,
    default: '村落概况',
  },
  desc: {
    type: String,
    default: '探索村落的历史渊源与发生轨迹',
  },
  button: {
    type: Boolean,
    default: true,
  },
  enable: {
    type: Boolean,
    default: true,
  }
})
</script>

<template>
  <FlexRow :padding="25" backgroundColor="white" :radius="20" justify="space-between" align="center">
    <FlexRow align="center">
      <FlexCol center radius="50%" backgroundColor="#efefef" :padding="20">
        <Icon :icon="icon || 'help-filling'" color="primary" type="material" :size="50" />
      </FlexCol>
      <Width :width="20" />
      <FlexCol class="info">
        <Text class="title" :fontSize="36" color="text.title" :text="title" />
        <Height :height="10" />
        <Text class="desc" :fontSize="24" color="text.second" :text="desc" />
      </FlexCol>
    </FlexRow>
    <Button v-if="button" 
      type="primary" 
      shape="round" 
      size="small" 
      :radius="40" 
      :touchable="enable"
      @click="$emit('click')"
      :text="enable ? '去完成' : '未开放'"
    />
    <view v-else></view>
  </FlexRow>
</template>