feat:v1.4前端更新

This commit is contained in:
超凡
2025-06-24 14:43:09 +08:00
parent 0268aa5033
commit 35fec82e4a
1026 changed files with 118424 additions and 56490 deletions

View File

File diff suppressed because one or more lines are too long

388
app/static/css/diyMain.scss Normal file
View File

@@ -0,0 +1,388 @@
.main {
padding: 0 20rpx;
}
.spike-bd {
margin-bottom: 20rpx;
border-radius: 16rpx;
padding: 0 20rpx 0 10rpx;
display: flex;
position: relative;
justify-content: space-between;
.title-img{
width: 136rpx;
height: 36rpx;
}
.title {
font-weight: bold;
color: #282828;
font-size: 0;
.title-img{
width: 136rpx;
height: 36rpx;
}
}
.spike-distance {
margin-left: 15rpx;
position: relative;
top: 1.4rpx;
display: flex;
border: 1px solid #e93323;
border-radius: 4rpx;
height: 40rpx;
/*#ifdef MP*/
padding-left: 108rpx;
/*#endif*/
/*#ifndef MP*/
padding-left: 100rpx;
/*#endif*/
.bg-red {
font-size: 20rpx;
color: #fff;
background-color: #e93323;
padding: 0 10rpx;
display: flex;
justify-content: center;
align-items: center;
height: 110%;
position: absolute;
left: -1rpx;
top: -2rpx;
width: 100rpx;
border-radius: 4rpx 0 0 4rpx;
}
/deep/.time {
font-size: 22rpx;
color: #e93323;
align-items: center;
/deep/.red {
margin: 0;
}
}
.red-color {
color: #e93323;
}
}
.more-btn {
color: #282828;
font-size: 24rpx;
.iconfont {
font-size: 22rpx;
}
}
}
.colum0{
white-space: nowrap;
display: flex;
}
.combination-item {
/* #ifdef MP */
width: 294rpx;
height: 140rpx;
/* #endif */
/* #ifdef H5 || APP-PLUS */
width: 328rpx;
height: 180rpx;
/* #endif */
display: inline-block;
background-size: 100%;
position: relative;
background-repeat: no-repeat;
border-radius: 16rpx;
.img-box {
width: 122rpx;
height: 122rpx;
position: absolute;
/deep/image,/deep/.easy-loadimage,/deep/uni-image {
width: 122rpx;
height: 122rpx;
}
}
.name {
font-size: 30rpx;
color: #333333;
font-weight: bold;
line-height: 32rpx;
}
.price {
display: block;
font-size: 30rpx;
font-weight: bold;
margin-top: 8rpx;
color: #e93323;
text {
font-size: 20rpx;
}
}
.gocom_btn {
display: block;
margin-top: 6rpx;
color: #fff;
font-size: 22rpx;
font-weight: bold;
width: 100rpx;
line-height: 30rpx;
text-align: center;
border-radius: 16rpx;
text {
font-weight: normal;
font-size: 16rpx;
}
}
&:nth-child(1) {
/* #ifdef MP */
height: 336rpx;
/* #endif */
/* #ifdef H5 || APP-PLUS */
height: 378rpx;
/* #endif */
padding: 20rpx 20rpx 28rpx;
float: left;
.img-box {
width: 210rpx;
height: 210rpx;
right: 18rpx;
bottom: 18rpx;
/deep/image,/deep/.easy-loadimage,/deep/uni-image {
width: 210rpx;
height: 210rpx;
}
}
.gocom_btn {
background: linear-gradient(90deg, #fd5d48 0%, #f63724 100%);
}
}
&:nth-child(2),
&:nth-child(3) {
float: right;
padding: 20rpx 18rpx;
.name {
width: 148rpx;
}
.img-box {
right: 14rpx;
bottom: 14rpx;
/deep/image,/deep/.easy-loadimage,/deep/uni-image{
width: 122rpx;
height: 122rpx;
}
}
}
&:nth-child(2) {
.gocom_btn {
background: linear-gradient(90deg, #fdca1a 0%, #f7b21f 100%);
}
}
&:nth-child(3) {
margin-top: 18rpx;
.img-box {
right: 14rpx;
bottom: 14rpx;
}
.gocom_btn {
background: linear-gradient(90deg, #ffb052 0%, #fe961a 100%);
}
}
}
.spike-wrapper {
width: 100%;
&.wrapper2{
overflow: hidden;
}
.spike-item {
display: inline-block;
width: 222rpx;
margin: 0 20rpx 20rpx 0;
&.presell-item {
width: 210rpx;
.img-box {
height: 210rpx;
/deep/image,/deep/.easy-loadimage,uni-image{
height: 210rpx;
}
}
.name {
margin-top: 8rpx;
color: #282828;
}
}
&.assist-item {
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.08);
}
.img-box {
position: relative;
height: 222rpx;
.participants {
padding: 4rpx 12rpx;
border-radius: 16rpx;
background: rgba(0, 0, 0, 0.35);
color: #fff;
text-align: center;
position: absolute;
top: 10rpx;
left: 10rpx;
font-size: 20rpx;
}
/deep/image,/deep/.easy-loadimage,uni-image {
width: 100%;
height: 222rpx;
border-radius: 16rpx;
}
.box_bg {
position: absolute;
bottom: 0;
left: 0;
text-align: center;
width: 149rpx;
height: 42rpx;
line-height: 42rpx;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
font-size: 22rpx;
}
.msg {
position: absolute;
left: 10rpx;
bottom: 16rpx;
width: 86rpx;
height: 30rpx;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(255, 109, 96, 1);
border-radius: 6rpx;
font-size: 20rpx;
color: $theme-color;
}
}
/deep/.img-box0 image,/deep/.img-box0 .easy-loadimage,/deep/.img-box0 uni-image {
border-radius: 0;
}
.info {
margin-top: 10rpx;
.name {
font-size: 26rpx;
}
.stock-box {
width: 100%;
height: 20rpx;
background-color: #ffdcd9;
border-radius: 20rpx;
margin-top: 13rpx;
position: relative;
color: #fff;
font-size: 18rpx;
line-height: 20rpx;
text-align: center;
overflow: hidden;
.grabbed {
height: 20rpx;
background: linear-gradient(#ff0000, #ff5400);
position: absolute;
top: 0;
left: 0;
border-radius: 20rpx;
}
.stock-sales {
position: absolute;
left: 50%;
margin-left: -40rpx;
}
}
.price-box {
display: flex;
align-items: center;
justify-content: start;
margin-top: 4rpx;
&.presell-price {
display: block;
.old-price {
display: block;
margin: 6rpx 0 0 0;
}
}
.tips {
display: flex;
align-items: center;
justify-content: center;
width: 28rpx;
height: 28rpx;
background-color: $theme-color;
color: #fff;
font-size: 20rpx;
border-radius: 2px;
}
.price {
display: flex;
color: $theme-color;
font-size: 28rpx;
font-weight: bold;
text {
font-size: 18rpx;
}
}
.old-price {
display: flex;
margin-left: 10rpx;
color: #aaaaaa;
text-decoration: line-through;
font-size: 20rpx;
text {
font-size: 18rpx;
}
}
}
}
.assist-info {
.price {
display: flex;
color: $theme-color;
font-size: 28rpx;
font-weight: bold;
margin-top: 8rpx;
text {
font-size: 18rpx;
}
.assist_price {
font-size: 20rpx;
display: inline-block;
width: 82rpx;
height: 32rpx;
text-align: center;
line-height: 30rpx;
background: #ffeae5;
border-radius: 4rpx;
}
}
&.assist-info1{
padding-bottom: 20rpx;
}
.price-box {
padding: 15rpx 15rpx 8rpx;
.name {
font-size: 24rpx;
color: #333;
line-height: 30rpx;
}
}
.initiate_btn {
width: 100%;
height: 48rpx;
line-height: 48rpx;
background: linear-gradient(90deg, #ff0000 0%, #ff5400 100%);
text-align: center;
color: #fff;
font-size: 24rpx;
border-radius: 0 0 16rpx 16rpx;
margin: 0 auto;
&.initiate_btn1{
width: 90%;
border-radius: 24rpx;
}
}
}
}
&.wrapper1{
.spike-item{
width: 210rpx;
}
}
}

View File

File diff suppressed because one or more lines are too long

182
app/static/css/theme.scss Normal file
View File

@@ -0,0 +1,182 @@
/*
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
*/
//主色
@mixin main_color($color) {
color: $color;
[data-theme = "theme1"] & {color: $main-color-theme1 !important;}
[data-theme = "theme2"] & {color: $main-color-theme2 !important;}
[data-theme = "theme3"] & {color: $main-color-theme3 !important;}
[data-theme = "theme4"] & {color: $main-color-theme4 !important;}
[data-theme = "theme5"] & {color: $main-color-theme5 !important;}
}
//辅色
@mixin second_color($color) {
color: $color;
[data-theme = "theme1"] & {color: $second-color-theme1 !important;}
[data-theme = "theme2"] & {color: $second-color-theme2 !important;}
[data-theme = "theme3"] & {color: $second-color-theme3 !important;}
[data-theme = "theme4"] & {color: $second-color-theme4 !important;}
[data-theme = "theme5"] & {color: $second-color-theme5 !important;}
}
//价格色
@mixin price_color($color) {
color: $color;
[data-theme = "theme1"] & {color: $price-color-theme1 !important;}
[data-theme = "theme2"] & {color: $price-color-theme2 !important;}
[data-theme = "theme3"] & {color: $price-color-theme3 !important;}
[data-theme = "theme4"] & {color: $price-color-theme4 !important;}
[data-theme = "theme5"] & {color: $price-color-theme5 !important;}
}
//左侧按钮
@mixin left_color($color) {
background-color: $color;
[data-theme = "theme1"] & {background-color: $left-button-color1 !important;}
[data-theme = "theme2"] & {background-color: $left-button-color2 !important;}
[data-theme = "theme3"] & {background-color: $left-button-color3 !important;}
[data-theme = "theme4"] & {background-color: $left-button-color4 !important;}
[data-theme = "theme5"] & {background-color: $left-button-color5 !important;}
}
// 详情页优惠券
@mixin coupons_border_color($color) {
border: $color;
[data-theme = "theme1"] & {border: $coupons-border1;}
[data-theme = "theme2"] & {border: $coupons-border2;}
[data-theme = "theme3"] & {border: $coupons-border3;}
[data-theme = "theme4"] & {border: $coupons-border4;}
[data-theme = "theme5"] & {border: $coupons-border5;}
}
//分类页二级菜单按钮
@mixin cate-two-btn($color) {
background-color: $color;
[data-theme = "theme1"] & {background-color: $nav-two-btn1 !important;}
[data-theme = "theme2"] & {background-color: $nav-two-btn2 !important;}
[data-theme = "theme3"] & {background-color: $nav-two-btn3 !important;}
[data-theme = "theme4"] & {background-color: $nav-two-btn4 !important;}
[data-theme = "theme5"] & {background-color: $nav-two-btn5 !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;
[data-theme = "theme1"] & {border-bottom: $tab-border-bottom1 !important;}
[data-theme = "theme2"] & {border-bottom: $tab-border-bottom2 !important;}
[data-theme = "theme3"] & {border-bottom: $tab-border-bottom3 !important;}
[data-theme = "theme4"] & {border-bottom: $tab-border-bottom4 !important;}
[data-theme = "theme5"] & {border-bottom: $tab-border-bottom5 !important;}
}
// 优惠券淡色
@mixin coupons_light_color($color) {
background-color: $color;
[data-theme = "theme1"] & {background-color: $coupons-light-color1 !important;}
[data-theme = "theme2"] & {background-color: $coupons-light-color2 !important;}
[data-theme = "theme3"] & {background-color: $coupons-light-color3 !important;}
[data-theme = "theme4"] & {background-color: $coupons-light-color4 !important;}
[data-theme = "theme5"] & {background-color: $coupons-light-color5 !important;}
}
//主色背景
@mixin main_bg_color($color) {
background-color: $color;
[data-theme = "theme1"] & {background-color: $main-color-theme1 !important;}
[data-theme = "theme2"] & {background-color: $main-color-theme2 !important;}
[data-theme = "theme3"] & {background-color: $main-color-theme3 !important;}
[data-theme = "theme4"] & {background-color: $main-color-theme4 !important;}
[data-theme = "theme5"] & {background-color: $main-color-theme5 !important;}
}
// 主渐变色
@mixin linear-gradient($color) {
background:$color;
[data-theme = "theme1"] & {background: linear-gradient($main-gradient-color1);}
[data-theme = "theme2"] & {background: linear-gradient($main-gradient-color2);}
[data-theme = "theme3"] & {background: linear-gradient($main-gradient-color3);}
[data-theme = "theme4"] & {background: linear-gradient($main-gradient-color4);}
[data-theme = "theme5"] & {background: linear-gradient($main-gradient-color5);}
}
//辅渐变色
@mixin second-gradient($color) {
background:$color;
[data-theme = "theme1"] & {background: linear-gradient($second-gradient-color1); }
[data-theme = "theme2"] & {background: linear-gradient($second-gradient-color2); }
[data-theme = "theme3"] & {background: linear-gradient($second-gradient-color3);}
[data-theme = "theme4"] & {background: linear-gradient($second-gradient-color4);}
[data-theme = "theme5"] & {background: linear-gradient($second-gradient-color5); }
}
// 首页渐变
@mixin index-gradient($color) {
background:$color;
[data-theme = "theme1"] & {background: -webkit-linear-gradient($index-gradient-color1);}
[data-theme = "theme2"] & {background: -webkit-linear-gradient($index-gradient-color2);}
[data-theme = "theme3"] & {background: -webkit-linear-gradient($index-gradient-color3);}
[data-theme = "theme4"] & {background: -webkit-linear-gradient($index-gradient-color4);}
[data-theme = "theme5"] & {background: -webkit-linear-gradient($index-gradient-color5);}
}
@mixin seckill-gradient($color) {
background:$color;
[data-theme = "theme1"] & {background: -webkit-linear-gradient($miaosha-grradient-color1); }
[data-theme = "theme2"] & {background: -webkit-linear-gradient($miaosha-grradient-color2);}
[data-theme = "theme3"] & {background: -webkit-linear-gradient($miaosha-grradient-color3);}
[data-theme = "theme4"] & {background: -webkit-linear-gradient($miaosha-grradient-color4); }
[data-theme = "theme5"] & {background: -webkit-linear-gradient($miaosha-grradient-color5); }
}
@mixin coupons-gradient($color) {
background-image:$color;
[data-theme = "theme1"] & {background-image: -webkit-linear-gradient($coupons-gradient-color1); }
[data-theme = "theme2"] & {background-image: -webkit-linear-gradient($coupons-gradient-color2); }
[data-theme = "theme3"] & {background-image: -webkit-linear-gradient($index-gradient-color3); }
[data-theme = "theme4"] & {background-image: -webkit-linear-gradient($coupons-gradient-color4);}
[data-theme = "theme5"] & {background-image: -webkit-linear-gradient($coupons-gradient-color5); }
}
//砍价按钮 bargain-btn-color1
@mixin bargain-btn($color) {
background-image:$color;
[data-theme = "theme1"] & {background-image: -webkit-linear-gradient($bargain-btn-color1); }
[data-theme = "theme2"] & {background-image: -webkit-linear-gradient($bargain-btn-color2); }
[data-theme = "theme3"] & {background-image: -webkit-linear-gradient($bargain-btn-color3);}
[data-theme = "theme4"] & {background-image: -webkit-linear-gradient($bargain-btn-color4);}
[data-theme = "theme5"] & {background-image: -webkit-linear-gradient($bargain-btn-color5); }
}
//砍价弹框小三角
@mixin bragin-border-rate($color) {
border-color:$color;
[data-theme = "theme1"] & {border-color: $bragin-border-rate1;}
[data-theme = "theme2"] & {border-color: $bragin-border-rate2;}
[data-theme = "theme3"] & {border-color: $bragin-border-rate3;}
[data-theme = "theme4"] & {border-color: $bragin-border-rate4;}
[data-theme = "theme5"] & {border-color: $bragin-border-rate5;}
}
// 手机登录渐变色
@mixin logn-gradient($color) {
background:$color;
[data-theme = "theme1"] & {background: -webkit-linear-gradient($logn-gradient-color1) !important;}
[data-theme = "theme2"] & {background: -webkit-linear-gradient($logn-gradient-color2) !important;}
[data-theme = "theme3"] & {background: -webkit-linear-gradient($logn-gradient-color3) !important;}
[data-theme = "theme4"] & {background: -webkit-linear-gradient($logn-gradient-color4) !important;}
[data-theme = "theme5"] & {background: -webkit-linear-gradient($logn-gradient-color5) !important;}
}

View File

@@ -0,0 +1,112 @@
/*定义全局颜色变量*/
/*主色*/
$main-color-theme1:#e93323;
$main-color-theme2:#FE5C2D;
$main-color-theme3:#42CA4D;
$main-color-theme4:#1DB0FC;
$main-color-theme5:#FF448F;
/* 辅色*/
$second-color-theme1:#FE960F;
$second-color-theme2:#FDB000;
$second-color-theme3:#FE960F;
$second-color-theme4:#C4D9EC;
$second-color-theme4:#FEAC41;
/* 价格色*/
$price-color-theme1:#F93323;
$price-color-theme2:#FE5C2D;
$price-color-theme3:#FF7600;
$price-color-theme4:#FD502F;
$price-color-theme5:#FF448F;
/*左侧按钮*/
$left-button-color1:#FE960F;
$left-button-color2:#FDB000;
$left-button-color3:#FE960F;
$left-button-color4:#22CAFD;
$left-button-color5:#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%;
//
$miaosha-grradient-color1:270deg, #E93323 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
$miaosha-grradient-color2:270deg, #FE5C2D 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
$miaosha-grradient-color3:270deg, #1FD06A 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
$miaosha-grradient-color4:270deg, #1DB0FC 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
$miaosha-grradient-color5:270deg, #FF448F 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
/*主渐变色*/
$main-gradient-color1: 90deg, #FF7931 0%, #E93323 100%;
$main-gradient-color2: 90deg, #FF9445 0%, #FE5C2D 100%;
$main-gradient-color3: 55deg, #70E038 0%, #42Ca4D 100%;
$main-gradient-color4: 90deg, #40D1F4 0%, #1DB0FC 100%;
$main-gradient-color5: 90deg, #FF448F 0%, #FF67AD 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%;
// 优惠券渐变色
$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%;
//砍价按钮渐变
$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%;
//分类页二级菜单按钮颜色
$nav-two-btn1:#FDEBE9;
$nav-two-btn2:#FFEFEA;
$nav-two-btn3:#ECFAEE;
$nav-two-btn4:#E9F7FF;
$nav-two-btn5:#FFEDF4;
$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-light-color1:#FDD9D3;
$coupons-light-color2:#FEE0D2;
$coupons-light-color3:#DBF5D6;
$coupons-light-color4:#D1F1FB;
$coupons-light-color5:#FFD8E7;
//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;
//小三角
$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;
/*手机登录渐变色*/
$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%;

2359
app/static/css/unocss.css Normal file
View File

File diff suppressed because it is too large Load Diff