//@import "online"; //@import "private"; /* 改变主题色变量 */ $--color-primary: $color-primary; /* 改变背景主题色变量 */ $--color-primary-background: $color-primary-background; //配置发布按钮背景色 $--color-publish-background: $color-publish-background; //配置参与按钮背景色 $--color-participate-background: $color-participate-background; //配置slice title文本颜色 $--color-title-color: $color-title-color; //配置footer灰色背景色 $--color-footer-background:$color-footer-background; /* 改变 icon 字体路径变量,必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index"; html { font: 12px Microsoft YaHei, Georgia, Verdana, Arial, Sans-serif; -webkit-font-smoothing: antialiased; // font-family: 'Avenir', Helvetica, Arial, sans-serif; font-size: 62.5%; } body { font-size: 1.6rem; font-weight: 400; line-height: 24px; color: #212529; text-align: left; background-color: #fafafa; } html, body { height: 100%; margin: 0; padding: 0; } .el-notification .el-icon-info { color: rgb(112, 179, 255); } .el-collapse { border: none; } .el-form--label-top .el-form-item__label { font-weight: 600; padding: 0; } dl, ol, ul { margin-top: 0; } a { text-decoration: none; color: #000; } .icon { vertical-align: middle; max-width: 20px; } .container { width: 100%; margin-right: auto; margin-left: auto } @media (min-width: 576px) { .container { width: 100%; } } @media (min-width: 768px) { .container { width: 100%; } } @media (min-width: 992px) { .container { width: 100%; } } @media (min-width: 1200px) { .container { width: 90%; } } @media (min-width: 1450px) { .container { width: 80%; } } .title { font-size: 1.8rem; font-weight: bold; border: none; border-left: 5px solid $--color-primary; padding-left: 10px; margin-bottom: 30px; } /* * Loading Dots * Can we use pseudo elements here instead :after? */ .loading { text-align: center; } .loading span { display: inline-block; vertical-align: middle; width: 1rem; height: 1rem; margin: .19em; background: $--color-primary; border-radius: 50%; animation: loading 1s infinite alternate; } /* * Dots Colors * Smarter targeting vs nth-of-type? */ .loading span:nth-of-type(2) { background: #8ce1ec; animation-delay: 0.2s; } .loading span:nth-of-type(3) { background: rgb(20, 168, 194); animation-delay: 0.4s; } .loading span:nth-of-type(4) { background: rgb(0, 134, 167); animation-delay: 0.6s; } .loading span:nth-of-type(5) { background: rgb(36, 113, 228); animation-delay: 0.8s; } .loading span:nth-of-type(6) { background: rgb(39, 71, 176); animation-delay: 1.0s; } .loading span:nth-of-type(7) { background: rgb(30, 53, 182); animation-delay: 1.2s; } /* * Animation keyframes * Use transition opacity instead of keyframes? */ @keyframes loading { 0% { opacity: 0; } 100% { opacity: 1; } } .badge { font-family: PingFangSC-Medium; background-color: #ecf5ff; display: inline-block; height: 28px; padding: 0 10px; line-height: 26px; font-size: 12px; color: #409eff; border: 1px solid #d9ecff; border-radius: 4px; box-sizing: border-box; white-space: nowrap; margin: 2px; } .ios-platform { background-color: #f0f9eb; border-color: #e1f3d8; color: #67c23a; } .android-platform { background-color: #fdf6ec; border-color: #faecd8; color: #e6a23c; } .web-platform { background-color: #fef0f0; border-color: #fde2e2; color: #f56c6c; } .text-warning { color: #ff9800 !important } .text-primary { color: #9c27b0 !important } .text-danger { color: #f44336 !important } .text-success { color: #4caf50 !important } .text-info { color: #00bcd4 !important } .text-rose { color: #e91e63 !important } .text-gray { color: #999 !important } .btn { background-color: transparent; border: 1px solid #d9d9d9; color: #606266; font-weight: 600; letter-spacing: 1.08px; outline: 0 !important; border-radius: 2px; display: inline-block; cursor: pointer; border-radius: 4px; } .btn-small { padding: 3px 8px; font-size: 1.2rem; line-height: 17px } .btn-thin { padding: 8px 15px } .btn-medium { padding: 5px 20px; line-height: 24px; } .btn-primary { padding: 12px 20px; line-height: 14px; } .btn-big { padding: 8px 20px } .btn-large { padding: 8px 25px } .btn-danger { color: #FFFFFF; background-color: #F56C6C; border-color: #F56C6C; } .btn-info { background: $--color-primary; border: 1px solid $--color-primary !important; color: #fff; } .btn:hover { color: $--color-primary; background: #4a90e21c; border: 1px solid #4a90e21c; } .btn-info:hover { color: #fff; opacity: 0.7; background: $--color-primary; border: 1px solid $--color-primary !important; } .btn-invalid { color: #999; } .create-container { padding: 40px 80px; } .create-body { padding: 20px 20px 20px 10px; background: #fff; margin: 10px 0; } .line { text-align: center; } .fr { float: right; } .fl { float: left; } .h1 { font-size: 22px !important; } .h2 { font-size: 20px !important; } .h3 { font-size: 18px !important; } .user-img { width: 50px; height: 50px; border-radius: 50%; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px } .no-gutters { margin-right: 0; margin-left: 0 } .no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0 } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { //position: relative; width: 100%; padding-right: 15px; padding-left: 15px } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-first { -ms-flex-order: -1; order: -1 } .order-last { -ms-flex-order: 13; order: 13 } .order-0 { -ms-flex-order: 0; order: 0 } .order-1 { -ms-flex-order: 1; order: 1 } .order-2 { -ms-flex-order: 2; order: 2 } .order-3 { -ms-flex-order: 3; order: 3 } .order-4 { -ms-flex-order: 4; order: 4 } .order-5 { -ms-flex-order: 5; order: 5 } .order-6 { -ms-flex-order: 6; order: 6 } .order-7 { -ms-flex-order: 7; order: 7 } .order-8 { -ms-flex-order: 8; order: 8 } .order-9 { -ms-flex-order: 9; order: 9 } .order-10 { -ms-flex-order: 10; order: 10 } .order-11 { -ms-flex-order: 11; order: 11 } .order-12 { -ms-flex-order: 12; order: 12 } .offset-1 { margin-left: 8.333333% } .offset-2 { margin-left: 16.666667% } .offset-3 { margin-left: 25% } .offset-4 { margin-left: 33.333333% } .offset-5 { margin-left: 41.666667% } .offset-6 { margin-left: 50% } .offset-7 { margin-left: 58.333333% } .offset-8 { margin-left: 66.666667% } .offset-9 { margin-left: 75% } .offset-10 { margin-left: 83.333333% } .offset-11 { margin-left: 91.666667% } @media (min-width: 576px) { .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-sm-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-sm-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-sm-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-sm-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-sm-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-sm-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-sm-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-sm-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-sm-first { -ms-flex-order: -1; order: -1 } .order-sm-last { -ms-flex-order: 13; order: 13 } .order-sm-0 { -ms-flex-order: 0; order: 0 } .order-sm-1 { -ms-flex-order: 1; order: 1 } .order-sm-2 { -ms-flex-order: 2; order: 2 } .order-sm-3 { -ms-flex-order: 3; order: 3 } .order-sm-4 { -ms-flex-order: 4; order: 4 } .order-sm-5 { -ms-flex-order: 5; order: 5 } .order-sm-6 { -ms-flex-order: 6; order: 6 } .order-sm-7 { -ms-flex-order: 7; order: 7 } .order-sm-8 { -ms-flex-order: 8; order: 8 } .order-sm-9 { -ms-flex-order: 9; order: 9 } .order-sm-10 { -ms-flex-order: 10; order: 10 } .order-sm-11 { -ms-flex-order: 11; order: 11 } .order-sm-12 { -ms-flex-order: 12; order: 12 } .offset-sm-0 { margin-left: 0 } .offset-sm-1 { margin-left: 8.333333% } .offset-sm-2 { margin-left: 16.666667% } .offset-sm-3 { margin-left: 25% } .offset-sm-4 { margin-left: 33.333333% } .offset-sm-5 { margin-left: 41.666667% } .offset-sm-6 { margin-left: 50% } .offset-sm-7 { margin-left: 58.333333% } .offset-sm-8 { margin-left: 66.666667% } .offset-sm-9 { margin-left: 75% } .offset-sm-10 { margin-left: 83.333333% } .offset-sm-11 { margin-left: 91.666667% } } @media (min-width: 768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-md-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-md-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-md-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-md-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-md-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-md-first { -ms-flex-order: -1; order: -1 } .order-md-last { -ms-flex-order: 13; order: 13 } .order-md-0 { -ms-flex-order: 0; order: 0 } .order-md-1 { -ms-flex-order: 1; order: 1 } .order-md-2 { -ms-flex-order: 2; order: 2 } .order-md-3 { -ms-flex-order: 3; order: 3 } .order-md-4 { -ms-flex-order: 4; order: 4 } .order-md-5 { -ms-flex-order: 5; order: 5 } .order-md-6 { -ms-flex-order: 6; order: 6 } .order-md-7 { -ms-flex-order: 7; order: 7 } .order-md-8 { -ms-flex-order: 8; order: 8 } .order-md-9 { -ms-flex-order: 9; order: 9 } .order-md-10 { -ms-flex-order: 10; order: 10 } .order-md-11 { -ms-flex-order: 11; order: 11 } .order-md-12 { -ms-flex-order: 12; order: 12 } .offset-md-0 { margin-left: 0 } .offset-md-1 { margin-left: 8.333333% } .offset-md-2 { margin-left: 16.666667% } .offset-md-3 { margin-left: 25% } .offset-md-4 { margin-left: 33.333333% } .offset-md-5 { margin-left: 41.666667% } .offset-md-6 { margin-left: 50% } .offset-md-7 { margin-left: 58.333333% } .offset-md-8 { margin-left: 66.666667% } .offset-md-9 { margin-left: 75% } .offset-md-10 { margin-left: 83.333333% } .offset-md-11 { margin-left: 91.666667% } } @media (min-width: 992px) { .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-lg-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-lg-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-lg-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-lg-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-lg-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-lg-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-lg-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-lg-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-lg-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-lg-first { -ms-flex-order: -1; order: -1 } .order-lg-last { -ms-flex-order: 13; order: 13 } .order-lg-0 { -ms-flex-order: 0; order: 0 } .order-lg-1 { -ms-flex-order: 1; order: 1 } .order-lg-2 { -ms-flex-order: 2; order: 2 } .order-lg-3 { -ms-flex-order: 3; order: 3 } .order-lg-4 { -ms-flex-order: 4; order: 4 } .order-lg-5 { -ms-flex-order: 5; order: 5 } .order-lg-6 { -ms-flex-order: 6; order: 6 } .order-lg-7 { -ms-flex-order: 7; order: 7 } .order-lg-8 { -ms-flex-order: 8; order: 8 } .order-lg-9 { -ms-flex-order: 9; order: 9 } .order-lg-10 { -ms-flex-order: 10; order: 10 } .order-lg-11 { -ms-flex-order: 11; order: 11 } .order-lg-12 { -ms-flex-order: 12; order: 12 } .offset-lg-0 { margin-left: 0 } .offset-lg-1 { margin-left: 8.333333% } .offset-lg-2 { margin-left: 16.666667% } .offset-lg-3 { margin-left: 25% } .offset-lg-4 { margin-left: 33.333333% } .offset-lg-5 { margin-left: 41.666667% } .offset-lg-6 { margin-left: 50% } .offset-lg-7 { margin-left: 58.333333% } .offset-lg-8 { margin-left: 66.666667% } .offset-lg-9 { margin-left: 75% } .offset-lg-10 { margin-left: 83.333333% } .offset-lg-11 { margin-left: 91.666667% } } @media (min-width: 1200px) { .col-xl { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-xl-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100% } .col-xl-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333% } .col-xl-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667% } .col-xl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333% } .col-xl-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667% } .col-xl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-xl-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333% } .col-xl-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667% } .col-xl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-xl-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333% } .col-xl-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667% } .col-xl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .order-xl-first { -ms-flex-order: -1; order: -1 } .order-xl-last { -ms-flex-order: 13; order: 13 } .order-xl-0 { -ms-flex-order: 0; order: 0 } .order-xl-1 { -ms-flex-order: 1; order: 1 } .order-xl-2 { -ms-flex-order: 2; order: 2 } .order-xl-3 { -ms-flex-order: 3; order: 3 } .order-xl-4 { -ms-flex-order: 4; order: 4 } .order-xl-5 { -ms-flex-order: 5; order: 5 } .order-xl-6 { -ms-flex-order: 6; order: 6 } .order-xl-7 { -ms-flex-order: 7; order: 7 } .order-xl-8 { -ms-flex-order: 8; order: 8 } .order-xl-9 { -ms-flex-order: 9; order: 9 } .order-xl-10 { -ms-flex-order: 10; order: 10 } .order-xl-11 { -ms-flex-order: 11; order: 11 } .order-xl-12 { -ms-flex-order: 12; order: 12 } .offset-xl-0 { margin-left: 0 } .offset-xl-1 { margin-left: 8.333333% } .offset-xl-2 { margin-left: 16.666667% } .offset-xl-3 { margin-left: 25% } .offset-xl-4 { margin-left: 33.333333% } .offset-xl-5 { margin-left: 41.666667% } .offset-xl-6 { margin-left: 50% } .offset-xl-7 { margin-left: 58.333333% } .offset-xl-8 { margin-left: 66.666667% } .offset-xl-9 { margin-left: 75% } .offset-xl-10 { margin-left: 83.333333% } .offset-xl-11 { margin-left: 91.666667% } } .router-link-exact-active { color: $--color-primary; } .rg-select { padding: 0 !important; width: 110px !important; height: 38px !important; } .rg-select__content { padding: 0 8px !important; height: 38px !important; }