xiangyuan-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 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,
  },
})
</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" 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" @click="$emit('click')">去完成</Button>
    <view v-else></view>
  </FlexRow>
</template>