代码提交

style/flex.scss

@@ -0,0 +1,169 @@
+.flex{
+  display: flex!important;
+}
+
+.flex-wrap{
+  flex-wrap: wrap;
+}
+.flex-nowrap{
+  flex-wrap: nowrap;
+}
+
+
+.flex-lr__center{
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-lr__start{
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.flex-lr__end{
+  justify-content: space-between;
+  align-items: flex-end;;
+}
+
+.flex-start__center{
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.flex-start__start{
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.flex-start__end{
+  justify-content: flex-start;
+  align-items: flex-end;;
+}
+
+.flex-end__center{
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.flex-end__start{
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.flex-end__end{
+  justify-content: flex-end;
+  align-items: flex-end;;
+}
+
+.flex-tb__center{
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-tb__start{
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.flex-tb__end{
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;;
+}
+
+.flex-top__center{
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.flex-top__start{
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.flex-top__end{
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-end;;
+}
+
+.flex-bottom__center{
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.flex-bottom__start{
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.flex-bottom__end{
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;;
+}
+
+
+.flex-center__center{
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-center__start{
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.flex-center_end{
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;;
+}
+
+
+
+.flex-column{
+  flex-direction: column;
+}
+
+.flex-jc__sb{
+  justify-content: space-between;
+}
+
+.flex-jc__sa{
+  justify-content: space-around;
+}
+
+.flex-jc__se{
+  justify-content: space-evenly;
+}
+
+.flex-jc__start{
+  justify-content: flex-start;
+}
+
+.flex-jc__center{
+  justify-content: center;
+}
+
+.flex-jc__end{
+  justify-content: flex-end;
+}
+
+.flex-ai__start{
+  align-items: flex-start;
+}
+.flex-ai__center{
+  align-items: center;
+}
+.flex-ai__end{
+  align-items: flex-end;;
+}

style/main.scss

@@ -0,0 +1,42 @@
+@import "flex";
+
+@mixin usePadding($x,$y) {
+  padding: #{$y}rpx #{$x}rpx;
+  box-sizing: border-box;
+}
+
+@mixin useFlex($principalAxis,$crossAxis,$direction:"row",$warp:"nowrap",$gap:0) {
+  display: flex;
+  flex-direction: unquote(#{$direction});
+  flex-wrap: unquote(#{$warp});
+  gap: $gap;
+  justify-content: unquote(#{$principalAxis});
+  align-items: unquote(#{$crossAxis});
+}
+
+
+$page-bg-color: #f5f5f5;
+$primary-color: #ee6d46;
+$tips-color: #999;
+$white-color: #fff;
+$black-color: #000;
+
+
+.animation-button {
+  background: $primary-color;
+  color: $white-color;
+  transition: all .3s;
+
+  &:active {
+    scale: 1.1;
+  }
+
+  &.disabled {
+    background: $tips-color;
+  }
+}
+
+.h5-tabbar-height {
+  width: 100%;
+  height: var(--window-bottom); // docs https://zh.uniapp.dcloud.io/matter.html#h5-%E5%BC%80%E5%8F%91%E6%B3%A8%E6%84%8F
+}