| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- /* 页面左右间距 */
- $page-row-spacing: 30upx;
- $page-color-base: #f8f8f8;
- $page-color-light: #f8f6fc;
- $base-color: #1A78F6;
- /* 文字尺寸 */
- $font-sm: 24upx;
- $font-base: 28upx;
- $font-lg: 32upx;
- /*文字颜色*/
- $font-color-dark: #333333;
- $font-color-base: #666666;
- $font-color-light: #999999;
- $font-color-disabled: #C0C4CC;
- $font-color-spec: #1A78F6;
- /* 边框颜色 */
- $border-color-dark: #999999;
- $border-color-base: #0F40F5;
- $border-color-light: #FF9000;
- /* 图片加载中颜色 */
- $image-bg-color: #f5f5f5;
- /* 行为相关颜色 */
- $uni-color-primary:#1A78F6;
- $uni-color-success: #4cd964;
- $uni-color-warning: #f0ad4e;
- $uni-color-error: #dd524d;
- /*主要按钮背景色*/
- $uni-color-button: #d64d3b;
- //
- /*价格颜色*/
- $uni-color-word: #0F40F5;
- // 商城主题色
- $uni-color-main: #1A78F6;
- uni-page-head
- {
- display: none;
- }
- // 主题色
- $theme-color: #1A78F6;
- $light-color: #0F40F5;
- $negative-price-color: #1A78F6;
- $title-color: #111111; // 栏目颜色
- $text-color: #333333; // 主要内容颜色
- $desc-color: #999999; // 标题及次要内容字体颜色
- $icon-color: #666666;
- $bg-color: #F5F5F5;
- $other-color: #6c6c6c;
- // 文字溢出隐藏函数
- @mixin textOverflow ($w: 100%) {
- width: $w;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- @mixin textColumnOverflow ($clamp:2) {
- overflow: hidden;
- text-overflow: ellipsis;
- display:-webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: $clamp;
- }
- // 按钮函数
- @mixin btnGeneral($width:222upx, $height: 64upx, $bor:64upx) {
- border-radius: $bor;
- width: $width;
- height: $height;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- // 灰色背景及文字
- @mixin bg-content {
- background-color: #f5f5f5;
- color: #6c6c6c;
- }
- @mixin between($items: center) {
- display: flex;
- justify-content: space-between;
- align-items: $items;
- }
- @mixin around($items: center) {
- display: flex;
- justify-content: space-around;
- align-items: $items;
- }
- @mixin flexStart($items: center) {
- display: flex;
- justify-content: flex-start;
- align-items: $items;
- }
- @mixin flexEnd($items: center) {
- display: flex;
- justify-content: flex-end;
- align-items: $items;
- }
- @mixin flexCenter($items: center) {
- display: flex;
- justify-content: center;
- align-items: $items;
- }
- @mixin boxShadow ($color: rgba(0,0,0,.3)) {
- box-shadow: 0 0 10upx $color;
- }
- // 底部安全距离
- // constant(safe-area-inset-bottom)
- // env(safe-area-inset-bottom)
- .bbline {
- border-bottom: 2upx solid #ececec;
- }
- // 大按钮 渐变色
- .big-button {
- background-image: linear-gradient(to right, #FF7001, #FF8805);
- color: #fff;
- @include btnGeneral(308upx);
- }
- // 小按钮 渐变色
- .small-button {
- background-image: linear-gradient(to right, #FF8D0E, #0F40F5);
- color: #fff;
- @include btnGeneral;
- }
- // 镂空按钮
- .hollow-button {
- border: 2upx solid #0F40F5;
- color: #0F40F5;
- @include btnGeneral;
- }
- // 主题标签色
- .primary-tag {
- border: 2upx solid #0F40F5;
- color: #0F40F5;
- @include btnGeneral(222upx, 64upx, 10upx);
- }
- // 高亮标签色
- .light-tag {
- border: 2upx solid #FF9000;
- color: #FF9000;
- @include btnGeneral(222upx, 64upx, 10upx);
- }
- // 次要标签色
- .desc-tag {
- border: 2upx solid #999999;
- color: #999999;
- @include btnGeneral(222upx, 64upx, 10upx);
- }
- // 带背景色主题标签
- .primary-tag {
- background-color: #0F40F5;
- color: #fff;
- @include btnGeneral(222upx, 64upx, 10upx);
- }
- // 带背景色高亮标签
- .light-bg-tag {
- background-color: #FF9000;
- color: #fff;
- @include btnGeneral(222upx, 64upx, 10upx);
- }
- // 蒙板颜色
- .uni-mark {
- background-color: rgba(190,190,190,.6);
- }
-
- // 折扣标签
- .disc {
- position: absolute;
- top: 0;
- left: 10upx;
- z-index: 2;
- background-color: $light-color;
- color: #fff;
- font-size: $font-sm;
- box-shadow: 0 0 10upx rgba(0,0,0,.5);
- padding: 0 10upx;
- border-radius: 0 0 10upx 10upx;
- }
- .price {
- color: #0F40F5;
- }
|