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-index
  bottom: 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-index
  bottom: 0;
  left: 0;
  right: 0;
}


// 按钮的基本样式
.btn {
  transition: background-color 0.3s ease;
}

// 按钮的点击后样式
.btn:active {
  background-color: #ff6600;
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Google Ads广告为Demand Gen推出生成式AI工具,可自动生成广告图片

Google Ads广告为Demand Gen推出生成式AI工具,可自动生成广告图片

谷歌今天宣布在Google Ads广告中为Demand Gen活动推出新的生成人工智能功能。 这些工具由谷歌人工智能提供支持，广告商只需几个步骤即可使用文本提示创建高质量的图片。 这些由人工智能驱动的创意功能旨在增强视觉叙事能力，帮助品牌在YouTube、YouTube…
阅读更多...
lesson05:C++内存管理

lesson05:C++内存管理

1.内存分布 2.c中动态内存管理 3.operator new和operator delete函数 4.new和delete实现原理 1.内存分布 1.1常见的内存分布 1.2相关问题 答案：CCCAA AAADAB 我们讲以下易错的部分： 7.数组char2是在栈上开的空间，然后将"a…
阅读更多...
主机登录输入正确的密码后也不能正常登录

主机登录输入正确的密码后也不能正常登录

尝试登录主机发现不能登录，执行journalctl -xe 发现报错fail to start switch root，初步判断是缺少文件bash文件 拷贝文件发现磁盘空间不足，清理日志文件 然后尝试修改密码： 再次尝试登录，发现问题解决，同时…
阅读更多...
python获取文件路径

python获取文件路径

文件：allpath_parameter.py # 获取当前目录路径 # current_dir os.getcwd() # 获取当前目录路径 realpath00 os.path.abspath(os.path.join(os.path.dirname(os.path.split(os.path.realpath(__file__))[0]), .)) print(realpath00)# 获取当前目录的上级目录路…
阅读更多...
C++ 并发编程 - 入门

C++ 并发编程 - 入门

目录 写在前面 并发编程，启动！ 写在前面 计算机的并发指在单个系统里同时执行多个独立的任务。 在过去计算机内只有一个处理器时并发是通过快速的切换进程上下文所实现的，而现在计算机已经步入了多核并发时代，所以多个进程的并…
阅读更多...
【LAMMPS学习】八、基础知识(4.5)TIP5P水模型

【LAMMPS学习】八、基础知识(4.5)TIP5P水模型

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语，以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…
阅读更多...
Kubernetes：云原生时代的核心引擎

Kubernetes：云原生时代的核心引擎

文章目录 一、Kubernetes简介：引领云原生潮流二、K8s的核心特性：自动化与智能化三、K8s的实践应用：打造高效云原生应用架构四、K8s的挑战与应对：安全与性能并重五、K8s的未来展望：无限可能与挑战并存《Kubernetes快速进…
阅读更多...
WPF —— lCommand命令实例

WPF —— lCommand命令实例

首先在标签页面设置一个Button按钮 <Button Width"100" Height"40" Content"测试" ></Button> 1 创建一个类 继承于ICommand这个接口&#xff0c; 这个接口一般包含三部分&#xff1a; 俩个方法&#xff1a;一个判断指令是不是…
阅读更多...
主打熟人双向社交，UXLINK 如何用群组打造超强社交生态

主打熟人双向社交，UXLINK 如何用群组打造超强社交生态

社交&#xff0c;作为最强 Web3 流量入口 Web2 世界里&#xff0c;社交产品总是最具想象力。全球使用 Facebook 系列产品的日活用户&#xff08;DAP&#xff09;均值近 30 亿人&#xff0c;占全球人口的 1/3。然而&#xff0c;加密货币用户仅约有 4.2 亿&#xff0c;占全球人口…
阅读更多...
STM32单片机C语言模块化编程实战：LED控制详解与示例

STM32单片机C语言模块化编程实战：LED控制详解与示例

一、开发环境 硬件&#xff1a;正点原子探索者 V3 STM32F407 开发板 单片机&#xff1a;STM32F407ZGT6 Keil版本&#xff1a;5.32 STM32CubeMX版本&#xff1a;6.9.2 STM32Cube MCU Packges版本&#xff1a;STM32F4 V1.27.1 之前介绍了很多关于点灯的方法&#xff0c;比如…
阅读更多...
2024年六西格玛黑带养成攻略：你的全面质量管理之路

2024年六西格玛黑带养成攻略：你的全面质量管理之路

成为一名六西格玛黑带&#xff0c;不仅意味着你在质量管理领域达到了专业水平&#xff0c;更是你职业生涯中的一大亮点。那么&#xff0c;如何在2024年成为一名六西格玛黑带&#xff1f;下面&#xff0c;深圳天行健六西格玛培训公司将为大家提供详细的规划和建议。 首先&#x…
阅读更多...
C++ 核心编程（1）

C++ 核心编程（1）

c面向对象编程 1.内存分区模型 程序运行前为代码区和全局区。程序运行后才有栈区和堆区。。 1.1 程序运行前 #include<iostream> #include <bits/stdc.h> using namespace std; /*全局区全局变量、静态变量、常量 */ //全局变量 int g_1 20; int g_2 30; //const…
阅读更多...
以场景驱动CMDB数据治理经验分享

以场景驱动CMDB数据治理经验分享

数据治理是 CMDB 项目实施中难度最大、成本最高的环节&#xff0c;是一个长期治理的过程&#xff0c;而行业很少提出 CMDB 数据治理的技术实现方案。CMDB 数据治理不仅需要解决配置管理工程性的技术问题&#xff0c;还要基于运维组织的特点&#xff0c;建立适应性的配置运营能力…
阅读更多...
查看HDF5文件软件（HDFView）

查看HDF5文件软件（HDFView）

HDFView&#xff1a;下载地址 note&#xff1a;我们需要下载 win10 、App软件&#xff08;win10在win11也能运行&#xff09;&#xff0c;因为App软件是轻量版&#xff0c;不需要安装就可以使用。 eg&#xff1a; 下载完后解压就可以使用。
阅读更多...
空间数据索引的利器：R-Tree原理与实现深度解析

空间数据索引的利器：R-Tree原理与实现深度解析

空间数据索引的利器&#xff1a;R-Tree原理与实现深度解析 R-Tree的原理插入操作分裂操作查询操作 R-Tree的伪代码R-Tree的C语言实现讨论结论 R-Tree是一种平衡树&#xff0c;用于空间数据索引&#xff0c;特别是在二维或更高维度的几何对象存储和检索中。它由Antony Guttman和…
阅读更多...
书生·浦语 大模型（学习笔记-9）OpenCompass 大模型评测实战

书生·浦语 大模型（学习笔记-9）OpenCompass 大模型评测实战

目录 一、评测实现双赢 二、评测遇到的问题 三、如何评测大模型&#xff08;大概总结4大类方法&#xff09; 四、评测工具链及流水线 五、实战评测 GPU的环境安装 查看支持的数据集和模型 启动评测(会缺少protibuf库&#xff0c;提前安装&#xff09; 测评结果 一、评…
阅读更多...
【蓝桥2025备赛】容斥原理

【蓝桥2025备赛】容斥原理

容斥原理 背景&#xff1a;两个集合相交 高中的韦恩图&#xff0c;我们知道两个集合相交时我们可以通过简单的计算来认识相关的性质 集合相交的区域是 A ∩ B A\cap B A∩B ,集合的并集是 A ∪ B A\cup B A∪B ,那怎么用集合表示 A ∪ B A\cup B A∪B 我们可以看作是A集合…
阅读更多...
正点原子[第二期]Linux之ARM（MX6U）裸机篇学习笔记-6.3

正点原子[第二期]Linux之ARM（MX6U）裸机篇学习笔记-6.3

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…
阅读更多...
mybatis的使用技巧9——mysql按年、季度、月、周等不同时间维度查询或分组统计

mybatis的使用技巧9——mysql按年、季度、月、周等不同时间维度查询或分组统计

在实际项目开发过程中&#xff0c;按不同时间维度查询业务数据的操作异常频繁。比较多的操作如支持按时间周期范围做列表数据的筛选&#xff0c;或者是按年月日等维度的图表展示&#xff0c;亦或者是首页的概况&#xff0c;三维大屏的展示等&#xff0c;都离不开不同时间周期查…
阅读更多...
网络靶场实战-Qiling Fuzz实例分析

网络靶场实战-Qiling Fuzz实例分析

背景 在上一小节中&#xff0c;介绍了qiling框架的背景和基础使用&#xff0c;并以相关的CTF和qilinglab实例进行练习加深对qiling框架的使用&#xff0c;后续并简单介绍了qiling fuzz的功能。 在这一小节&#xff0c;我们将对qiling fuzz iot设备进行测试以及以实例的方式对…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站