Initial commit: 积分兑换电商平台多商户版 MER-2.2
Made-with: Cursor
This commit is contained in:
63
mer_uniapp/static/css/base.css
Normal file
63
mer_uniapp/static/css/base.css
Normal file
@@ -0,0 +1,63 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/* 全局CSS变量定义 */
|
||||
:root {
|
||||
/* 屏幕高度相关 */
|
||||
--screen-height: 100vh;
|
||||
--screen-width: 100vw;
|
||||
|
||||
/* 状态栏高度 */
|
||||
--status-bar-height: 0px;
|
||||
|
||||
/* 导航栏高度 */
|
||||
--nav-bar-height: 44px;
|
||||
|
||||
/* 安全区域 */
|
||||
--safe-area-inset-top: env(safe-area-inset-top);
|
||||
--safe-area-inset-bottom: env(safe-area-inset-bottom);
|
||||
--safe-area-inset-left: env(safe-area-inset-left);
|
||||
--safe-area-inset-right: env(safe-area-inset-right);
|
||||
|
||||
/* 常用间距 */
|
||||
--spacing-xs: 8rpx;
|
||||
--spacing-sm: 16rpx;
|
||||
--spacing-md: 24rpx;
|
||||
--spacing-lg: 32rpx;
|
||||
--spacing-xl: 48rpx;
|
||||
|
||||
/* 常用圆角 */
|
||||
--border-radius-sm: 8rpx;
|
||||
--border-radius-md: 16rpx;
|
||||
--border-radius-lg: 24rpx;
|
||||
--border-radius-xl: 32rpx;
|
||||
|
||||
/* 常用阴影 */
|
||||
--shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
|
||||
--shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: unset;
|
||||
}
|
||||
/deep/uni-video, /deep/video, /deep/.wscnph, /deep/img, /deep/image {
|
||||
max-width: 750rpx !important;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block
|
||||
}
|
||||
|
||||
page {
|
||||
font-size: 28rpx;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
.main {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
view{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
96
mer_uniapp/static/css/css-variables-usage.md
Normal file
96
mer_uniapp/static/css/css-variables-usage.md
Normal file
@@ -0,0 +1,96 @@
|
||||
# 全局CSS变量使用说明
|
||||
|
||||
## 已定义的全局变量
|
||||
|
||||
### 屏幕尺寸相关
|
||||
```css
|
||||
--screen-height: 100vh; /* 屏幕高度 */
|
||||
--screen-width: 100vw; /* 屏幕宽度 */
|
||||
--status-bar-height: 0px; /* 状态栏高度 */
|
||||
--nav-bar-height: 44px; /* 导航栏高度 */
|
||||
```
|
||||
|
||||
### 安全区域
|
||||
```css
|
||||
--safe-area-inset-top: env(safe-area-inset-top); /* 顶部安全区域 */
|
||||
--safe-area-inset-bottom: env(safe-area-inset-bottom); /* 底部安全区域 */
|
||||
--safe-area-inset-left: env(safe-area-inset-left); /* 左侧安全区域 */
|
||||
--safe-area-inset-right: env(safe-area-inset-right); /* 右侧安全区域 */
|
||||
```
|
||||
|
||||
### 常用间距
|
||||
```css
|
||||
--spacing-xs: 8rpx; /* 超小间距 */
|
||||
--spacing-sm: 16rpx; /* 小间距 */
|
||||
--spacing-md: 24rpx; /* 中等间距 */
|
||||
--spacing-lg: 32rpx; /* 大间距 */
|
||||
--spacing-xl: 48rpx; /* 超大间距 */
|
||||
```
|
||||
|
||||
### 常用圆角
|
||||
```css
|
||||
--border-radius-sm: 8rpx; /* 小圆角 */
|
||||
--border-radius-md: 16rpx; /* 中等圆角 */
|
||||
--border-radius-lg: 24rpx; /* 大圆角 */
|
||||
--border-radius-xl: 32rpx; /* 超大圆角 */
|
||||
```
|
||||
|
||||
### 常用阴影
|
||||
```css
|
||||
--shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 小阴影 */
|
||||
--shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.15); /* 中等阴影 */
|
||||
--shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.2); /* 大阴影 */
|
||||
```
|
||||
|
||||
## 使用示例
|
||||
|
||||
### 1. 设置全屏高度
|
||||
```css
|
||||
.full-screen {
|
||||
height: var(--screen-height);
|
||||
width: var(--screen-width);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 适配状态栏
|
||||
```css
|
||||
.status-bar-padding {
|
||||
padding-top: var(--status-bar-height);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 底部安全区域适配
|
||||
```css
|
||||
.bottom-safe-area {
|
||||
padding-bottom: var(--safe-area-inset-bottom);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 使用预定义间距
|
||||
```css
|
||||
.card {
|
||||
margin: var(--spacing-md);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
```
|
||||
|
||||
### 5. 响应式布局
|
||||
```css
|
||||
.container {
|
||||
min-height: calc(var(--screen-height) - var(--status-bar-height) - var(--nav-bar-height));
|
||||
}
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 这些变量在 `base.css` 中全局定义
|
||||
2. H5环境下会动态设置实际值
|
||||
3. 小程序环境下使用默认值
|
||||
4. 所有变量都支持在组件中直接使用
|
||||
5. 可以通过 `var()` 函数在任何CSS属性中使用
|
||||
|
||||
## 扩展建议
|
||||
|
||||
如需添加新的全局变量,请在 `base.css` 的 `:root` 选择器中添加,并在 `App.vue` 的 `setCSSVariables` 方法中设置动态值。
|
||||
1606
mer_uniapp/static/css/style.scss
Normal file
1606
mer_uniapp/static/css/style.scss
Normal file
File diff suppressed because one or more lines are too long
142
mer_uniapp/static/css/theme.scss
Normal file
142
mer_uniapp/static/css/theme.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
/*
|
||||
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
|
||||
*/
|
||||
@import 'theme_color.scss';
|
||||
|
||||
//主色
|
||||
@mixin main_color($color) {
|
||||
color: $color;
|
||||
color: var(--view-theme, $color) !important;
|
||||
}
|
||||
|
||||
//辅色
|
||||
@mixin second_color($color) {
|
||||
color: $color;
|
||||
color: var(--view-second-theme, $color) !important;
|
||||
}
|
||||
|
||||
//价格色
|
||||
@mixin price_color($color) {
|
||||
color: $color;
|
||||
color: var(--view-priceColor, $color) !important;
|
||||
}
|
||||
|
||||
//左侧按钮
|
||||
@mixin left_color($color) {
|
||||
background-color: $color;
|
||||
background-color: var(--view-left-button-color, $color) !important;
|
||||
}
|
||||
|
||||
// 详情页优惠券,边框颜色
|
||||
@mixin coupons_border_color($color) {
|
||||
border: $color;
|
||||
border: var(--view-coupons-border, $color) !important;
|
||||
}
|
||||
|
||||
// 虚线左边框
|
||||
@mixin dashed_border_left($color) {
|
||||
border: $color;
|
||||
border-left: var(--view-dashed-left-border, $color);
|
||||
}
|
||||
|
||||
// 分类左边边框
|
||||
@mixin border_left($color) {
|
||||
border: $color;
|
||||
border-left: 4rpx solid var(--view-theme);
|
||||
}
|
||||
|
||||
//分类页二级菜单按钮
|
||||
@mixin cate-two-btn($color) {
|
||||
background-color: $color;
|
||||
background-color: var(--view-nav-two-btn, $color) !important;
|
||||
}
|
||||
|
||||
@mixin white_left_border{
|
||||
border-left-color: #fff !important;
|
||||
}
|
||||
|
||||
@mixin white_right_border{
|
||||
border-right-color: #fff !important;
|
||||
}
|
||||
|
||||
//tab下划线
|
||||
@mixin tab_border_bottom($color) {
|
||||
border-bottom: $color;
|
||||
border-bottom: var(--view-tab-border-bottom, $color) !important;
|
||||
}
|
||||
|
||||
// 优惠券淡色
|
||||
@mixin coupons_light_color($color) {
|
||||
background-color: $color;
|
||||
background-color: var(--view-coupons-light-color, $color) !important;
|
||||
}
|
||||
|
||||
//主色背景
|
||||
@mixin main_bg_color($color) {
|
||||
background-color: $color;
|
||||
background-color: var(--view-theme, $color) !important;
|
||||
}
|
||||
|
||||
// 主渐变色
|
||||
@mixin linear-gradient($color) {
|
||||
background:$color;
|
||||
background: linear-gradient(var(--view-main-gradient));
|
||||
}
|
||||
|
||||
//辅渐变色
|
||||
@mixin second-gradient($color) {
|
||||
background:$color;
|
||||
background: linear-gradient(var(--view-second-gradient));
|
||||
}
|
||||
|
||||
// 首页渐变
|
||||
@mixin index-gradient($color) {
|
||||
background:$color;
|
||||
background: -webkit-linear-gradient(var(--view-index-gradient));
|
||||
}
|
||||
|
||||
@mixin seckill-gradient($color) {
|
||||
background:$color;
|
||||
background: -webkit-linear-gradient(var(--view-seckill-gradient));
|
||||
}
|
||||
|
||||
@mixin coupons-gradient($color) {
|
||||
background-image:$color;
|
||||
background-image: -webkit-linear-gradient(var(--view-coupons-gradient));
|
||||
}
|
||||
|
||||
//砍价按钮 bargain-btn-color1
|
||||
@mixin bargain-btn($color) {
|
||||
background-image:$color;
|
||||
background-image: -webkit-linear-gradient(var(--view-bargain-btn));
|
||||
}
|
||||
|
||||
//砍价弹框小三角
|
||||
@mixin bragin-border-rate($color) {
|
||||
border-color:$color;
|
||||
border-color: var(--view-bragin-border-rate);
|
||||
}
|
||||
|
||||
//主色带透明度
|
||||
@mixin main_rgba_color($color) {
|
||||
background:$color;
|
||||
background-color: var(--view-main-rgba);
|
||||
}
|
||||
|
||||
// 我的账户背景浅色渐变色
|
||||
@mixin shallow-gradient($color) {
|
||||
background:$color;
|
||||
background: linear-gradient(var(--view-shallow-gradient)) !important;
|
||||
}
|
||||
|
||||
// 手机登录渐变色
|
||||
@mixin logn-gradient($color) {
|
||||
background:$color;
|
||||
background: -webkit-linear-gradient(var(--view-logn-gradient)) !important;
|
||||
}
|
||||
|
||||
// 详情页优惠券,边框颜色
|
||||
@mixin border_color($color) {
|
||||
border: $color;
|
||||
border: 1rpx solid var(--view-theme) !important;
|
||||
}
|
||||
157
mer_uniapp/static/css/theme_color.scss
Normal file
157
mer_uniapp/static/css/theme_color.scss
Normal file
@@ -0,0 +1,157 @@
|
||||
/*定义全局颜色变量*/
|
||||
/*主色*/
|
||||
$main-color-theme1:#e93323;
|
||||
$main-color-theme2:#FE5C2D;
|
||||
$main-color-theme3:#42CA4D;
|
||||
$main-color-theme4:#1DB0FC;
|
||||
$main-color-theme5:#FF448F;
|
||||
$main-color-theme6:#5c6afc;
|
||||
|
||||
/* 辅色*/
|
||||
$second-color-theme1:#FE960F;
|
||||
$second-color-theme2:#FDB000;
|
||||
$second-color-theme3:#FE960F;
|
||||
$second-color-theme4:#FEAC41;
|
||||
$second-color-theme5:#FE960F;
|
||||
$second-color-theme6:#282828;
|
||||
|
||||
/* 价格色*/
|
||||
$price-color-theme1:#F93323;
|
||||
$price-color-theme2:#FE5C2D;
|
||||
$price-color-theme3:#FF7600;
|
||||
$price-color-theme4:#FD502F;
|
||||
$price-color-theme5:#FF448F;
|
||||
$price-color-theme6:#5c6afc;
|
||||
|
||||
/*左侧按钮*/
|
||||
$left-button-color1:#FE960F;
|
||||
$left-button-color2:#FDB000;
|
||||
$left-button-color3:#FE960F;
|
||||
$left-button-color4:#22CAFD;
|
||||
$left-button-color5:#282828;
|
||||
$left-button-color6:#282828;
|
||||
|
||||
// 首页渐变
|
||||
$index-gradient-color1: 270deg, #E93323 0%, #F5F5F5 100%;
|
||||
$index-gradient-color2: 270deg, #FE5C2D 0%, #F5F5F5 100%;
|
||||
$index-gradient-color3: 270deg, #42CA4D 0%, #F5F5F5 100%;
|
||||
$index-gradient-color4: 270deg, #1DB0FC 0%, #F5F5F5 100%;
|
||||
$index-gradient-color5: 270deg, #FF448F 0%, #F5F5F5 100%;
|
||||
$index-gradient-color6: 270deg, #5c6afc 0%, #F5F5F5 100%;
|
||||
|
||||
//秒杀
|
||||
$seckill-grradient-color1:270deg, #E93323 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
|
||||
$seckill-grradient-color2:270deg, #FE5C2D 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
|
||||
$seckill-grradient-color3:270deg, #1FD06A 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
|
||||
$seckill-grradient-color4:270deg, #1DB0FC 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
|
||||
$seckill-grradient-color5:270deg, #FF448F 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
|
||||
$seckill-grradient-color6:270deg, #5c6afc 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
|
||||
|
||||
/*主渐变色*/
|
||||
$main-gradient-color1: 90deg, #E93323 0%, #FF7931 100%;
|
||||
$main-gradient-color2: 90deg, #FE5C2D 0%, #FF7931 100%;
|
||||
$main-gradient-color3: 90deg, #42Ca4D 0%, #70E038 100%;
|
||||
$main-gradient-color4: 90deg, #1DB0FC 0%, #40D1F4 100%;
|
||||
$main-gradient-color5: 90deg, #FF448F 0%, #FF67AD 100%;
|
||||
$main-gradient-color6: 90deg, #5c6afc 0%, #838dff 100%;
|
||||
|
||||
/*辅色渐变*/
|
||||
$second-gradient-color1:90deg, #FFCA52 0%, #FE960F 100%;
|
||||
$second-gradient-color2:270deg, #FFAA36 0%, #FFC93A 100%;
|
||||
$second-gradient-color3:90deg, #FFB75A 0%, #FE960F 100%;
|
||||
$second-gradient-color4:90deg, #E4F1FD 0%, #C4D9EC 100%;
|
||||
$second-gradient-color5:90deg, #FEE04D 0%, #FEC34C 100%;
|
||||
$second-gradient-color6:90deg, #FEE04D 0%, #FEC34C 100%;
|
||||
|
||||
// 优惠券渐变色
|
||||
$coupons-gradient-color1:0deg, #FF7931 0%, #F11B09 100%;
|
||||
$coupons-gradient-color2:0deg, #FF9445 0%, #FE5C2D 100%;
|
||||
$coupons-gradient-color3:55deg, #70E038 0%, #42Ca4D 100%;
|
||||
$coupons-gradient-color4:0deg, #40D1F4 0%, #1DB0FC 100%;
|
||||
$coupons-gradient-color5:90deg, #FF448F 0%, #FF67AD 100%;
|
||||
$coupons-gradient-color6:90deg, #5c6afc 0%, #838dff 100%;
|
||||
|
||||
//砍价按钮渐变
|
||||
$bargain-btn-color1:270deg, #FF8831 0%, #F11B09 100%;
|
||||
$bargain-btn-color2:270deg, #FF9445 0%, #FE5C2D 100%;
|
||||
$bargain-btn-color3:270deg, #70E038 0%, #42CA4D 100%;
|
||||
$bargain-btn-color4:270deg, #40D1F4 0%, #1DB0FC 100%;
|
||||
$bargain-btn-color5:270deg, #FF67AD 0%, #FF448F 100%;
|
||||
$bargain-btn-color6:270deg, #838dff 0%, #5c6afc 100%;
|
||||
|
||||
//分类页二级菜单按钮颜色
|
||||
$nav-two-btn1:#FFF3F2;
|
||||
$nav-two-btn2:#FFF5F1;
|
||||
$nav-two-btn3:#F0FFF2;
|
||||
$nav-two-btn4:#EAF7FF;
|
||||
$nav-two-btn5:#FFF0F6;
|
||||
$nav-two-btn6:#f2f3ff;
|
||||
|
||||
$coupons-border1: 1px solid #e93323;
|
||||
$coupons-border2: 1px solid #FE5C2D;
|
||||
$coupons-border3: 1px solid #42CA4D;
|
||||
$coupons-border4: 1px solid #1DB0FC;
|
||||
$coupons-border5: 1px solid #FF448F;
|
||||
$coupons-border6: 1px solid #5c6afc;
|
||||
|
||||
$dashed-left-border1: 1px dashed #e93323;
|
||||
$dashed-left-border2: 1px dashed #FE5C2D;
|
||||
$dashed-left-border3: 1px dashed #42CA4D;
|
||||
$dashed-left-border4: 1px dashed #1DB0FC;
|
||||
$dashed-left-border5: 1px dashed #FF448F;
|
||||
$dashed-left-border6: 1px dashed #5c6afc;
|
||||
|
||||
|
||||
// 优惠券淡色
|
||||
$coupons-light-color1:#FFF6F6;
|
||||
$coupons-light-color2:#FEE0D2;
|
||||
$coupons-light-color3:#DBF5D6;
|
||||
$coupons-light-color4:#D1F1FB;
|
||||
$coupons-light-color5:#FFD8E7;
|
||||
$coupons-light-color6:#f2f3ff;
|
||||
|
||||
//tab下划线
|
||||
$tab-border-bottom1:4rpx solid #e93323;
|
||||
$tab-border-bottom2:4rpx solid #FE5C2D;
|
||||
$tab-border-bottom3:4rpx solid #42CA4D;
|
||||
$tab-border-bottom4:4rpx solid #1DB0FC;
|
||||
$tab-border-bottom5:4rpx solid #FF448F;
|
||||
$tab-border-bottom6:4rpx solid #5c6afc;
|
||||
|
||||
//小三角
|
||||
$bragin-border-rate1:#E93323 transparent transparent;
|
||||
$bragin-border-rate2:#FE5C2D transparent transparent;
|
||||
$bragin-border-rate3:#42CA4D transparent transparent;
|
||||
$bragin-border-rate4:#1DB0FC transparent transparent;
|
||||
$bragin-border-rate5:#FF448F transparent transparent;
|
||||
$bragin-border-rate6:#5c6afc transparent transparent;
|
||||
|
||||
//主色带透明度
|
||||
$main-rgba-theme1: rgba(233, 51, 35, .05);
|
||||
$main-rgba-theme2: rgba(254, 92, 45, .05);
|
||||
$main-rgba-theme3: rgba(66, 202, 77, .05);
|
||||
$main-rgba-theme4: rgba(29, 176, 252, .05);
|
||||
$main-rgba-theme5: rgba(255, 69, 144, .05);
|
||||
$main-rgba-theme6: rgba(92, 106, 252, .05);
|
||||
|
||||
/*我的账户背景浅色渐变色*/
|
||||
$shallow-gradient-color1: 180deg, #F2CECB, #F5F5F5;
|
||||
$shallow-gradient-color2: 180deg, #F7D5CB, #F5F5F5;
|
||||
$shallow-gradient-color3: 180deg, #CFECD1, #F5F5F5;
|
||||
$shallow-gradient-color4: 180deg, #C6E6F6, #F5F5F5;
|
||||
$shallow-gradient-color5: 180deg, #F7CEDE, #F5F5F5;
|
||||
$shallow-gradient-color6: 180deg, #dce0ff, #F5F5F5;
|
||||
|
||||
/*手机登录渐变色*/
|
||||
$logn-gradient-color1: 180deg, rgba(232,58,35,0.2) 0%, rgba(255,255,255,0) 100%;
|
||||
$logn-gradient-color2: 180deg, rgba(254,92,45,0.2) 0%, rgba(255,255,255,0) 100%;
|
||||
$logn-gradient-color3: 180deg, rgba(66,202,77,0.2) 0%, rgba(255,255,255,0) 100%;
|
||||
$logn-gradient-color4: 180deg, rgba(29,176,252,0.2) 4%, rgba(255,255,255,0) 100%;
|
||||
$logn-gradient-color5: 180deg, rgba(255,68,143,0.2) 0%, rgba(255,255,255,0) 100%;
|
||||
$logn-gradient-color6: 180deg, rgba(92, 106, 252,0.2) 0%, rgba(255,255,255,0) 100%;
|
||||
|
||||
//$coupons-border1: 1px solid #e93323;
|
||||
//$coupons-border2: 1px solid #FE5C2D;
|
||||
//$coupons-border3: 1px solid #42CA4D;
|
||||
//$coupons-border4: 1px solid #1DB0FC;
|
||||
//$coupons-border5: 1px solid #FF448F;
|
||||
155
mer_uniapp/static/css/theme_vars.scss
Normal file
155
mer_uniapp/static/css/theme_vars.scss
Normal file
@@ -0,0 +1,155 @@
|
||||
@import 'theme_color.scss';
|
||||
|
||||
:root, page {
|
||||
--view-theme: #{$main-color-theme1};
|
||||
--view-second-theme: #{$second-color-theme1};
|
||||
--view-priceColor: #{$price-color-theme1};
|
||||
--view-left-button-color: #{$left-button-color1};
|
||||
--view-index-gradient: #{$index-gradient-color1};
|
||||
--view-seckill-gradient: #{$seckill-grradient-color1};
|
||||
--view-main-gradient: #{$main-gradient-color1};
|
||||
--view-second-gradient: #{$second-gradient-color1};
|
||||
--view-coupons-gradient: #{$coupons-gradient-color1};
|
||||
--view-bargain-btn: #{$bargain-btn-color1};
|
||||
--view-nav-two-btn: #{$nav-two-btn1};
|
||||
--view-coupons-border: #{$coupons-border1};
|
||||
--view-dashed-left-border: #{$dashed-left-border1};
|
||||
--view-coupons-light-color: #{$coupons-light-color1};
|
||||
--view-tab-border-bottom: #{$tab-border-bottom1};
|
||||
--view-bragin-border-rate: #{$bragin-border-rate1};
|
||||
--view-main-rgba: #{$main-rgba-theme1};
|
||||
--view-shallow-gradient: #{$shallow-gradient-color1};
|
||||
--view-logn-gradient: #{$logn-gradient-color1};
|
||||
}
|
||||
|
||||
[data-theme="theme1"] {
|
||||
--view-theme: #{$main-color-theme1};
|
||||
--view-second-theme: #{$second-color-theme1};
|
||||
--view-priceColor: #{$price-color-theme1};
|
||||
--view-left-button-color: #{$left-button-color1};
|
||||
--view-index-gradient: #{$index-gradient-color1};
|
||||
--view-seckill-gradient: #{$seckill-grradient-color1};
|
||||
--view-main-gradient: #{$main-gradient-color1};
|
||||
--view-second-gradient: #{$second-gradient-color1};
|
||||
--view-coupons-gradient: #{$coupons-gradient-color1};
|
||||
--view-bargain-btn: #{$bargain-btn-color1};
|
||||
--view-nav-two-btn: #{$nav-two-btn1};
|
||||
--view-coupons-border: #{$coupons-border1};
|
||||
--view-dashed-left-border: #{$dashed-left-border1};
|
||||
--view-coupons-light-color: #{$coupons-light-color1};
|
||||
--view-tab-border-bottom: #{$tab-border-bottom1};
|
||||
--view-bragin-border-rate: #{$bragin-border-rate1};
|
||||
--view-main-rgba: #{$main-rgba-theme1};
|
||||
--view-shallow-gradient: #{$shallow-gradient-color1};
|
||||
--view-logn-gradient: #{$logn-gradient-color1};
|
||||
}
|
||||
|
||||
[data-theme="theme2"] {
|
||||
--view-theme: #{$main-color-theme2};
|
||||
--view-second-theme: #{$second-color-theme2};
|
||||
--view-priceColor: #{$price-color-theme2};
|
||||
--view-left-button-color: #{$left-button-color2};
|
||||
--view-index-gradient: #{$index-gradient-color2};
|
||||
--view-seckill-gradient: #{$seckill-grradient-color2};
|
||||
--view-main-gradient: #{$main-gradient-color2};
|
||||
--view-second-gradient: #{$second-gradient-color2};
|
||||
--view-coupons-gradient: #{$coupons-gradient-color2};
|
||||
--view-bargain-btn: #{$bargain-btn-color2};
|
||||
--view-nav-two-btn: #{$nav-two-btn2};
|
||||
--view-coupons-border: #{$coupons-border2};
|
||||
--view-dashed-left-border: #{$dashed-left-border2};
|
||||
--view-coupons-light-color: #{$coupons-light-color2};
|
||||
--view-tab-border-bottom: #{$tab-border-bottom2};
|
||||
--view-bragin-border-rate: #{$bragin-border-rate2};
|
||||
--view-main-rgba: #{$main-rgba-theme2};
|
||||
--view-shallow-gradient: #{$shallow-gradient-color2};
|
||||
--view-logn-gradient: #{$logn-gradient-color2};
|
||||
}
|
||||
|
||||
[data-theme="theme3"] {
|
||||
--view-theme: #{$main-color-theme3};
|
||||
--view-second-theme: #{$second-color-theme3};
|
||||
--view-priceColor: #{$price-color-theme3};
|
||||
--view-left-button-color: #{$left-button-color3};
|
||||
--view-index-gradient: #{$index-gradient-color3};
|
||||
--view-seckill-gradient: #{$seckill-grradient-color3};
|
||||
--view-main-gradient: #{$main-gradient-color3};
|
||||
--view-second-gradient: #{$second-gradient-color3};
|
||||
--view-coupons-gradient: #{$coupons-gradient-color3};
|
||||
--view-bargain-btn: #{$bargain-btn-color3};
|
||||
--view-nav-two-btn: #{$nav-two-btn3};
|
||||
--view-coupons-border: #{$coupons-border3};
|
||||
--view-dashed-left-border: #{$dashed-left-border3};
|
||||
--view-coupons-light-color: #{$coupons-light-color3};
|
||||
--view-tab-border-bottom: #{$tab-border-bottom3};
|
||||
--view-bragin-border-rate: #{$bragin-border-rate3};
|
||||
--view-main-rgba: #{$main-rgba-theme3};
|
||||
--view-shallow-gradient: #{$shallow-gradient-color3};
|
||||
--view-logn-gradient: #{$logn-gradient-color3};
|
||||
}
|
||||
|
||||
[data-theme="theme4"] {
|
||||
--view-theme: #{$main-color-theme4};
|
||||
--view-second-theme: #{$second-color-theme4};
|
||||
--view-priceColor: #{$price-color-theme4};
|
||||
--view-left-button-color: #{$left-button-color4};
|
||||
--view-index-gradient: #{$index-gradient-color4};
|
||||
--view-seckill-gradient: #{$seckill-grradient-color4};
|
||||
--view-main-gradient: #{$main-gradient-color4};
|
||||
--view-second-gradient: #{$second-gradient-color4};
|
||||
--view-coupons-gradient: #{$coupons-gradient-color4};
|
||||
--view-bargain-btn: #{$bargain-btn-color4};
|
||||
--view-nav-two-btn: #{$nav-two-btn4};
|
||||
--view-coupons-border: #{$coupons-border4};
|
||||
--view-dashed-left-border: #{$dashed-left-border4};
|
||||
--view-coupons-light-color: #{$coupons-light-color4};
|
||||
--view-tab-border-bottom: #{$tab-border-bottom4};
|
||||
--view-bragin-border-rate: #{$bragin-border-rate4};
|
||||
--view-main-rgba: #{$main-rgba-theme4};
|
||||
--view-shallow-gradient: #{$shallow-gradient-color4};
|
||||
--view-logn-gradient: #{$logn-gradient-color4};
|
||||
}
|
||||
|
||||
[data-theme="theme5"] {
|
||||
--view-theme: #{$main-color-theme5};
|
||||
--view-second-theme: #{$second-color-theme5};
|
||||
--view-priceColor: #{$price-color-theme5};
|
||||
--view-left-button-color: #{$left-button-color5};
|
||||
--view-index-gradient: #{$index-gradient-color5};
|
||||
--view-seckill-gradient: #{$seckill-grradient-color5};
|
||||
--view-main-gradient: #{$main-gradient-color5};
|
||||
--view-second-gradient: #{$second-gradient-color5};
|
||||
--view-coupons-gradient: #{$coupons-gradient-color5};
|
||||
--view-bargain-btn: #{$bargain-btn-color5};
|
||||
--view-nav-two-btn: #{$nav-two-btn5};
|
||||
--view-coupons-border: #{$coupons-border5};
|
||||
--view-dashed-left-border: #{$dashed-left-border5};
|
||||
--view-coupons-light-color: #{$coupons-light-color5};
|
||||
--view-tab-border-bottom: #{$tab-border-bottom5};
|
||||
--view-bragin-border-rate: #{$bragin-border-rate5};
|
||||
--view-main-rgba: #{$main-rgba-theme5};
|
||||
--view-shallow-gradient: #{$shallow-gradient-color5};
|
||||
--view-logn-gradient: #{$logn-gradient-color5};
|
||||
}
|
||||
|
||||
[data-theme="theme6"] {
|
||||
--view-theme: #{$main-color-theme6};
|
||||
--view-second-theme: #{$second-color-theme6};
|
||||
--view-priceColor: #{$price-color-theme6};
|
||||
--view-left-button-color: #{$left-button-color6};
|
||||
--view-index-gradient: #{$index-gradient-color6};
|
||||
--view-seckill-gradient: #{$seckill-grradient-color6};
|
||||
--view-main-gradient: #{$main-gradient-color6};
|
||||
--view-second-gradient: #{$second-gradient-color6};
|
||||
--view-coupons-gradient: #{$coupons-gradient-color6};
|
||||
--view-bargain-btn: #{$bargain-btn-color6};
|
||||
--view-nav-two-btn: #{$nav-two-btn6};
|
||||
--view-coupons-border: #{$coupons-border6};
|
||||
--view-dashed-left-border: #{$dashed-left-border6};
|
||||
--view-coupons-light-color: #{$coupons-light-color6};
|
||||
--view-tab-border-bottom: #{$tab-border-bottom6};
|
||||
--view-bragin-border-rate: #{$bragin-border-rate6};
|
||||
--view-main-rgba: #{$main-rgba-theme6};
|
||||
--view-shallow-gradient: #{$shallow-gradient-color6};
|
||||
--view-logn-gradient: #{$logn-gradient-color6};
|
||||
}
|
||||
2494
mer_uniapp/static/css/unocss.css
Normal file
2494
mer_uniapp/static/css/unocss.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user