home主页和AiTools页

styles/mixins.scss

@@ -0,0 +1,75 @@
+//混入
+
+@mixin flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@mixin display-flex{
+	display: flex;
+	align-items: center;
+}
+
+@mixin position-center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+@mixin flex-column {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+@mixin flex-row {
+
+    display: flex;
+	flex-direction: row;
+}
+@mixin font-color-transprent {
+	  -webkit-background-clip: text;
+	   background-clip: text;
+	   color: transparent;
+	   display: inline-block;
+}
+
+// 添加渐变边框mixin
+@mixin gradient-border($start, $end) {
+  background:
+    linear-gradient(white, white) padding-box,
+    linear-gradient(90deg, $start, $end) border-box;
+  border-radius: 12px;
+  border: 1px solid transparent;
+}
+
+@mixin scrollBar {
+
+    //滚动条轨道
+    &::-webkit-scrollbar-track {
+        background: #d3dce6;
+    }
+
+    //设置滚动条的宽度和高度
+    &::-webkit-scrollbar {
+        width: 6px; //竖直滚动条宽度
+        height: 6px; //水平滚动条高度
+    }
+
+    //滚动条滑块（可以拖动的部分）
+    &::-webkit-scrollbar-thumb {
+        background: #99a9bf;
+        border-radius: 20px;
+    }
+}
+@mixin container-bg {
+	background:
+	    linear-gradient(180deg, #e1ddfd 0%, $background-color 850px),
+	    $background-color 850px;
+	  background-repeat: no-repeat;
+	  background-size: 100% 850px, 100% calc(100% - 850px);
+	  background-position: top, bottom;
+}