uniapp使用scss仿tailwindcss进行常用样式封装便捷开发小程序或web

小程序版本

如果你开发的是小程序的话,或者包含小程序,就只能选这个版本,如果不包含小程序,更推荐使用H5版本

// 文字粗细
$font-weights: (thin: 100,extra-light: 200,light: 300,regular: 400,medium: 500,semi-bold: 600,bold: 700,extra-bold: 800,black: 900
);// 文字大小
@for $i from 8 through 25 {.font-#{$i} {font-size: #{$i}px;}
}@each  $name, $weight in $font-weights {.font-#{$name} {font-weight: $weight;}
}$aligns: (left,center,right,justify
);// 文字位置
@each $align in $aligns {.text-#{$align} {text-align: $align;}
}// 颜色
$colors: (red: #ff0000,darkRed: #d90209,green: #00ff00,blue: #0000ff,black: #000000,white: #ffffff,gray: #808080,lightGray: #e6e6e6,orange: #ffA500,yellow: #ffff00,pink: #ff69b4,purple: #800080, brown: #a52a2a,cyan: #00ffff,lime: #00ff00,navy: #000080,olive: #808000,khaki: #f0e68c,salmon: #fa8072,coral: #ff7f50,gold: #ffd700,lavender: #e6e6fa,turquoise: #40e0d0,peach: #ffdab9,orchid: #da70d6,crimson: #dc143c,forestGreen: #228b22,sienna: #a0522d,sirocco: #736f6e,caputMortuum: #592720,zomp: #39a78e,paleTurquoise: #afeeee,lightSeaGreen: #20b2aa,dodgerBlue: #1e90ff,mediumSlateBlue: #7b68ee,blueViolet: #8a2be2,mediumOrchid: #ba55d3,thistle: #d8bfd8,deepPink: #ff1493,hotPink: #ff69b4,darkSlateGray: #2f4f4f,dimGray: #696969,slateBlue: #6a5acd,mediumBlue: #0000cd,cadetBlue: #5f9ea0,mediumAquamarine: #66cdaa,darkSeaGreen: #8fbc8f,lightGreen: #90ee90,springGreen: #00ff7f,chartreuse: #7fff00,mediumSpringGreen: #00fa9a,paleGoldenrod: #eee8aa,goldenrod: #daa520,sandyBrown: #f4a460,peru: #cd853f,rosyBrown: #bc8f8f,wheat: #f5deb3,darkOrange: #ff8c00,
);// 文字颜色
@each $name, $color in $colors {.text-#{$name} {color: $color;}
}// 布局
// Flex容器样式
.flex {display: flex;
}// 设置主轴方向
.flex-row {flex-direction: row;
}.flex-row-reverse {flex-direction: row-reverse;
}.flex-col {flex-direction: column;
}.flex-col-reverse {flex-direction: column-reverse;
}.flex-center {display: flex;justify-content: center;align-items: center;
}// 垂直居中
.vertical-center {display: flex;align-items: center; // 垂直居中
}// 水平居中
.horizontal-center {display: flex;justify-content: center; // 水平居中
}// 设置主轴对齐方式
.justify-start {justify-content: flex-start;
}.justify-end {justify-content: flex-end;
}.justify-center {justify-content: center;
}.justify-between {justify-content: space-between;
}.justify-around {justify-content: space-around;
}// 设置交叉轴对齐方式
.items-start {align-items: flex-start;
}.items-end {align-items: flex-end;
}.items-center {align-items: center;
}.items-baseline {align-items: baseline;
}.items-stretch {align-items: stretch;
}.items-spaceAround {align-items: space-around;
}.items-spaceBetween {align-items: space-between;
}// 设置子项在交叉轴上的对齐方式
.align-self-auto {align-self: auto;
}.align-self-flex-start {align-self: flex-start;
}.align-self-flex-end {align-self: flex-end;
}.align-self-center {align-self: center;
}.align-self-baseline {align-self: baseline;
}.align-self-stretch {align-self: stretch;
}// 设置子项的排序
.order-1 {order: 1;
}.order-2 {order: 2;
}.order-3 {order: 3;
}// 设置子项的伸缩比例
.flex-grow-1 {flex-grow: 1;
}.flex-grow-2 {flex-grow: 2;
}.flex-grow-3 {flex-grow: 3;
}// 设置子项的初始尺寸
.flex-shrink-1 {flex-shrink: 1;
}.flex-shrink-2 {flex-shrink: 2;
}.flex-shrink-3 {flex-shrink: 3;
}// 设置子项的伸缩基准
.flex-basis-auto {flex-basis: auto;
}.flex-basis-fill {flex-basis: fill;
}.flex-basis-content {flex-basis: content;
}.flex-basis-percent {flex-basis: 50%;
}// margin布局样式
.m-auto {margin: auto;
}.mt-auto {margin-top: auto;
}.mr-auto {margin-right: auto;
}.mb-auto {margin-bottom: auto;
}.ml-auto {margin-left: auto;
}.mx-auto {margin-left: auto;margin-right: auto;
}.my-auto {margin-top: auto;margin-bottom: auto;
}@for $i from -10 through 20 {.margin-#{$i} {margin: #{$i}px;}
}@for $i from -10 through 20 {.mt-#{$i} {margin-top: #{$i}px;}
}@for $i from -10 through 20 {.mr-#{$i} {margin-right: #{$i}px;}
}@for $i from -10 through 20 {.mb-#{$i} {margin-bottom: #{$i}px;}
}@for $i from -10 through 20 {.margin-left-#{$i} {margin-left: #{$i}px;}
}@for $i from -10 through 20 {.my-#{$i} {margin-top: #{$i}px;margin-bottom: #{$i}px;}
}@for $i from -10 through 20 {.mx-#{$i} {margin-right: #{$i}px;margin-left: #{$i}px;}
}// 背景颜色
@each $name, $color in $colors {.bg-#{$name} {background-color: $color;}
}// 宽度
@for $i from 1  through 75 {.w-#{$i * 10} {width: #{$i * 10}rpx;}
}// 宽度-%百分比
@for $i from 1 through 20 {.w-#{$i * 5}P {width: #{$i* 5%};}
}// 屏幕宽度
@for $i from 1 through 20 {.w-#{$i* 5%}vw {width: #{$i* 5%}vw;}
}// 高度
@for $i from 1 through 80 {.h-#{$i * 10} {height: #{$i * 10}rpx;}
}// 高度-%百分比
@for $i from 1 through 20 {.h-#{$i* 5%}P {height: #{$i* 5%};}
}// 屏幕高度
@for $i from 1 through 20 {.h-#{$i* 5%}vh {height: #{$i* 5%}vh;}
}// 内边距
@for $i from 1 through 20 {.p-#{$i} {padding: #{$i}px;}
}// 上内边距
@for $i from 1 through 20 {.pt-#{$i} {padding-top: #{$i}px;}
}// 右内边距
@for $i from 1 through 20 {.pr-#{$i} {padding-right: #{$i}px;}
}// 下内边距
@for $i from 1 through 20 {.pb-#{$i} {padding-bottom: #{$i}px;}
}// 左内边距
@for $i from 1 through 20 {.pl-#{$i} {padding-left: #{$i}px;}
}// 上下内边距
@for $i from 1 through 20 {.py-#{$i} {padding-top: #{$i}px;padding-bottom: #{$i}px;}
}// 左右内边距
@for $i from 1 through 20 {.px-#{$i} {padding-left: #{$i}px;padding-right: #{$i}px;}
}// 圆角
@for $i from 1 through 20 {.radius-#{$i} {border-radius: #{$i}px;}
}// 间隔
// 宽度
@for $i from 1 through 20 {.gap-#{$i} {gap: #{$i}rpx;}
}// 阴影
$shadows: (sm: (0 1px 2px 0 rgba(0, 0, 0, 0.05)),default: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)),md: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)),lg: (0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)),xl: (0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)),'2xl': (0 25px 50px -12px rgba(0, 0, 0, 0.25)),inner: (inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)),none: (0 0 rgba(0, 0, 0, 0))
);@each $name, $value in $shadows {.shadow-#{$name} {box-shadow: $value;}
}// 边框
@for $i from 1 through 5 {@each $color-name, $color-value in $colors {.border-#{$i}-#{$color-name} {border: #{$i}px solid $color-value;}}
}@for $i from 1 through 5 {@each $color-name, $color-value in $colors {.border-top-#{$i}-#{$color-name} {border-top: #{$i}px solid $color-value;}.border-right-#{$i}-#{$color-name} {border-right: #{$i}px solid $color-value;}.border-bottom-#{$i}-#{$color-name} {border-bottom: #{$i}px solid $color-value;}.border-left-#{$i}-#{$color-name} {border-left: #{$i}px solid $color-value;}.border-x-#{$i}-#{$color-name} {border-left: #{$i}px solid $color-value;border-right: #{$i}px solid $color-value;}.border-y-#{$i}-#{$color-name} {border-top: #{$i}px solid $color-value;border-bottom: #{$i}px solid $color-value;}}
}// 父元素的1/2 使用方法:father-1_2
@for $i from 2 through 20 {.father-1_#{$i} {width: percentage(1 / $i); // 子元素宽度为父元素的分数}
}// 圆形,直径从5-100
@for $i from 1 through 20 {.circle-#{$i*10} {width: #{$i*10}px;height: #{$i*10}px;border-radius: 50%;}
}// 位于屏幕的最底部位置
.bottom-element {position: fixed;z-index: 1000; // 可以根据实际情况调整 z-indexbottom: 0;left: 0;right: 0;
}// 按钮的基本样式
.btn {transition: background-color 0.3s ease;
}// 按钮的点击后样式
.btn:active {background-color: #ff6600;
}

H5版本

// 文字粗细
$font-weights: (thin: 100,extra-light: 200,light: 300,regular: 400,medium: 500,semi-bold: 600,bold: 700,extra-bold: 800,black: 900
);// 文字大小
@for $i from 8 through 50 {.font-#{$i} {font-size: #{$i}px;}
}@each  $name, $weight in $font-weights {.font-#{$name} {font-weight: $weight;}
}$aligns: (left,center,right,justify
);// 文字位置
@each $align in $aligns {.text-#{$align} {text-align: $align;}
}// 颜色
$colors: (red: #ff0000,darkRed: #d90209,green: #00ff00,blue: #0000ff,black: #000000,white: #ffffff,gray: #808080,lightGray: #e6e6e6,orange: #ffA500,yellow: #ffff00,pink: #ff69b4,purple: #800080, brown13: #a52a2a,cyan14: #00ffff,magenta15: #ff00ff,lime16: #00ff00,teal17: #008080,navy18: #000080,maroon19: #800000,olive20: #808000,beige21: #f5f5dc,ivory22: #fffff0,khaki23: #f0e68c,tan24: #d2b48c,salmon25: #fa8072,coral26: #ff7f50,tomato27: #ff6347,gold28: #ffd700,silver29: #c0c0c0,indigo30: #4b0082,lavender31: #e6e6fa,turquoise32: #40e0d0,violet33: #ee82ee,peach34: #ffdab9,orchid35: #da70d6,skyBlue36: #87ceeb,mintGreen37: #98ff98,crimson38: #dc143c,forestGreen39: #228b22,slateGray40: #708090,sienna41: #a0522d,sirocco42: #736f6e,caputMortuum43: #592720,terraCotta44: #e2725b,redOxide45: #7d4427,zomp46: #39a78e,yellowGreen47: #9acd32,paleGreen48: #98fb98,paleTurquoise49: #afeeee,robinEggBlue50: #00cccc,lightSeaGreen51: #20b2aa,deepSkyBlue52: #00bfff,dodgerBlue53: #1e90ff,steelBlue54: #4682b4,powderBlue55: #b0e0e6,cornflowerBlue56: #6495ed,mediumSlateBlue57: #7b68ee,darkSlateBlue58: #483d8b,blueViolet59: #8a2be2,mediumOrchid60: #ba55d3,darkOrchid61: #9932cc,thistle62: #d8bfd8,plum63: #dda0dd,paleVioletRed64: #db7093,deepPink65: #ff1493,hotPink66: #ff69b4,mediumPurple67: #9370db,darkMagenta68: #8b008b,darkViolet69: #9400d3,darkSlateGray70: #2f4f4f,dimGray71: #696969,slateBlue72: #6a5acd,mediumBlue73: #0000cd,midnightBlue74: #191970,cadetBlue75: #5f9ea0,aquamarine76: #7fffd4,mediumAquamarine77: #66cdaa,darkSeaGreen78: #8fbc8f,lightGreen79: #90ee90,springGreen80: #00ff7f,lawnGreen81: #7cfc00,chartreuse82: #7fff00,mediumSpringGreen83: #00fa9a,paleGoldenrod84: #eee8aa,goldenrod85: #daa520,sandyBrown86: #f4a460,peru87: #cd853f,rosyBrown88: #bc8f8f,wheat89: #f5deb3,tan90: #ffd39b,darkOrange91: #ff8c00,coral92: #ff7256,dodgerBlue93: #FF8C00,
);// 文字颜色
@each $name, $color in $colors {.text-#{$name} {color: $color;}
}// 布局
// Flex容器样式
.flex {display: flex;
}// 设置主轴方向
.flex-row {flex-direction: row;
}.flex-row-reverse {flex-direction: row-reverse;
}.flex-col {flex-direction: column;
}.flex-col-reverse {flex-direction: column-reverse;
}.flex-center {display: flex;justify-content: center;align-items: center;
}// 垂直居中
.vertical-center {display: flex;align-items: center; // 垂直居中
}// 水平居中
.horizontal-center {display: flex;justify-content: center; // 水平居中
}// 设置主轴对齐方式
.justify-start {justify-content: flex-start;
}.justify-end {justify-content: flex-end;
}.justify-center {justify-content: center;
}.justify-between {justify-content: space-between;
}.justify-around {justify-content: space-around;
}// 设置交叉轴对齐方式
.items-start {align-items: flex-start;
}.items-end {align-items: flex-end;
}.items-center {align-items: center;
}.items-baseline {align-items: baseline;
}.items-stretch {align-items: stretch;
}.items-spaceAround {align-items: space-around;
}.items-spaceBetween {align-items: space-between;
}// 设置子项在交叉轴上的对齐方式
.align-self-auto {align-self: auto;
}.align-self-flex-start {align-self: flex-start;
}.align-self-flex-end {align-self: flex-end;
}.align-self-center {align-self: center;
}.align-self-baseline {align-self: baseline;
}.align-self-stretch {align-self: stretch;
}// 设置子项的排序
.order-1 {order: 1;
}.order-2 {order: 2;
}.order-3 {order: 3;
}// 设置子项的伸缩比例
.flex-grow-1 {flex-grow: 1;
}.flex-grow-2 {flex-grow: 2;
}.flex-grow-3 {flex-grow: 3;
}// 设置子项的初始尺寸
.flex-shrink-1 {flex-shrink: 1;
}.flex-shrink-2 {flex-shrink: 2;
}.flex-shrink-3 {flex-shrink: 3;
}// 设置子项的伸缩基准
.flex-basis-auto {flex-basis: auto;
}.flex-basis-fill {flex-basis: fill;
}.flex-basis-content {flex-basis: content;
}.flex-basis-percent {flex-basis: 50%;
}// margin布局样式
.m-auto {margin: auto;
}.mt-auto {margin-top: auto;
}.mr-auto {margin-right: auto;
}.mb-auto {margin-bottom: auto;
}.ml-auto {margin-left: auto;
}.mx-auto {margin-left: auto;margin-right: auto;
}.my-auto {margin-top: auto;margin-bottom: auto;
}@for $i from -100 through 100 {.margin-#{$i} {margin: #{$i}px;}
}@for $i from -100 through 100 {.mt-#{$i} {margin-top: #{$i}px;}
}@for $i from -100 through 100 {.mr-#{$i} {margin-right: #{$i}px;}
}@for $i from -100 through 100 {.mb-#{$i} {margin-bottom: #{$i}px;}
}@for $i from -100 through 100 {.margin-left-#{$i} {margin-left: #{$i}px;}
}@for $i from -100 through 100 {.my-#{$i} {margin-top: #{$i}px;margin-bottom: #{$i}px;}
}@for $i from -100 through 100 {.mx-#{$i} {margin-right: #{$i}px;margin-left: #{$i}px;}
}// 背景颜色
@each $name, $color in $colors {.bg-#{$name} {background-color: $color;}
}// 宽度
@for $i from 10 through 750 {.w-#{$i} {width: #{$i}rpx;}
}// 宽度-%百分比
@for $i from 1 through 100 {.w-#{$i}P {width: #{$i* 1%};}
}// 屏幕宽度
@for $i from 1 through 100 {.w-#{$i}vw {width: #{$i}vw;}
}// 高度
@for $i from 10 through 800 {.h-#{$i} {height: #{$i}rpx;}
}// 高度-%百分比
@for $i from 1 through 100 {.h-#{$i}P {height: #{$i* 1%};}
}// 屏幕高度
@for $i from 1 through 100 {.h-#{$i}vh {height: #{$i}vh;}
}// 内边距
@for $i from 1 through 50 {.p-#{$i} {padding: #{$i}px;}
}// 上内边距
@for $i from 1 through 50 {.pt-#{$i} {padding-top: #{$i}px;}
}// 右内边距
@for $i from 1 through 50 {.pr-#{$i} {padding-right: #{$i}px;}
}// 下内边距
@for $i from 1 through 50 {.pb-#{$i} {padding-bottom: #{$i}px;}
}// 左内边距
@for $i from 1 through 50 {.pl-#{$i} {padding-left: #{$i}px;}
}// 上下内边距
@for $i from 1 through 50 {.py-#{$i} {padding-top: #{$i}px;padding-bottom: #{$i}px;}
}// 左右内边距
@for $i from 1 through 50 {.px-#{$i} {padding-left: #{$i}px;padding-right: #{$i}px;}
}// 圆角
@for $i from 1 through 50 {.radius-#{$i} {border-radius: #{$i}px;}
}// 间隔
// 宽度
@for $i from 1 through 50 {.gap-#{$i} {gap: #{$i}rpx;}
}// 阴影
$shadows: (sm: (0 1px 2px 0 rgba(0, 0, 0, 0.05)),default: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)),md: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)),lg: (0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)),xl: (0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)),'2xl': (0 25px 50px -12px rgba(0, 0, 0, 0.25)),inner: (inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)),none: (0 0 rgba(0, 0, 0, 0))
);@each $name, $value in $shadows {.shadow-#{$name} {box-shadow: $value;}
}// 边框
@for $i from 1 through 50 {@each $color-name, $color-value in $colors {.border-#{$i}-#{$color-name} {border: #{$i}px solid $color-value;}}
}@for $i from 1 through 50 {@each $color-name, $color-value in $colors {.border-top-#{$i}-#{$color-name} {border-top: #{$i}px solid $color-value;}.border-right-#{$i}-#{$color-name} {border-right: #{$i}px solid $color-value;}.border-bottom-#{$i}-#{$color-name} {border-bottom: #{$i}px solid $color-value;}.border-left-#{$i}-#{$color-name} {border-left: #{$i}px solid $color-value;}.border-x-#{$i}-#{$color-name} {border-left: #{$i}px solid $color-value;border-right: #{$i}px solid $color-value;}.border-y-#{$i}-#{$color-name} {border-top: #{$i}px solid $color-value;border-bottom: #{$i}px solid $color-value;}}
}// 父元素的1/2 使用方法:father-1_2
@for $i from 2 through 10 {.father-1_#{$i} {width: percentage(1 / $i); // 子元素宽度为父元素的分数}
}// 圆形,直径从5-100
@for $i from 5 through 100 {.circle-#{$i} {width: #{$i}px;height: #{$i}px;border-radius: 50%;}
}// 位于屏幕的最底部位置
.bottom-element {position: fixed;z-index: 1000; // 可以根据实际情况调整 z-indexbottom: 0;left: 0;right: 0;
}// 按钮的基本样式
.btn {transition: background-color 0.3s ease;
}// 按钮的点击后样式
.btn:active {background-color: #ff6600;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/3840.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

235 基于matlab的时频盲源分离（TFBSS）算法

235 基于matlab的时频盲源分离（TFBSS）算法

基于matlab的时频盲源分离（TFBSS）算法，TFBSS用空间频率分布来分离非平稳信号，可以分离具有不同时频分布的源信号，也能够分离具有相同谱密度但时频分布不同的高斯源。同时，该算法在时频域上局域化源信号能量…
阅读更多...
vue 3 —— 笔记(模板语法，响应式变量)

vue 3 —— 笔记(模板语法，响应式变量)

模板语法： Vue 使用一种基于 html 的模板语法，使我们能声明式将其组件实例绑定到呈现的 dom 上 文本插值 基础数据绑定形式 双大括号 会替换相应组件实例 msg 属性的值 原始html 双大括号会将数据解释为纯文本 不是html 想插入html 使用 v-html 指令 &…
阅读更多...
mac 安装 python3

mac 安装 python3

1、安装 brew install python2、配置 环境变量 打开 sudo vi ~/.bash_profile 添加 export PATH"/opt/homebrew/bin:$PATH"重载 source ~/.bash_profile ✗ source ~/.zshrc # 按需3、验证 方式 1 ls -l /opt/homebrew/bin/python3 方式 2 echo…
阅读更多...
Unity和iOS 原生专题二 Unity和iOS原生交互相互传值的两个方案

Unity和iOS 原生专题二 Unity和iOS原生交互相互传值的两个方案

一 、方案一 通过指针传值和使用 MonoPInvokeCallback 从C#层向C层注册回调函数 1.1 iOS调用Unity函数Unity 给iOS传值 第一步C#端 定义 C#调用 ios 原生函数标识 固定写法 /// <summary>/// 定义 C#调用 ios 原生函数标识 固定写法/// </summary>private const …
阅读更多...
【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门

【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门

【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门 文章目录 【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门1. 概述2. 服务熔断服务降级(CircuitBreaker)2.1 案例说明2.1.1 基于计数的滑动窗口2.1.2 测试2.2.1 基于时间的滑动窗口2.2.2 测试 3. 隔离(B…
阅读更多...
前端单元测试的艺术：专业化策略与Vue项目高效实践指南

前端单元测试的艺术：专业化策略与Vue项目高效实践指南

单元测试是软件开发中的基石&#xff0c;尤其对于前端领域&#xff0c;它为保证代码质量、提升开发效率、强化项目稳定性提供了不可或缺的支持。本文将深入剖析单元测试的核心理念&#xff0c;揭示其在前端开发中的独特价值&#xff0c;并提炼出一套专业且高效的实践策略&#…
阅读更多...
git 基础知识（全能版）

git 基础知识（全能版）

文章目录 一 、git 有三个分区二、git 基本操作1、克隆—git clone2、拉取—git fetch / git pull3、查看—git status / git diff3.1 多人开发代码暂存技巧 本地代码4、提交—git add / git commit / git push5、日志—git log / git reflog6、删除—git rm ‘name’7、撤销恢…
阅读更多...
阿里云服务器（Ubuntu22）上的MySQL8更改为大小写不敏感

阿里云服务器（Ubuntu22）上的MySQL8更改为大小写不敏感

因为windows上默认的mysql8.0是大小写不敏感的&#xff0c;部署到服务器上之后发现ubuntu默认的是大小写敏感&#xff0c;所以为了不更改代码&#xff0c;需要将mysql数据库设置为大小写不敏感的。 &#xff01;&#xff01;&#xff01;重要一定要做好数据库的备份&#xff0…
阅读更多...
MyBatis特殊SQL的执行

MyBatis特殊SQL的执行

文章目录 一、模糊查询二、批量删除三、动态设置表名四、添加功能获取自增的主键 一、模糊查询 /*** 通过用户名模糊查询用户信息* param mohu* return*/List<User> getUserByLike(Param("mohu") String mohu);<!--List<User> getUserByLike(Param(&q…
阅读更多...
微服务与单体应用之间的调用问题

微服务与单体应用之间的调用问题

前言 本文转自 www.microblog.store,且已获得授权 一、问题背景 microblog.store微博客使用了微服务架构,并且docker容器化部署; 另有一个独立的单体应用,功能是: 作为ip地址解析中心; 微服务集群以及该单体应用都部署到同一台服务器上面,有需要的时候微服务集群里面某个微服务…
阅读更多...
使用JavaScript日历小部件和DHTMLX Gantt的应用场景（一）

使用JavaScript日历小部件和DHTMLX Gantt的应用场景（一）

DHTMLX Suite UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件&#xff0c;这些组件可以轻松组合到单个应用程序界面中。 DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表&#xff0c;可满足项目管理应用…
阅读更多...
「51媒体」城市推介会，地方旅游推荐，怎么做好媒体宣传

「51媒体」城市推介会，地方旅游推荐，怎么做好媒体宣传

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 城市推介会和地方旅游推荐是城市形象宣传的重要组成部分&#xff0c;通过有效的媒体宣传可以提升城市的知名度和吸引力。&#xff1a; 一&#xff0c;活动内容层面&#xff1a; 突出亮点…
阅读更多...
pyqt设置标签显示图片并设置大小

pyqt设置标签显示图片并设置大小

pyqt设置标签显示图片并设置大小 标签显示图片效果代码 标签显示图片 使用 QPixmap 加载图片进行图片大小设置把图片对象设置到标签上 效果 代码 from PyQt5.QtWidgets import QApplication, QLabel, QVBoxLayout, QWidget from PyQt5.QtGui import QPixmap import sys from…
阅读更多...
某赛通电子文档安全管理系统 多处 SQL注入漏洞复现

某赛通电子文档安全管理系统 多处 SQL注入漏洞复现

0x01 产品简介 某赛通电子文档安全管理系统（简称：CDG）是一款电子文档安全加密软件，该系统利用驱动层透明加密技术，通过对电子文档的加密保护，防止内部员工泄密和外部人员非法窃取企业核心重要数据资产，对电子文档进行全生命周期防护，系统具有透明加密、主动加密、智能…
阅读更多...
Baumer工业相机堡盟工业相机如何通过NEOAPI SDK在相机图像中绑定元数据和块数据（C#）

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK在相机图像中绑定元数据和块数据（C#）

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK在相机图像中绑定元数据和块数据&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机NEOAPI SDK和元数据和块数据的技术背景Baumer工业相机通过NEOAPISDK在相机图像中绑定元数据和块数据功能1.引用合适的类文件2.通过NEOAPI…
阅读更多...
采购数据分析驾驶舱分享，照着它抄作业

采购数据分析驾驶舱分享，照着它抄作业

今天我们来看一张采购管理驾驶舱。这是一张充分运用了多种数据可视化图表、智能分析功能&#xff0c;从物料和供应商的角度全面分析采购情况的BI数据可视化报表&#xff0c;主要分为三个部分&#xff0c;接下来就分部分来了解一下。 第一部分&#xff1a;关键指标计算及颜色预…
阅读更多...
从零入门区块链和比特币（第一期）

从零入门区块链和比特币（第一期）

欢迎来到我的区块链与比特币入门指南&#xff01;如果你对区块链和比特币感兴趣&#xff0c;但不知道从何开始&#xff0c;那么你来对地方了。本博客将为你提供一个简明扼要的介绍&#xff0c;帮助你了解这个领域的基础知识&#xff0c;并引导你进一步探索这个激动人心的领域。…
阅读更多...
2024.4.26力扣每日一题——快照数组

2024.4.26力扣每日一题——快照数组

2024.4.26 题目来源我的题解方法一 TreeMap方法二 哈希表二分法 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1146 我的题解 方法一 TreeMap 使用TreeMap记录每个snip_id下的修改记录。 在set时&#xff0c;判断snip_id下是否有修改记录&#xff0c;若无则将最后一次…
阅读更多...
rabbitmq集群配置

rabbitmq集群配置

1&#xff0c;配置环境变量 MY_POD_NAME&#xff1a;当前Pod的名称 RABBITMQ_ERLANG_COOKIE&#xff1a;设置Erlang Cookie用于节点间通信安全验证&#xff0c;值来自/nfs/rabbitmq/lib/.erlang.cookie文件内容 RABBITMQ_NODENAME&#xff1a;根据Pod名称动态生成了RabbitMQ…
阅读更多...
【GO】命令行解析 os 与 flag

【GO】命令行解析 os 与 flag

目录 OS解析命令 简单用法 进阶用法 flag命令解析 基础实例 1. 自定义数据类型 2. 创建多个 FlagSet 3. 整合环境变量和配置文件 os与flag 关键点解析 程序的作用 示例命令行调用 在 Go 语言中&#xff0c;命令行解析是一项基本且常用的功能&#xff0c;它允许开发者…
阅读更多...
最新文章

Copyright @ 2022~2023