feat: 初始化项目配置和样式- 添加项目环境变量配置文件 (.env)
- 创建代码忽略文件列表 (.gitignore) - 设置代码格式化规则 (.prettierrc)- 添加各种样式文件,包括背景、边框、按钮、卡片等组件样式 - 创建暗黑主题样式文件 - 添加表单和代码样式文件
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
<!-- 装修组件容器 -->
|
||||
<template>
|
||||
<view :style="[elStyles, elBackground]"><slot /></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
/**
|
||||
* 容器组件 - 装修组件的样式容器
|
||||
*/
|
||||
import { computed, provide, unref } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const props = defineProps({
|
||||
styles: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
|
||||
// 组件样式
|
||||
const elBackground = computed(() => {
|
||||
if (props.styles) {
|
||||
if (props.styles.bgType === 'color') {
|
||||
return { background: props.styles.bgColor };
|
||||
}
|
||||
if (props.styles.bgType === 'img') {
|
||||
return {
|
||||
background: `url(${sheep.$url.cdn(props.styles.bgImg)}) no-repeat top center / 100% auto`,
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const elStyles = computed(() => {
|
||||
if (props.styles) {
|
||||
return {
|
||||
marginTop: `${props.styles.marginTop || 0}px`,
|
||||
marginBottom: `${props.styles.marginBottom || 0}px`,
|
||||
marginLeft: `${props.styles.marginLeft || 0}px`,
|
||||
marginRight: `${props.styles.marginRight || 0}px`,
|
||||
paddingTop: `${props.styles.paddingTop || 0}px`,
|
||||
paddingRight: `${props.styles.paddingRight || 0}px`,
|
||||
paddingBottom: `${props.styles.paddingBottom || 0}px`,
|
||||
paddingLeft: `${props.styles.paddingLeft || 0}px`,
|
||||
borderTopLeftRadius: `${props.styles.borderTopLeftRadius || 0}px`,
|
||||
borderTopRightRadius: `${props.styles.borderTopRightRadius || 0}px`,
|
||||
borderBottomRightRadius: `${props.styles.borderBottomRightRadius || 0}px`,
|
||||
borderBottomLeftRadius: `${props.styles.borderBottomLeftRadius || 0}px`,
|
||||
overflow: 'hidden',
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user