记一次项目样式整理

布局样式配置

左右撑满布局

website.js

website.js

setting: {
  sidebar: 'vertical', // 菜单展示方向 竖向：‘vertical’ 横向：‘horizontal’
    tag: true, // 是否展示面包屑tags
    bottom: false, // 是否展示底部
    collapse: false, // 菜单是否可收起
    search: true, // 是否有搜索按钮
    lock: false, // 是否有锁屏按钮
    fullscren: true, // 是否有全屏按钮
    theme: false,// 是否有主题切换按钮
    },

样式配置

//整体布局
$layout_padding: 0;
// 顶部
$top_height: 64px; // 顶部高度
$top_bg:#fff; // 顶部背景色 transparent
$top_color: #222;
$top_border_bottom: 1px solid #eee;

// 菜单
$sidebar_width: 208px; // 菜单宽度
$sidebar_bg: #fff; // 菜单的背景色
$sidebar_color: #222; // 菜单文字颜色
$sidebar_border_radius: 0; // 菜单圆角
$sidebar_active_bg: $--color-primary; // 菜单选中项的背景色
$sidebar_active_color: #fff; // 菜单选中项的文字颜色
$sidebar_padding_bottom: 0; // 菜单底部内边距
$sidebar_collapse: 64px; // 菜单收起之后的宽度
$sidebar_action_height: 48px; // 菜单收起按钮区域高度

// 路由记录tags
$tag_bg: #fff; // 背景色
$tag_active_font_size: 14px; // 当前路由名称字体大小
$tag_active_color: $--color-primary; // 当前路由名称文字颜色
$tag_active_bg: rgba($--color-primary, 0.1); // 当前路由名称底部边框
$tag_active_border_color: $--color-primary; // 当前路由名称底部边框

// 内容区域
$content_padding:$padding; // 内容区域上下左右间距：上下采用统一padding, 左右可根据布局调整

// 底部
$bottom_height: 48px; // 底部高度
$bottom_bg: $--color-primary; // 底部颜色

居中布局

website

// 页面展示相关配置
setting: {
  sidebar: 'vertical', // 菜单展示方向 竖向：‘vertical’ 横向：‘horizontal’
    tag: false, // 是否展示面包屑tags
    bottom: true, // 是否展示底部
    collapse: false, // 菜单是否可收起
    search: true, // 是否有搜索按钮
    lock: false, // 是否有锁屏按钮
    fullscren: true, // 是否有全屏按钮
    theme: false,// 是否有主题切换按钮
    },

样式配置

//整体布局
$layout_padding: 10px 12.5%;
// 顶部
$top_height: 64px; // 顶部高度
$top_bg:transparent; // 顶部背景色 transparent
$top_color: #222;
$top_border_bottom: 0px solid #eee;

// 菜单
$sidebar_width: 208px; // 菜单宽度
$sidebar_bg: #fff; // 菜单的背景色
$sidebar_color: #222; // 菜单文字颜色
$sidebar_border_radius:$borderRadius    ; // 菜单圆角
$sidebar_active_bg: $--color-primary; // 菜单选中项的背景色
$sidebar_active_color: #fff; // 菜单选中项的文字颜色
$sidebar_padding_bottom: 0; // 菜单底部内边距
$sidebar_collapse: 64px; // 菜单收起之后的宽度
$sidebar_action_height: 48px; // 菜单收起按钮区域高度

// 路由记录tags
$tag_bg: #fff; // 背景色
$tag_active_font_size: 14px; // 当前路由名称字体大小
$tag_active_color: $--color-primary; // 当前路由名称文字颜色
$tag_active_bg: rgba($--color-primary, 0.1); // 当前路由名称底部边框
$tag_active_border_color: $--color-primary; // 当前路由名称底部边框

// 内容区域
$content_padding:0 $padding; // 内容区域上下左右间距：上下采用统一padding, 左右可根据布局调整

// 底部
$bottom_height: 48px; // 底部高度
$bottom_bg: $--color-primary; // 底部颜色

上下布局

website

// 页面展示相关配置
setting: {
  sidebar: 'horizontal', // 菜单展示方向 竖向：‘vertical’ 横向：‘horizontal’
    tag: false, // 是否展示面包屑tags
    bottom: true, // 是否展示底部
    collapse: false, // 菜单是否可收起
    search: true, // 是否有搜索按钮
    lock: false, // 是否有锁屏按钮
    fullscren: true, // 是否有全屏按钮
    theme: false,// 是否有主题切换按钮
    },

样式配置

//整体布局
$layout_padding: 0;
// 顶部
$top_height: 128px; // 顶部高度
$top_bg:$--color-primary; // 顶部背景色 transparent
$top_color: #fff;
$top_border_bottom: 0px solid #eee;
$top_padding: $padding 12.5%;

// 菜单
$sidebar_width: 208px; // 菜单宽度
$sidebar_height: 64px;
$sidebar_bg: #fff; // 菜单的背景色
$sidebar_color: #222; // 菜单文字颜色
$sidebar_border_radius:0; // 菜单圆角
$sidebar_active_bg: $--color-primary; // 菜单选中项的背景色
$sidebar_active_color: #fff; // 菜单选中项的文字颜色
$sidebar_padding_bottom: 0; // 菜单底部内边距
$sidebar_collapse: 64px; // 菜单收起之后的宽度
$sidebar_action_height: 48px; // 菜单收起按钮区域高度

// 路由记录tags
$tag_bg: #fff; // 背景色
$tag_active_font_size: 14px; // 当前路由名称字体大小
$tag_active_color: $--color-primary; // 当前路由名称文字颜色
$tag_active_bg: rgba($--color-primary, 0.1); // 当前路由名称底部边框
$tag_active_border_color: $--color-primary; // 当前路由名称底部边框

// 内容区域
$content_padding:$padding 12.5%; // 内容区域上下左右间距：上下采用统一padding, 左右可根据布局调整

// 底部
$bottom_height: 48px; // 底部高度
$bottom_bg: $--color-primary; // 底部颜色
$bottom_color: #fff;
$bottom_border_radius:0;
$bottom_logo_size: 24px;
$bottom_padding: $padding 12.5%;