| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- /**
- * 你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
- * 建议使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
- */
- //主色调,红色:#FF0036,绿色 #4CAF50,蓝色:#03A9F4,黄色:#FF9800,粉色:#FF547B,棕色:#C3A769,浅绿色:#65C4AA,黑色:#333333,紫色:#B323B4,淡粉色:#FF8B8B
- // 颜色
- $color-title: #303133; // 主标题
- $color-sub: #606266; // 副标题
- $color-tip: #909399; // 辅助提示色
- $color-bg: #f8f8f8; // 背景色
- $color-line: #eeeeee; //分割线
- $color-disabled: #cccccc; // 禁用色
- // 文字
- $font-size-base: 28rpx; // 14px,正文文字
- $font-size-toolbar: 32rpx; // 16px,用于导航栏、标题
- $font-size-sub: 26rpx; // 13px,副标题
- $font-size-tag: 24rpx; // 12px,辅助性文字/大标签
- $font-size-goods-tag: 22rpx; // 11px,商品列表角标
- $font-size-activity-tag: 20rpx; // 10px,活动角标(拼团等角标)/小标签文字
- $margin-both: 30rpx; //外边距 左右
- $margin-updown: 20rpx; // 外边距 上下
- $border-radius: 10rpx; //圆角
- $padding: 20rpx; //内边距
- @mixin base($baseColor) {
- $base-color: $baseColor;
- .color-base-text {
- color: $base-color !important;
- }
- //背景色
- .color-base-bg {
- background-color: $base-color !important;
- }
- // 浅主色调背景
- .color-base-bg-light {
- background-color: lighten($base-color, 45%) !important;
- }
- .color-base-text-before {
- &::after,
- &::before {
- color: $base-color !important;
- }
- }
- .color-base-bg-before {
- &::after,
- &::before {
- background: $base-color !important;
- }
- }
- //边框
- .color-base-border {
- border-color: $base-color !important;
- &-top {
- border-top-color: $base-color !important;
- }
- &-bottom {
- border-bottom-color: $base-color !important;
- }
- &-right {
- border-right-color: $base-color !important;
- }
- &-left {
- border-left-color: $base-color !important;
- }
- }
- //按钮
- button {
- margin: 0 30rpx;
- font-size: $font-size-base;
- border-radius: 20px;
- line-height: 2.7;
- &[type='primary'] {
- background-color: $base-color;
- &[plain] {
- background-color: transparent;
- color: $base-color;
- border-color: $base-color;
- }
- }
- &[type='default'] {
- background: #fff;
- border: 1px solid $color-line;
- color: $color-title;
- }
- &[size='mini'] {
- margin: 0 !important;
- line-height: 2.3;
- font-size: $font-size-tag;
- &[type='default'] {
- background-color: #fff;
- }
- }
- &.button-hover[type='primary'] {
- background-color: $base-color;
- &[plain] {
- color:rgba($base-color, 0.6);
- border-color: rgba($base-color, 0.6);
- background-color: #fff;
- }
- }
- &[disabled],
- &.disabled {
- background: $color-line !important;
- color: rgba(0, 0, 0, 0.3) !important;
- border-color: $color-line !important;
- }
- }
- // 复选框
- uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
- color: $base-color !important;
- }
- // 开关
- uni-switch .uni-switch-input.uni-switch-input-checked {
- background-color: $base-color !important;
- border-color: $base-color !important;
- }
- // 单选
- uni-radio .uni-radio-input-checked {
- background-color: $base-color !important;
- border-color: $base-color !important;
- }
- // 滑块
- uni-slider .uni-slider-track {
- background-color: $base-color !important;
- }
- .uni-tag--primary {
- color: #fff !important;
- background-color: $base-color !important;
- border-color: $base-color !important;
- }
- .uni-tag--primary.uni-tag--inverted {
- color: #fff !important;
- background-color: $base-color !important;
- border-color: $base-color !important;
- // color: $base-color !important;
- // background-color: #fff !important;
- // border-color: $base-color !important;
- }
- }
- .uni-line-hide{
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .uni-using-hide{
- overflow: hidden;
- width: 100%;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .prevent-head-roll{
- position: fixed;
- left: 0;
- right: 0;
- z-index: 998;
- }
|