xiangyuan-app/src/common/components/Construction.vue

<template>
  <FlexCol center :height="height" :padding="padding" :gap="gap">
    <view class="construction-frame">
      <view class="construction-inner">
        <FlexCol center :gap="16" :padding="[40, 32]">
          <Icon icon="warning-filling" :size="56" color="#f5c518" />
          <Text :text="title" fontConfig="title" textAlign="center" bold />
          <Text :text="text" fontConfig="subText" textAlign="center" color="text.second" />
          <slot />
        </FlexCol>
      </view>
    </view>
  </FlexCol>
</template>

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

withDefaults(defineProps<{
  /** 说明文字 */
  text?: string;
  /** 标题 */
  title?: string;
  /** 占位区域高度 */
  height?: number | string;
  /** 外层内边距 */
  padding?: number | number[];
  /** 内容间距 */
  gap?: number | string;
}>(), {
  text: '此功能正在开发中，敬请期待',
  title: '开发建设中',
  height: 300,
  padding: 30,
  gap: 0,
});
</script>

<style lang="scss" scoped>
.construction-frame {
  width: 100%;
  max-width: 640rpx;
  padding: 10rpx;
  border-radius: 20rpx;
  background-color: #f5c518;
  background-image: repeating-linear-gradient(
    -45deg,
    #1a1a1a 0,
    #1a1a1a 18rpx,
    #f5c518 18rpx,
    #f5c518 36rpx
  );
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

.construction-inner {
  border-radius: 14rpx;
  background: #fff;
  overflow: hidden;
}
</style>