Initial commit: 积分兑换电商平台多商户版 MER-2.2

Made-with: Cursor
This commit is contained in:
apple
2026-03-08 20:07:52 +08:00
commit de02c8a3e1
4954 changed files with 703009 additions and 0 deletions

View 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;
}

View 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` 方法中设置动态值。

File diff suppressed because one or more lines are too long

View 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;
}

View 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;

View 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};
}

File diff suppressed because it is too large Load Diff