sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

颜色修改为默认颜色

v1.0.0
于肖磊 2024-08-29 13:47:53 +08:00
parent bcd4296ce5
commit ced30074f3
25 changed files with 65 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/base/color-picker/index.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="flex-row align-c gap-12">
<el-color-picker v-model="color" show-alpha :predefine="predefine_colors" @change="color_picker_change" />
<el-color-picker v-model="color" :predefine="predefine_colors" @change="color_picker_change" />
<icon name="reset" color="primary" size="16" :class="['c-pointer', { disable: color == defaultColor }]" @click="reset_event"></icon>
</div>
</template>
<script setup lang="ts">
import { isEmpty } from 'lodash';
import { predefine_colors } from '@/utils';
const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
interface Props {
defaultColor?: string;
}

11
src/components/common/common-styles/index.vue
View File

@ -78,10 +78,14 @@ const props = defineProps({
}
});
// 初始化表单数据
interface color_form {
color: string;
color_percentage: number | undefined;
}
const init_form = reactive({
direction: '180deg',
background_img_url: [] as uploadList[],
color_list: [{ color: '', color_percentage: '' }],
color_list: [{ color: '', color_percentage: undefined }] as color_form[],
background_img_style: 2,
padding: 0,
padding_top: 0,
@ -107,10 +111,7 @@ const init_form = reactive({
// value 和初始化数据合并数据
let form = reactive(Object.assign({}, init_form, props.value));
const emit = defineEmits(['update:value']);
interface color_form {
color: string;
color_percentage: string;
}
const mult_color_picker_event = (arry: color_form[], type: number) => {
form.color_list = arry;
form.direction = type.toString();

8
src/components/common/flex-gradients-create/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-for="(item, index) in list" :key="index" class="flex-row align-s gap-12">
<div class="flex-col">
<el-color-picker v-model="item.color" show-alpha :predefine="predefine_colors" />
<el-color-picker v-model="item.color" :predefine="predefine_colors" />
<div v-if="index == 0" class="connect-line"></div>
</div>
<icon name="reset" color="primary" size="16" class="c-pointer" @click="reset_event(index)"></icon>
@ -9,10 +9,10 @@
</template>
<script setup lang="ts">
const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
import { predefine_colors } from '@/utils';
interface list_page {
color: string;
color_percentage: string;
color_percentage: number | undefined;
}
interface Props {
colorList: list_page[];
@ -26,7 +26,7 @@ const list = ref(props.colorList);
// 默认值
const reset_event = (index: number) => {
list.value[index].color = props.defaultColor;
list.value[index].color_percentage = '';
list.value[index].color_percentage = undefined;
};
</script>

12
src/components/common/mult-color-picker/index.vue
View File

@ -9,10 +9,10 @@
<div class="flex-col">
<div v-for="(item, index) in color_list" :key="index" class="flex-row align-s gap-12">
<div class="flex-col">
<div class="flex-row align-s gap-12">
<el-color-picker v-model="item.color" show-alpha :predefine="predefine_colors" @change="change_color(index, $event)" />
<div class="flex-row align-c gap-12">
<el-color-picker v-model="item.color" :predefine="predefine_colors" @change="change_color(index, $event)" />
<div class="re mo-input-number">
<el-input-number v-model="item.color_percentage" :max="999" label="请输入百分比" type="number" controls-position="right" class="number-show" @change="change_color_percentage(index, $event)"></el-input-number>
<el-input-number v-model="item.color_percentage" :max="999" placeholder="百分比" controls-position="right" class="number-show" @change="change_color_percentage(index, $event)"></el-input-number>
<div class="define-append">%</div>
</div>
</div>
@ -33,6 +33,7 @@
</template>
<script lang="ts" setup>
import { predefine_colors } from '@/utils';
const props = defineProps({
type: {
type: String,
@ -46,7 +47,6 @@ const props = defineProps({
},
},
});
const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
const direction_type = ref(props.type);
let state = reactive({
color_list: props.value.map((item: any) => {
@ -63,7 +63,7 @@ const direction_type_change = (type: any) => {
update_value();
};
const reset_event = () => {
color_list.value = [{ color: '', color_percentage: '' }];
color_list.value = [{ color: '', color_percentage: undefined }];
update_value();
};
const del_event = (index: number) => {
@ -71,7 +71,7 @@ const del_event = (index: number) => {
update_value();
};
const add_event = () => {
color_list.value.push({ color: '', color_percentage: '' });
color_list.value.push({ color: '', color_percentage: undefined });
update_value();
};
const change_color = (index: number, color: string | null) => {

30
src/components/model-coupon/model-coupon-setting.vue
View File

@ -29,9 +29,9 @@ const default_config = {
desc_color: '#FF3830',
// 主题1时不显示
limit_send_count: '#999',
btn_background: [{ color: '#FF3830', color_percentage: '' }],
btn_background: [{ color: '#FF3830', color_percentage: undefined }],
btn_color: '#FF3830',
background: [{ color: '#FFF1E1', color_percentage: '' }],
background: [{ color: '#FFF1E1', color_percentage: undefined }],
spacing: 20,
},
theme_2: {
@ -40,10 +40,10 @@ const default_config = {
desc_color: '#999',
// 主题2时不显示
limit_send_count: '#999',
btn_background: [{ color: '#FFF1E1', color_percentage: '' }],
btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
btn_color: '#fff',
// 当为主题2时，不显示
background: [{ color: '#fff', color_percentage: '' }],
background: [{ color: '#fff', color_percentage: undefined }],
spacing: 15,
common_style: {
background_img_url: [{ url: 'http://shopxo.com/static/upload/images/common/2024/08/28/1724815957918121.png' }],
@ -54,9 +54,9 @@ const default_config = {
name_color: '#FF3830',
desc_color: '#FF3830',
limit_send_count: '#999',
btn_background: [{ color: '#FF3830', color_percentage: '' }],
btn_background: [{ color: '#FF3830', color_percentage: undefined }],
btn_color: '#FF3830',
background: [{ color: '#FFF1E1', color_percentage: '' }],
background: [{ color: '#FFF1E1', color_percentage: undefined }],
// 当为主题34时，间距不给予修改，优惠券沾满整行
spacing: 0,
},
@ -66,9 +66,9 @@ const default_config = {
desc_color: '#333',
// 主题4时不显示
limit_send_count: '#999',
btn_background: [{ color: '#fff', color_percentage: '' }],
btn_background: [{ color: '#fff', color_percentage: undefined }],
btn_color: '#FF3830',
background: [{ color: '#FFF1E1', color_percentage: '' }],
background: [{ color: '#FFF1E1', color_percentage: undefined }],
// 当为主题34时，间距不给予修改，优惠券沾满整行
spacing: 0,
},
@ -80,9 +80,9 @@ const default_config = {
// 主题5时不显示
limit_send_count: '#999',
// 主题5时不显示
btn_background: [{ color: '#fff', color_percentage: '' }],
btn_background: [{ color: '#fff', color_percentage: undefined }],
btn_color: '#fff',
background: [{ color: '#FFF1E1', color_percentage: '' }],
background: [{ color: '#FFF1E1', color_percentage: undefined }],
spacing: 10,
},
theme_6: {
@ -93,9 +93,9 @@ const default_config = {
// 主题6时不显示
limit_send_count: '#999',
// 主题6时不显示
btn_background: [{ color: '#fff', color_percentage: '' }],
btn_background: [{ color: '#fff', color_percentage: undefined }],
btn_color: '#fff',
background: [{ color: '#FF3830', color_percentage: '' }],
background: [{ color: '#FF3830', color_percentage: undefined }],
spacing: 10,
},
theme_7: {
@ -106,11 +106,11 @@ const default_config = {
// 主题7时不显示
limit_send_count: '#999',
// 主题7时不显示
btn_background: [{ color: '#E1B47A', color_percentage: '' }],
btn_background: [{ color: '#E1B47A', color_percentage: undefined }],
btn_color: '#fff',
background: [
{ color: '#FF3830', color_percentage: '' },
{ color: '#E1B47A', color_percentage: '' },
{ color: '#FF3830', color_percentage: undefined },
{ color: '#E1B47A', color_percentage: undefined },
],
spacing: 10,
},

2
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -55,7 +55,7 @@ const props = defineProps({
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
// 每个小模块独立的样式
const data_style = {
color_list: [{ color: '#FFD9C3', color_percentage: '0' }, { color: '#FFECE2', color_percentage: '12' }, { color: '#FFFFFF', color_percentage: '30' }],
color_list: [{ color: '#FFD9C3', color_percentage: 0 }, { color: '#FFECE2', color_percentage: 12 }, { color: '#FFFFFF', color_percentage: 30 }],
direction: '180deg',
background_img_style: 2,
background_img_url: [],

2
src/components/model-shop-list/model-shop-list-content.vue
View File

@ -35,7 +35,7 @@
</el-select>
</el-form-item>
<el-form-item label="显示数量">
<el-input-number v-model="form.number" :min="1" :max="100" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
<el-input-number v-model="form.number" :min="1" :max="50" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="排序类型">
<el-radio-group v-model="form.sort">

2
src/components/model-shop-tabs/model-shop-tabs-content.vue
View File

@ -56,7 +56,7 @@
</el-select>
</el-form-item>
<el-form-item label="显示数量">
<el-input-number v-model="row.number" :min="1" :max="100" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
<el-input-number v-model="row.number" :min="1" :max="50" type="number" placeholder="请输入显示数量" value-on-clear="min" class="w number-show" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="排序类型">
<el-radio-group v-model="row.sort">

4
src/components/model-user-info/index.vue
View File

@ -66,8 +66,8 @@ const base_data = reactive({
user_name_size: 16,
// 用户ID颜色
user_id_color_list: [
{ color: 'rgba(254, 184, 143, 1)', color_percentage: '' },
{ color: 'rgba(255, 227, 220, 1)', color_percentage: '' },
{ color: 'rgba(254, 184, 143, 1)', color_percentage: undefined },
{ color: 'rgba(255, 227, 220, 1)', color_percentage: undefined },
],
// 用户ID颜色
user_id_color: 'rgba(0, 0, 0, 1)',

2
src/components/model-user-info/model-user-info-styles.vue
View File

@ -102,7 +102,7 @@ const props = defineProps({
user_name_color: 'rgba(0, 0, 0, 1)',
user_name_weight: '500',
user_name_size: 16,
user_id_color_list: [{ color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, { color: 'rgba(255, 227, 220, 1)', color_percentage: '' }],
user_id_color_list: [{ color: 'rgba(254, 184, 143, 1)', color_percentage: undefined}, { color: 'rgba(255, 227, 220, 1)', color_percentage: undefined }],
user_id_color: 'rgba(0, 0, 0, 1)',
user_id_direction: '90deg',
user_id_weight: '400',

2
src/layout/components/main/default/article-tabs.ts
View File

@ -69,7 +69,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
field_show: ['0', '1'],
},
style: {
tabs_checked: [{ color: '#FF2222', color_percentage: '' }, { color: '#FF9898', color_percentage: '' }],
tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
tabs_direction: '90deg',
tabs_weight_checked: '500',
tabs_size_checked: 14,

4
src/layout/components/main/default/coupon.ts
View File

@ -38,10 +38,10 @@ const defaultCoupoin: DefaultCoupon = {
name_color: '#FF3830',
desc_color: '#FF3830',
limit_send_count: '#999',
btn_background: [{ color: '#FFF1E1', color_percentage: '' }],
btn_background: [{ color: '#FFF1E1', color_percentage: undefined }],
btn_direction: '90deg',
btn_color: '#FF3830',
background: [{ color: '#FFF1E1', color_percentage: '' }],
background: [{ color: '#FFF1E1', color_percentage: undefined }],
direction: '90deg',
spacing: 10,
common_style: defaultCommon,

2
src/layout/components/main/default/custom.ts
View File

@ -23,7 +23,7 @@ const defaultSearch: defaultSearch = {
style: {
common_style: {
...defaultCommon,
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: '' }],
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
}
},
};

2
src/layout/components/main/default/footer-nav.ts
View File

@ -28,7 +28,7 @@ const defaultFooterNav: DefaultFooterNav = {
style: {
text_color_checked: 'rgba(255, 0, 0, 1)',
default_text_color: 'rgba(0, 0, 0, 1)',
common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: '' }] },
common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: undefined }] },
},
};

2
src/layout/components/main/default/header-nav.ts
View File

@ -29,7 +29,7 @@ const defaultFooterNav: DefaultFooterNav = {
},
style: {
background_type: 'color_image',
background_color_list: [{ color: '#fff', color_percentage: '' }],
background_color_list: [{ color: '#fff', color_percentage: undefined }],
background_direction: '180deg',
background_img_style: 2,
background_img_url: [],

2
src/layout/components/main/default/index.ts
View File

@ -1,6 +1,6 @@
const defaultCommon: componentsCommonCommonStyle = {
direction: '90deg',
color_list: [{ color: '', color_percentage: '' }],
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: 2,
padding: 0,
padding_top: 0,

4
src/layout/components/main/default/notice.ts
View File

@ -63,11 +63,11 @@ const defaultSearch: defaultSearch = {
topic_color_list: [
{
color: '',
color_percentage: '',
color_percentage: undefined,
},
{
color: '',
color_percentage: '',
color_percentage: undefined,
},
],
topic_color: '#000',

2
src/layout/components/main/default/search.ts
View File

@ -61,7 +61,7 @@ const defaultSearch: defaultSearch = {
style: {
icon_color: '#ccc',
button_inner_color: '#fff',
color_list: [{ color: '#FF973D', color_percentage: '' }, { color: '#FF3131', color_percentage: '' }],
color_list: [{ color: '#FF973D', color_percentage: undefined }, { color: '#FF3131', color_percentage: undefined }],
direction: '90deg',
background_img_style: '',
background_img_url: [],

4
src/layout/components/main/default/shop-list.ts
View File

@ -111,11 +111,11 @@ const defaultProductList: DefaultProductList = {
shop_button_color: [
{
color: '#FF3D53',
color_percentage: ''
color_percentage: undefined
},
{
color: '#D73A3A',
color_percentage: ''
color_percentage: undefined
}
],
shop_button_text_color: '#fff',

6
src/layout/components/main/default/shop-tabs.ts
View File

@ -85,7 +85,7 @@ const defaultProductList: DefaultProductList = {
shop_button_size: '1',
},
style: {
tabs_checked: [{ color: '#FF2222', color_percentage: '' }, { color: '#FF9898', color_percentage: '' }],
tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
tabs_direction: '90deg',
tabs_weight_checked: '500',
tabs_size_checked: 14,
@ -135,11 +135,11 @@ const defaultProductList: DefaultProductList = {
shop_button_color: [
{
color: '#FF3D53',
color_percentage: ''
color_percentage: undefined
},
{
color: '#D73A3A',
color_percentage: ''
color_percentage: undefined
}
],
shop_button_text_color: '#fff',

2
src/layout/components/main/default/tabs.ts
View File

@ -39,7 +39,7 @@ const defaultTabs: defaultTabs = {
],
},
style: {
tabs_checked: [{ color: '#FF2222', color_percentage: '' }, { color: '#FF9898', color_percentage: '' }],
tabs_checked: [{ color: '#FF2222', color_percentage: undefined }, { color: '#FF9898', color_percentage: undefined }],
tabs_direction: '90deg',
tabs_weight_checked: '500',
tabs_size_checked: 14,

6
src/layout/components/main/default/user-info.ts
View File

@ -39,8 +39,8 @@ const defaultUserInfo: DefaultUserInfo = {
user_name_weight: '500',
user_name_size: 16,
user_id_color_list: [
{ color: 'rgba(254, 184, 143, 1)', color_percentage: '' },
{ color: 'rgba(255, 227, 220, 1)', color_percentage: '' },
{ color: 'rgba(254, 184, 143, 1)', color_percentage: undefined },
{ color: 'rgba(255, 227, 220, 1)', color_percentage: undefined },
],
user_id_color: 'rgba(0, 0, 0, 1)',
user_id_direction: '90deg',
@ -56,7 +56,7 @@ const defaultUserInfo: DefaultUserInfo = {
stats_number_size: 16,
common_style: {
...defaultCommon,
color_list: [{ color: '#fff', color_percentage: '' }],
color_list: [{ color: '#fff', color_percentage: undefined }],
},
},
};

5
src/styles/index.scss
View File

@ -182,3 +182,8 @@ div:focus {
}
}
// 链接弹窗表格用到 ------ end
.el-color-predefine__colors .el-color-predefine__color-selector{
box-shadow: 0 0.2rem 0.8rem rgba(50, 55, 58, 0.1);
}

2
src/types/global.d.ts vendored
View File

@ -15,7 +15,7 @@ declare global {
}
interface color_list {
color: string;
color_percentage: string;
color_percentage: number | undefined;
}
/**
* 渐变色参数集合

1
src/utils/index.ts
View File

@ -1,4 +1,5 @@
import { isEmpty } from 'lodash';
export const predefine_colors = [ '#fff', '#ddd', '#ccc', '#999', '#666', '#333', '#000', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', '#1F93FF', '#c7158577'];
/**
* 判断一个对象是否为空。
*