mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-20 18:05:53 +08:00
vue版本升级为2.6 优化cdn加载，优化部分样式，删除某部分图片，修改店铺bug
This commit is contained in:
lemon橪
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 390 KiB After Width: | Height: | Size: 11 KiB |
BIN
buyer/src/assets/images/sprite@2x.png
Normal file
BIN
buyer/src/assets/images/sprite@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@@ -1,89 +1,91 @@
|
||||
|
||||
// coupon
|
||||
.coupon-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.coupon-item {
|
||||
width: 380px;
|
||||
height: 145px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
border: 1px solid #eee;
|
||||
.c-left {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
>div, > p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
>div {
|
||||
.price{
|
||||
color: $theme_color;
|
||||
font-size: 20px;
|
||||
}
|
||||
.describe{
|
||||
background-color: #fff4ec;
|
||||
color: $theme_color;
|
||||
padding: 0 5px;
|
||||
margin-left: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(1){
|
||||
font-weight: bold;
|
||||
}
|
||||
p:nth-of-type(2){
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
b{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 50px;
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
}
|
||||
.c-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 52px;
|
||||
height: 100%;
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
i{
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 42px;
|
||||
width: 380px;
|
||||
height: 145px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
border: 1px solid #eee;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
left: -2px;
|
||||
background-color: #fff;
|
||||
|
||||
.c-left {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
> div,
|
||||
> p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> div {
|
||||
.price {
|
||||
color: $theme_color;
|
||||
font-size: 20px;
|
||||
}
|
||||
.describe {
|
||||
background-color: #fff4ec;
|
||||
color: $theme_color;
|
||||
padding: 0 5px;
|
||||
margin-left: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
}
|
||||
p:nth-of-type(2) {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
i.circle-top{
|
||||
top: -10px;
|
||||
&::after{
|
||||
top: -11px;
|
||||
b {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 50px;
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
i.circle-bottom{
|
||||
bottom: -10px;
|
||||
&::after{
|
||||
bottom: -11px;
|
||||
.c-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 52px;
|
||||
height: 100%;
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 42px;
|
||||
border: 1px solid #eee;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
left: -2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
i.circle-top {
|
||||
top: -10px;
|
||||
&::after {
|
||||
top: -11px;
|
||||
}
|
||||
}
|
||||
i.circle-bottom {
|
||||
bottom: -10px;
|
||||
&::after {
|
||||
bottom: -11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,112 @@
|
||||
/*
|
||||
* @Author: LMR
|
||||
* @Date: 2020-08-11 10:12:34
|
||||
* @Last Modified by: LMR
|
||||
* @Last Modified time: 2020-08-18 16:00:10
|
||||
*/
|
||||
|
||||
//引入主题色
|
||||
@import "./theme.scss";
|
||||
|
||||
.global_color{
|
||||
color: $theme_color;
|
||||
|
||||
// 明亮主题颜色
|
||||
$primary_color: #2d8cf0;
|
||||
$primary_light_color: #0f1011;
|
||||
$primary_dark_color: #2b85e4;
|
||||
$success_color: #19be6b;
|
||||
$warning_color: #ff9900;
|
||||
$error_color: #ed3f14;
|
||||
$handle-btn-color: #438cde;
|
||||
|
||||
$theme_color: #ed3f14;
|
||||
|
||||
$border_color: #dddee1;
|
||||
$title_color: #8c8c8c;
|
||||
$light_title_color: #1c2438;
|
||||
$light_content_color: #495060;
|
||||
$light_sub_color: #80848f;
|
||||
$light_background_color: #f8f8f9;
|
||||
$light_white_background_color: #fff;
|
||||
// 暗黑主题颜色
|
||||
$dark_background_color: #141414;
|
||||
$dark_sub_background_color: #1d1d1d; //稍微浅一点的
|
||||
$dark_content_color: #d5d5d5;
|
||||
|
||||
/***** 封装一些方法可用于 黑暗主题 ，明亮主题 *****/
|
||||
|
||||
// 背景颜色
|
||||
@mixin background_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
background-color: $color;
|
||||
transition: 0.35s;
|
||||
[data-theme="dark"] & {
|
||||
background-color: $dark_background_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
background-color: $light_background_color;
|
||||
}
|
||||
}
|
||||
.global_background_color{
|
||||
background-color: $theme_color;
|
||||
// 辅助背景颜色
|
||||
@mixin sub_background_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
background-color: $color;
|
||||
transition: 0.35s;
|
||||
[data-theme="dark"] & {
|
||||
background-color: $dark_sub_background_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
background-color: $light_background_color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin white_background_color() {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
background-color: $light_white_background_color;
|
||||
transition: 0.35s;
|
||||
[data-theme="dark"] & {
|
||||
background-color: $dark_sub_background_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
background-color: $light_white_background_color;
|
||||
}
|
||||
}
|
||||
|
||||
// 正文颜色
|
||||
@mixin content_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
color: $color;
|
||||
[data-theme="dark"] & {
|
||||
color: $dark_content_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
color: $light_content_color;
|
||||
}
|
||||
}
|
||||
|
||||
// 辅助颜色
|
||||
@mixin sub_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
color: $color;
|
||||
[data-theme="dark"] & {
|
||||
color: $dark_content_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
color: $light_sub_color;
|
||||
}
|
||||
}
|
||||
|
||||
// 标题颜色
|
||||
@mixin title_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
color: $color;
|
||||
[data-theme="dark"] & {
|
||||
color: $dark_content_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
color: $light_title_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 全局变量
|
||||
.global_color {
|
||||
color: $theme_color;
|
||||
}
|
||||
.global_background_color {
|
||||
background-color: $theme_color;
|
||||
}
|
||||
.global_text_left {
|
||||
text-align: left;
|
||||
@@ -26,44 +120,96 @@
|
||||
.global_float_right {
|
||||
float: right;
|
||||
}
|
||||
.clearfix::after{
|
||||
content: '';
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.width_1200{width: 1200px;}
|
||||
.width_800{width: 800px;}
|
||||
.width_400{width: 400px;}
|
||||
.width_300{width: 300px;}
|
||||
.width_200{width: 200px;}
|
||||
.width_100{width: 100px;}
|
||||
.width_1200 {
|
||||
width: 1200px;
|
||||
}
|
||||
.width_800 {
|
||||
width: 800px;
|
||||
}
|
||||
.width_400 {
|
||||
width: 400px;
|
||||
}
|
||||
.width_300 {
|
||||
width: 300px;
|
||||
}
|
||||
.width_200 {
|
||||
width: 200px;
|
||||
}
|
||||
.width_100 {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.fontsize_12{font-size: 12px;}
|
||||
.fontsize_14{font-size: 14px;}
|
||||
.fontsize_16{font-size: 16px;}
|
||||
.fontsize_18{font-size: 18px;}
|
||||
.fontsize_12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.fontsize_14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.fontsize_16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fontsize_18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mb_20{margin-bottom: 20px;}
|
||||
.mt_20{margin-top: 20px;}
|
||||
.ml_20{margin-left: 20px;}
|
||||
.mr_20{margin-right: 20px;}
|
||||
.mb_20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mt_20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.ml_20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.mr_20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mb_10{margin-bottom: 10px;}
|
||||
.mt_10{margin-top: 10px;}
|
||||
.ml_10{margin-left: 10px;}
|
||||
.mr_10{margin-right: 10px;}
|
||||
.mb_10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mt_10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.ml_10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mr_10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.pb_20{padding-bottom: 20px;}
|
||||
.pt_20{padding-top: 20px;}
|
||||
.pl_20{padding-left: 20px;}
|
||||
.pr_20{padding-right: 20px;}
|
||||
.pb_20 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.pt_20 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.pl_20 {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.pr_20 {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.pb_10{padding-bottom: 10px;}
|
||||
.pt_10{padding-top: 10px;}
|
||||
.pl_10{padding-left: 10px;}
|
||||
.pr_10{padding-right: 10px;}
|
||||
.pb_10 {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.pt_10 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.pl_10 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.pr_10 {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.color999{
|
||||
.color999 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@@ -71,55 +217,123 @@ html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
|
||||
sans-serif;
|
||||
// overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
li{
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
.hover-color:hover{
|
||||
color: $theme_color!important;
|
||||
.hover-color:hover {
|
||||
color: $theme_color !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hover-pointer{
|
||||
.hover-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.center{
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.relative{
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
.ellipsis{
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.promotion-decorate{
|
||||
.promotion-decorate {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
margin: 30px auto 30px;
|
||||
&::before,&::after{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
background-size: 50px 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -3px;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
background-size: 50px 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -3px;
|
||||
}
|
||||
&::after{
|
||||
background-position: -24px 0;
|
||||
right: -3px;
|
||||
left: auto;
|
||||
&::after {
|
||||
background-position: -24px 0;
|
||||
right: -3px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// goodsList
|
||||
|
||||
.text-danger {
|
||||
color: $theme_color;
|
||||
}
|
||||
.seckill-price{
|
||||
margin-right: 5px;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.goods-show-info {
|
||||
width: 235px;
|
||||
padding: 6px;
|
||||
margin: 10px 0px;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
}
|
||||
.goods-show-info:hover {
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0px 0px 15px #ccc;
|
||||
}
|
||||
.goods-show-price {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.goods-show-detail {
|
||||
font-size: 12px;
|
||||
margin: 6px 0px;
|
||||
}
|
||||
.goods-show-num {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
color: #666;
|
||||
}
|
||||
.goods-show-num {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
color: #009688;
|
||||
}
|
||||
.goods-show-num span {
|
||||
color: #005aa0;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goods-show-seller {
|
||||
font-size: 12px;
|
||||
color: $theme_color;
|
||||
}
|
||||
.goods-page {
|
||||
margin:10px auto ;
|
||||
text-align: right;
|
||||
width: 1200px;
|
||||
}
|
||||
@@ -6,79 +6,4 @@
|
||||
@table-thead-bg : #f8f8f9;
|
||||
@table-td-stripe-bg : #f8f8f9;
|
||||
@table-td-hover-bg : #ededed;
|
||||
@table-td-highlight-bg : #ededed;
|
||||
|
||||
|
||||
|
||||
//
|
||||
//.colorPaletteMixin() {
|
||||
// @functions: ~`(function() {
|
||||
// var hueStep = 2;
|
||||
// var saturationStep = 0.16;
|
||||
// var saturationStep2 = 0.05;
|
||||
// var brightnessStep1 = 0.05;
|
||||
// var brightnessStep2 = 0.15;
|
||||
// var lightColorCount = 5;
|
||||
// var darkColorCount = 4;
|
||||
//
|
||||
// var getHue = function(hsv, i, isLight) {
|
||||
// var hue;
|
||||
// if (hsv.h >= 60 && hsv.h <= 240) {
|
||||
// hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
|
||||
// } else {
|
||||
// hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
|
||||
// }
|
||||
// if (hue < 0) {
|
||||
// hue += 360;
|
||||
// } else if (hue >= 360) {
|
||||
// hue -= 360;
|
||||
// }
|
||||
// return Math.round(hue);
|
||||
// };
|
||||
// var getSaturation = function(hsv, i, isLight) {
|
||||
// var saturation;
|
||||
// if (isLight) {
|
||||
// saturation = hsv.s - saturationStep * i;
|
||||
// } else if (i === darkColorCount) {
|
||||
// saturation = hsv.s + saturationStep;
|
||||
// } else {
|
||||
// saturation = hsv.s + saturationStep2 * i;
|
||||
// }
|
||||
// if (saturation > 1) {
|
||||
// saturation = 1;
|
||||
// }
|
||||
// if (isLight && i === lightColorCount && saturation > 0.1) {
|
||||
// saturation = 0.1;
|
||||
// }
|
||||
// if (saturation < 0.06) {
|
||||
// saturation = 0.06;
|
||||
// }
|
||||
// return Number(saturation.toFixed(2));
|
||||
// };
|
||||
// var getValue = function(hsv, i, isLight) {
|
||||
// var value;
|
||||
// if (isLight) {
|
||||
// value = hsv.v + brightnessStep1 * i;
|
||||
// }else{
|
||||
// value = hsv.v - brightnessStep2 * i
|
||||
// }
|
||||
// if (value > 1) {
|
||||
// value = 1;
|
||||
// }
|
||||
// return Number(value.toFixed(2))
|
||||
// };
|
||||
//
|
||||
// this.colorPalette = function(color, index) {
|
||||
// var isLight = index <= 6;
|
||||
// var hsv = tinycolor(color).toHsv();
|
||||
// var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
|
||||
// return tinycolor({
|
||||
// h: getHue(hsv, i, isLight),
|
||||
// s: getSaturation(hsv, i, isLight),
|
||||
// v: getValue(hsv, i, isLight),
|
||||
// }).toHexString();
|
||||
// };
|
||||
//})()`;
|
||||
//}
|
||||
|
||||
//.colorPaletteMixin();
|
||||
@table-td-highlight-bg : #ededed;
|
||||
@@ -1,114 +0,0 @@
|
||||
/*
|
||||
* @Author: LMR
|
||||
* @Date: 2020-08-14 11:04:12
|
||||
* @Last Modified by: LMR
|
||||
* @Last Modified time: 2020-08-18 14:21:41
|
||||
*/
|
||||
|
||||
|
||||
// 主题颜色
|
||||
|
||||
// 明亮主题颜色
|
||||
$primary_color: #2d8cf0;
|
||||
$primary_light_color: #0f1011;
|
||||
$primary_dark_color: #2b85e4;
|
||||
$success_color: #19be6b;
|
||||
$warning_color: #ff9900;
|
||||
$error_color: #ed3f14;
|
||||
$handle-btn-color: #438cde;
|
||||
|
||||
$theme_color: #ed3f14;
|
||||
|
||||
$border_color: #dddee1;
|
||||
$title_color: #8c8c8c;
|
||||
$light_title_color: #1c2438;
|
||||
$light_content_color: #495060;
|
||||
$light_sub_color: #80848f;
|
||||
$light_background_color: #f8f8f9;
|
||||
$light_white_background_color :#fff;
|
||||
// 暗黑主题颜色
|
||||
$dark_background_color: #141414;
|
||||
$dark_sub_background_color: #1d1d1d; //稍微浅一点的
|
||||
$dark_content_color: #d5d5d5;
|
||||
|
||||
|
||||
|
||||
/***** 封装一些方法可用于 黑暗主题 ，明亮主题 *****/
|
||||
|
||||
|
||||
// 背景颜色
|
||||
@mixin background_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
background-color: $color;
|
||||
transition: 0.35s;
|
||||
[data-theme="dark"] & {
|
||||
background-color: $dark_background_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
background-color: $light_background_color;
|
||||
}
|
||||
}
|
||||
// 辅助背景颜色
|
||||
@mixin sub_background_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
background-color: $color;
|
||||
transition: 0.35s;
|
||||
[data-theme="dark"] & {
|
||||
background-color: $dark_sub_background_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
background-color: $light_background_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin white_background_color() {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
background-color: $light_white_background_color;
|
||||
transition: 0.35s;
|
||||
[data-theme="dark"] & {
|
||||
background-color: $dark_sub_background_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
background-color: $light_white_background_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 正文颜色
|
||||
@mixin content_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
color: $color;
|
||||
[data-theme="dark"] & {
|
||||
color: $dark_content_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
color: $light_content_color;
|
||||
}
|
||||
}
|
||||
|
||||
// 辅助颜色
|
||||
@mixin sub_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
color: $color;
|
||||
[data-theme="dark"] & {
|
||||
color: $dark_content_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
color: $light_sub_color;
|
||||
}
|
||||
}
|
||||
|
||||
// 标题颜色
|
||||
@mixin title_color($color) {
|
||||
/*通过该函数设置字体颜色，后期方便统一管理；*/
|
||||
color: $color;
|
||||
[data-theme="dark"] & {
|
||||
color: $dark_content_color;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
color: $light_title_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user