btxui 1.0.1

package/sass/decoration.scss

@@ -0,0 +1,220 @@
+.bg-fixed {
+    background-attachment: fixed;
+}
+.bg-repeat {
+    background-repeat: repeat;
+}
+.bg-repeat-x {
+    background-repeat: repeat-x;
+}
+.bg-repeat-y {
+    background-repeat: repeat-y;
+}
+
+
+.bg-size-cover {
+    background-size: cover;
+}
+.bg-size-contain {
+    background-size: contain;
+}
+.bg-size-max {
+    background-size: 100% 100%;
+}
+.bg-size-max-h {
+    background-size: auto 100%;
+}
+.bg-size-max-w {
+    background-size: 100% auto;
+}
+
+
+//九宫格背景图定位
+.bg-pos-1 {
+    background-position: 0 0;
+}
+.bg-pos-2 {
+    background-position: center 0;
+}
+.bg-pos-3 {
+    background-position: 100% 0;
+}
+.bg-pos-4 {
+    background-position: 0 center;
+}
+.bg-pos-5 {
+    background-position: center;
+}
+.bg-pos-6 {
+    background-position: 100% center;
+}
+.bg-pos-7 {
+    background-position: 0 100%;
+}
+.bg-pos-8 {
+    background-position: center 100%;
+}
+.bg-pos-9 {
+    background-position: 100% 100%;
+}
+
+
+.round {
+    border-radius: 50%;                         //50% 圆角
+}
+.round-lg {                                     //24px 大圆角
+    border-radius: 24px;  
+}
+.round-md {                                     //10px 中等圆角
+    border-radius: 10px;  
+}
+.round-sm {                                     //4px 小型圆角
+    border-radius: 4px;  
+}
+
+
+.round-t {                                      //上侧圆角
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.round-b {                                      //下侧圆角
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.round-l {                                      //左侧圆角
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.round-r {                                      //右侧圆角
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+
+.line {                                         //四周实线描边
+    border-style: solid;
+}
+.line-l {                                       //左实线描边
+    border-left-style: solid;
+}
+.line-r {                                       //右实线描边
+    border-right-style: solid;
+}
+.line-t {                                       //上实线描边
+    border-top-style: solid;
+}
+.line-b {                                       //下实线描边
+    border-bottom-style: solid;
+}
+.dashed {                                       //四周虚线描边
+    border-style: dashed;
+}
+.dashed-l {                                     //左虚线描边
+    border-left-style: dashed;
+}
+.dashed-r {                                     //右虚线描边
+    border-right-style: dashed;
+}
+.dashed-t {                                     //上虚线描边
+    border-top-style: dashed;
+}
+.dashed-b {                                     //下虚线描边
+    border-bottom-style: dashed;
+}
+.line-outside {                                 //外侧描边范围
+    background-clip: padding-box;
+}
+
+
+//描边粗细
+$thicks: 1 2 4 6 8 10;
+@each $thick in $thicks {
+    .thick-#{$thick} {
+        border-width: #{$thick}px;
+    }
+}
+
+
+//文字描边
+.text-line {
+    text-shadow: 
+    1px 0 0 rgba(200, 200, 200, .5), 
+    -1px 0 0 rgba(200, 200, 200, .5), 
+    0 1px 0 rgba(200, 200, 200, .5),
+    0 -1px 0 rgba(200, 200, 200, .5);
+}
+
+
+//阴影
+.shadow {
+    box-shadow: 0 4px 17px;
+}
+.shadow-no {
+    box-shadow: none;
+}
+.shadow-sm {
+    box-shadow: 0 2px 4px;
+}
+.shadow-lg {
+    box-shadow: 0 14px 40px;
+}
+.shadow-relief {
+    box-shadow: 1px 1px 0 rgba(0,0,0,.7) inset, 1px 1px 0 rgba(255,255,255,.4);
+}
+
+
+//生成三角形
+%default-border {
+    position: relative;
+    border: 4px solid transparent;
+    height: 0;
+    width: 0;
+    display: inline-block;
+}
+%v-border {
+    border-top-width: 3px;
+    border-bottom-width: 3px;
+}
+%h-border {
+    border-left-width: 3px;
+    border-right-width: 3px;
+}
+$dirs: (l left), (r right), (t top), (b bottom);
+@each $dir in $dirs {
+    .triangle-#{nth($dir, 1)} {
+        @extend %default-border; 
+        border-#{nth($dir, 2)}-color: inherit;
+        @if nth($dir, 1) == l{
+            @extend %v-border;
+            left: 4px; 
+        }@else if nth($dir, 1) == r{
+            @extend %v-border;
+            right: 4px;
+        }@else if nth($dir, 1) == t{
+            @extend %h-border;
+            top: 4px;
+        }@else {
+            @extend %h-border;
+            bottom: 4px;
+        }
+    }
+}
+
+
+//模糊滤镜
+.blur-no { filter: blur(0px) }
+.blur-sm { filter: blur(2px) }
+.blur-md { filter: blur(7px) }
+.blur-lg { filter: blur(17px) }
+
+//明度滤镜
+.dark-no { filter: brightness(100%) }
+.dark-sm { filter: brightness(80%) }
+.dark-md { filter: brightness(50%) }
+.dark-lg { filter: brightness(20%) }
+
+//纯度滤镜
+.gray-no { filter: grayscale(0%) }
+.gray-sm { filter: grayscale(40%) }
+.gray-md { filter: grayscale(70%) }
+.gray-lg { filter: grayscale(100%) }

package/sass/flex.scss

@@ -0,0 +1,29 @@
+%flex{
+    display: flex;
+    justify-content: flex-start;
+    align-items: stretch;
+}
+
+.grid {
+    @extend %flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+}
+
+@for $i from 1 to 10 {
+    .flex-#{$i}, .flex-#{$i}-{
+        @extend %flex;
+    }
+}
+
+.flex-between{ //主轴均分排列，两端对齐
+    @extend %flex;
+    justify-content: space-between !important;
+    align-items: center;
+}
+
+.flex-around{ //主轴均分排列
+    @extend %flex;
+    justify-content: space-around !important;
+    align-items: center;
+}

package/sass/icons.scss

@@ -0,0 +1,100 @@
+@font-face {
+    font-family: "defaultICO"; /* Project id 1066215 */
+    src: url('/cdn/fonts/iconfont.woff2?t=1622074607009') format('woff2'),
+    url('/cdn/fonts/iconfont.woff?t=1622074607009') format('woff'),
+    url('/cdn/fonts/iconfont.ttf?t=1622074607009') format('truetype');
+}
+
+[class^="ico-"],
+[class*=" ico-"] {
+    font-family: "defaultICO";
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+ 
+$icons: 
+    (success, "\e620")              //正确（成功）
+    (fail, "\e60c")                 //错误（失败）
+    (xiala, "\e6b9")                //下拉
+    (arrow-right, "\e607")          //右箭头
+    (arrow-left, "\e608")           //左箭头
+    (sousuo, "\e66e")               //搜索
+    (play, "\e6a4")                 //播放
+    (pause, "\e6a5")                //暂停
+    (guanbi, "\e663")               //关闭（old）
+    (close, "\e663")                //关闭
+    (tianjia, "\e664")              //添加（old）
+    (add, "\e664")                  //添加
+    (more, "\e654")                 //更多
+    (link, "\e66d")                 //关联
+    (save, "\e602")                 //存储
+    (del, "\e612")                  //删除
+    (mobile, "\e712")               //手机
+    (weibo, "\e609")                //微博
+    (wechat, "\e62d")               //微信
+    (dy, "\e615")                   //抖音
+    (bili, "\e617")                 //b站
+    (github, "\e761")               //github
+    (download, "\e600")             //下载
+    (ui, "\e63c")                   //ui
+    (home, "\e68e")                 //首页
+    (list, "\e665")                 //列表
+    (brightness, "\e632")           //亮度
+    (data, "\e690")                 //数据
+    (user, "\e62b")                 //用户
+    (system, "\e611")               //系统设置
+    (order, "\e684")                //排序
+    (exit, "\e618")                 //退出
+    (log, "\e60f")                  //日志
+    (edit, "\e70c")                 //编辑
+    (no-data, "\e62c")              //无数据
+
+    (btxstudio-zh, "\e606")         //佰逹仕
+    (company-pad, "\e603")          //七武海（实心）
+    (company-line, "\e604")         //七武海（线性）
+    (company-zh, "\e605")           //七武海（文字）
+    (level, "\e60a")                //level
+    (level_round, "\e60e")          //level（圆形实心）
+    (btxstudio, "\e60b")            //btxstudio
+    (btxstudio-round, "\e60d")      //btxstudio（圆形实心）
+
+    (qq, "\e63f")                   //qq
+    (weibo2, "\e64c")               //微博
+    (email, "\e619")                //邮件
+    (tel, "\e768")                  //手机
+    (fix, "\e614")                  //传真
+    (website, "\e63d")              //网址
+    (wechat2, "\e62a")              //微信
+    (eye, "\e7d3")                  //显示
+    (brand, "\e610")                //徽章
+    (chart, "\e6cc")                //统计
+    (addr, "\e613")                 //地址
+    (space, "\e89f")                //空间
+    (directory, "\e666")            //字典
+    (mail-list, "\e645")            //通讯录
+    (book, "\e68b")                 //著作
+    (tesk, "\e601")                 //任务
+    (talk, "\e81a")                 //对话
+    (trophy, "\e723")               //奖杯
+    (edit, "\eed2")                 //编辑
+    (work, "\eee0")                 //成果
+    (circle, "\e633")               //圈子
+    (shop, "\e699")                 //商城
+    (group, "\e68f")                //群
+    (about, "\e674")                //介绍
+    (time, "\e61a")                 //时间
+    (book-list, "\e689")            //书籍列表
+    (book-block-list, "\e688")      //书籍块状列表
+    (pwd, "\e616")                  //密码
+    (check-code, "\e626");          //验证码
+
+//设置字体图标
+@mixin set_icons($icons, $prefix:ico){
+    @each $icon in $icons {
+        .#{$prefix}-#{nth($icon, 1)}::before {
+            content: nth($icon, 2);
+        }
+    }
+}
+@include set_icons($icons); 

package/sass/layout.scss

@@ -0,0 +1,88 @@
+@import "./scroll.scss";
+@import "./flex.scss";
+
+.box-normal {                           //标准盒模型
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.container {                            //版心
+    width: 100%;
+    margin: 0 auto;
+    max-width: 1200px;
+
+    &[md], .container-md {
+        max-width: 960px; 
+    }
+    &[sm], .container-sm {
+        max-width: 736px;
+    }
+}
+
+.item{                                  //多列布局元素
+    break-inside: avoid;
+    -moz-page-break-inside: avoid;
+    -webkit-column-break-inside: avoid;
+}
+
+.max-screen {                           // 视口满屏
+    width: 100%;
+    height: 100vh;
+}
+
+
+//生成 z 轴层级
+@mixin auto_gen_z_index(){ 
+    .z-1 {
+        z-index: -1;
+    }
+    @for $i from 0 to 11{
+        .z#{$i} {
+            z-index: $i;
+        }
+    }
+}
+@include auto_gen_z_index();
+
+
+//生成旋转
+@mixin auto_gen_rotate_class($suffix:""){
+    $degs: 0, 15, 30, 45, 90, 180, 360;
+    @each $deg in $degs{
+        .rotate-#{$deg}#{$suffix} {
+            transform: rotate(#{$deg}deg);
+        }
+    }
+}
+@include auto_gen_rotate_class();
+
+
+//变形中心点
+.origin-1 {
+    transform-origin: left top;
+}
+.origin-2 {
+    transform-origin: center top;
+}
+.origin-3 {
+    transform-origin: right top;
+}
+.origin-4 {
+    transform-origin: left center;
+}
+.origin-5 {
+    transform-origin: center center;
+}
+.origin-6 {
+    transform-origin: right center;
+}
+.origin-7 {
+    transform-origin: left bottom;
+}
+.origin-8 {
+    transform-origin: center bottom;
+}
+.origin-9 {
+    transform-origin: right bottom;
+}

package/sass/reset.scss

@@ -0,0 +1,111 @@
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //高亮颜色透明
+    -webkit-overflow-scrolling: touch;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+}
+
+html {
+    font-size: 12px;
+    height: 100%;
+    letter-spacing: 1px;
+}
+@media only screen and (max-width: 740px){
+    html {
+        letter-spacing: 0px;
+    }
+}
+
+body {
+    font-size: 1rem;
+    font-family: "微软雅黑", Arial;
+    line-height: 1.5;
+    color: #373737;
+    height: 100%;
+} 
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+ul {
+    list-style: none;
+}
+
+ol{
+    list-style-position: inside;
+}
+
+img {
+    max-width: 100%;
+}
+
+video, audio {
+    display: block;
+    width: 100%;
+    object-fit: fill;
+    outline: none;
+}
+
+input[type="text"], input[type="password"], input[type="number"], textarea, select, option,
+select:hover, option:hover{
+    width: 100%;
+    letter-spacing: 1px;
+    border: none;
+    background: none;
+    outline: none;
+    box-shadow: none;
+    resize: none;
+    font-size: inherit;
+    color: inherit;
+    font-family: "微软雅黑", Arial;
+    -webkit-appearance: none; //ios下移除原生样式
+
+    &::placeholder{
+        opacity: .7;
+        font-size: .9em;
+        color: inherit;
+    }
+}
+
+input[type="text"], input[type="password"], input[type="number"], textarea {
+    &:focus, &:active, &:hover {
+        outline: none;
+        box-shadow: none;
+        border: none;
+    }
+}
+
+textarea {
+    display: block;
+}
+
+button{
+    border: none;
+    background-color: transparent;
+    outline: none;
+    cursor: pointer;
+}
+
+pre {
+    line-height: 1.5;
+    font-size: 1.14rem;
+}
+
+iframe {
+    border: none;
+    display: block;
+}
+
+hr {
+    border: none;
+    height: 1px;
+    background-color: rgba(130,130,130,.15);
+    margin: 1.4rem 0;
+}

package/sass/response/flex_mixin.scss

@@ -0,0 +1,91 @@
+//生长方向类
+@mixin auto_gen_flex_dir_class($suffix:"") {
+    .flex#{$suffix}{
+        display: flex;
+        justify-content: flex-start;
+        align-items: stretch;
+    }
+    .flex-column#{$suffix}{
+        display: flex;
+        justify-content: flex-start;
+        align-items: stretch;
+        flex-direction: column;
+    }
+}
+
+//生成九宫格对齐定位类
+@mixin auto_gen_flex_align_class($suffix:"") {
+    .flex-1#{$suffix} {
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+    .flex-2#{$suffix} {
+        justify-content: center;
+        align-items: flex-start;
+    }
+    .flex-3#{$suffix} {
+        justify-content: flex-end;
+        align-items: flex-start;
+    }
+    .flex-4#{$suffix} {
+        justify-content: flex-start;
+        align-items: center;
+    }
+    .flex-5#{$suffix} {
+        justify-content: center;
+        align-items: center;
+    }
+    .flex-6#{$suffix} {
+        justify-content: flex-end;
+        align-items: center;
+    }
+    .flex-7#{$suffix} {
+        align-items: flex-end;
+    }
+    .flex-8#{$suffix} {
+        justify-content: center;
+        align-items: flex-end;
+    }
+    .flex-9#{$suffix} {
+        justify-content: flex-end;
+        align-items: flex-end;
+    }
+}
+
+//生成栅格布局类
+@mixin auto_gen_grid_class($suffix:"") {
+    $percent: "%";
+    @for $i from 1 to 13 {
+        .col-#{$i}#{$suffix} {
+            width: (calc($i / 12) * 100)+#{$percent};
+        }
+        .col-offset-#{$i}#{$suffix} {
+            margin-left: (calc($i / 12) * 100)+#{$percent};
+        }
+    }
+    .col-2d4#{$suffix} {
+        width: 20%;
+    }
+    .col-offset-2d4#{$suffix} {
+        margin-left: 20%;
+    }
+}
+
+//生成自生长元素类
+@mixin auto_gen_grow_class($suffix:"") {
+    @for $i from 0 to 10 {
+        .grow-#{$i}#{$suffix} {
+            flex-grow: $i;
+            flex-basis: 0;
+        }
+    }
+}
+
+//生成项目排序元素类
+@mixin auto_gen_order_class($suffix:"") {
+    @for $i from 0 to 6 {
+        .order-#{$i}#{$suffix}{
+            order: $i;
+        }
+    }
+}