diff --git a/src/components/GroupFormBtns.vue b/src/components/GroupFormBtns.vue index c50accb..92583eb 100644 --- a/src/components/GroupFormBtns.vue +++ b/src/components/GroupFormBtns.vue @@ -1,9 +1,7 @@ - - + \ No newline at end of file diff --git a/src/components/GuipRadio.vue b/src/components/GuipRadio.vue index fcedc89..009ae9f 100644 --- a/src/components/GuipRadio.vue +++ b/src/components/GuipRadio.vue @@ -1,12 +1,42 @@ @@ -33,7 +63,6 @@ export default { // 3.null // 4.‘’ options: { - // type: [Array, Object], default: () => null, validator: (value) => { // 自定义验证器，允许 null、数组或非空对象 @@ -82,13 +111,23 @@ export default { disabledKeys: { type: Array, default: () => [] + }, + // 新增：控制特殊样式 + clientFormFlex: { + type: Boolean, + default: false + }, + // 新增：特殊样式时的自定义标签文本（可选） + clientFormLabel: { + type: String, + default: '' } }, computed: { // 统一处理数组和对象格式 normalizedOptions() { - // 处理null或undefined、‘’情况 - if (this.options == null || !this.options) { + // 处理null或undefined、‘’情况 + if (this.options == null || !this.options) { return []; } @@ -129,12 +168,10 @@ export default { }, getLabel(option) { if (this.formatter) return this.formatter(option); - // 处理对象格式的选项 if (typeof option === 'object' && 'key' in option && 'value' in option) { return option.value; } - // 当前选项是否选中 const isSelected = this.getValue(option) === this.selectedValue; @@ -142,7 +179,6 @@ export default { if (isSelected && option[this.selectedLabelKey]) { return option[this.selectedLabelKey]; } - // 明确检查 labelKey 是否存在 if (typeof option === 'object' && this.labelKey in option) { return option[this.labelKey]; @@ -154,7 +190,6 @@ export default { if (typeof option === 'object' && 'key' in option && 'value' in option) { return option.key; } - // 明确检查 valueKey 是否存在 if (typeof option === 'object' && this.valueKey in option) { return option[this.valueKey]; @@ -169,39 +204,18 @@ export default { }; - \ No newline at end of file diff --git a/src/components/GuipSelect.vue b/src/components/GuipSelect.vue index 2cf7da9..a1d930f 100644 --- a/src/components/GuipSelect.vue +++ b/src/components/GuipSelect.vue @@ -1,14 +1,49 @@ @@ -18,7 +53,7 @@ export default { props: { value: [String, Number, Array], options: { - type: [Array,Object], + type: [Array, Object], default: () => [] }, // 新增配置字段 @@ -30,7 +65,7 @@ export default { type: String, default: 'label' }, - // 新增动态添加项的配置 + // 新增动态添加项的配置 extraItem: { type: Object, default: null @@ -48,7 +83,17 @@ export default { rules: [Object, Array], column: Boolean, addClass: String, - desc: String + desc: String, + // 新增：控制特殊样式 + clientFormFlex: { + type: Boolean, + default: false + }, + // 新增：特殊样式时的自定义标签文本（可选） + clientFormLabel: { + type: String, + default: '' + } }, data() { return { @@ -60,13 +105,12 @@ export default { computed: { processedOptions() { // 处理options为空的情况 - // let options = [1,5,3] || []; - let newOptions = null let options = this.options || []; - // 如果是 [1,12,22] 格式 + + // 如果是 [1,12,22] 格式的简单数组 if (Array.isArray(options) && options.length > 0 && options.every(item => typeof item !== 'object')) { - newOptions = options.map((item, index) => ({ - [this.valueKey]: index, + options = options.map(item => ({ + [this.valueKey]: item, [this.labelKey]: item })); } @@ -78,18 +122,25 @@ export default { [this.labelKey]: options[key] })); } + + // 确保 options 是数组 + if (!Array.isArray(options)) { + options = []; + } + // 当extraItem存在且不是空对象时，添加到options数组开头 if (this.extraItem && Object.keys(this.extraItem).length > 0) { - newOptions = [ + options = [ { [this.labelKey]: this.extraItem.label || '', [this.valueKey]: this.extraItem.value || '', disabled: this.extraItem.disabled || false }, - ...newOptions + ...options ]; } - return newOptions; + + return options; } }, watch: { @@ -110,21 +161,15 @@ export default { if (this.value !== undefined && this.value !== null) { this.selectedValue = this.value } + // 默认提示语 if (this.placeholder) { this.placeholder1 = this.placeholder } - this.$nextTick(() => { - let els = document.querySelectorAll('.el-input'); - els.forEach(item => { - item.onmouseover = function () { - item.classList.add("hoverclass") - } - item.onmouseout = function () { - item.classList.remove("hoverclass") - } - }) + // 鼠标悬停效果 + this.$nextTick(() => { + this.addHoverEffect(); }) }, methods: { @@ -132,13 +177,29 @@ export default { getItemValue(item) { return item[this.valueKey] }, + // 获取label值 getItemLabel(item) { return item[this.labelKey] }, + + // 处理选择变化 handleChange(value) { this.$emit('input', value) this.$emit('change', value) + }, + + // 添加悬停效果 + addHoverEffect() { + const els = document.querySelectorAll('.el-input'); + els.forEach(item => { + item.onmouseover = function () { + item.classList.add("hoverclass") + } + item.onmouseout = function () { + item.classList.remove("hoverclass") + } + }) } } } @@ -164,5 +225,4 @@ export default { // .el-select { // width: 100%; // } -// } - \ No newline at end of file +// } \ No newline at end of file diff --git a/src/main.js b/src/main.js index d4ed596..4475a28 100755 --- a/src/main.js +++ b/src/main.js @@ -19,6 +19,8 @@ import clipboard from '@/utils/dirClipBoard'; import { modernCopyToClipboard } from '@/utils/clipboard'; //登陆 import { autoLoginByToken } from '@/utils/login' +import {stateFormat,formatNumber} from "@/utils/common"; + import PositionMessage from './utils/tooltip' function filterByPermission(data, targetPermission) { @@ -46,22 +48,6 @@ function filterByPermission(data, targetPermission) { return newItem; }); } -//金额千分符 会在整数后添加两个0 --适用于直接显示的 -function stateFormat(row, column, cellValue) { - if (cellValue) { - return Number(cellValue) - .toFixed(2) - .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { - return $1 + ","; - }) - .replace(/\.$/, ""); - } -} -//金额千分符 自定义渲染表格内容情况下，调用此方法 -function formatNumber(value) { - if (value === null || value === undefined) return ''; - return Number(value).toLocaleString(); -} Vue.prototype.$routerBaseApi = 'http://admin.pengda.checkcopy.com'; // 复制 Vue.prototype.$copy = modernCopyToClipboard; diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss index e7805c9..05bee70 100644 --- a/src/style/theme/common.scss +++ b/src/style/theme/common.scss @@ -317,7 +317,7 @@ body { .borderNone { border: none !important; } - +// 非论易排项目的样式 .flex-common { padding: 32px 36px; background-color: #fff; @@ -470,8 +470,21 @@ body { } } +.el-button--often { + color: #006AFF; + background: #F2F7FF; + border: 1px solid transparent; + + // &:hover { + // color: #006AFF; + // background: #F2F7FF; + // border: 1px solid #006AFF; + // } +} + .el-button--text, -.el-button--grey { +.el-button--grey, +.el-button--warn { padding: 0; color: #006AFF; width: auto !important; @@ -493,6 +506,15 @@ body { } } +.el-button--warn { + color: #FF4D4F; + + &:hover { + color: #006AFF; + opacity: 1; + } +} + .el-button--ignore { color: #626573; background: #FFFFFF; @@ -517,7 +539,6 @@ body { // border: 1px solid #006AFF; // color: #006AFF; // } - // .el-button--primary, // .el-button--success, // .el-button--info, @@ -525,45 +546,37 @@ body { // .el-button--danger { // color: #fff !important; // } - // .el-button--medium { // //中等按钮 // width: 97px; // height: 33px; // font-size: 14px; // line-height: 14px; - // span { // height: 14px; // } - // } - // .el-button--small { // //小的按钮 // width: 80px; // height: 32px; // font-size: 12px; // } - // .el-button--mini { // //迷你按钮 // width: 80px; // height: 28px; // font-size: 12px; // } - // .el-button--reverseMild { // background: #E8F0FE; // color: #006AFF; // border: none; // } - // .el-button--reverseMild:hover { // border-color: #F2F7FF !important; // background-color: #F2F7FF !important; // } - // .el-button--reverseMild.is-disabled, // .el-button--reverseMild.is-disabled:hover { // color: #006AFF; @@ -571,14 +584,12 @@ body { // background-color: #E8F0FE; // opacity: .7; // } - // .el-button--mild.is-disabled, // .el-button--mild.is-disabled:hover { // color: #006AFF; // opacity: .7; // border-color: #006AFF; // } - /* button==== end */ // radio ---start @@ -598,7 +609,6 @@ body { } // radio ---end - // input ---start .el-input { border-radius: 2px; @@ -677,7 +687,6 @@ body { // input ---end - // select start .el-select { width: 100%; @@ -709,7 +718,6 @@ body { } // select end - // textarea start .el-textarea__inner { padding: 10px 12px; @@ -729,7 +737,6 @@ body { // textarea end - .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before { content: ''; @@ -797,6 +804,8 @@ body { flex: 1; line-height: normal; position: relative; + display: flex; + justify-content: flex-start; .desc_right { position: absolute; @@ -911,6 +920,9 @@ body { td { font-size: 13px !important; } + .status-item{ + font-size: 13px !important; + } } // body{ @@ -943,6 +955,9 @@ body { td { font-size: 12px !important; } + .status-item{ + font-size: 12px !important; + } } .tableHeaderSelect .el-input__inner { @@ -968,6 +983,9 @@ body { td { font-size: 14px !important; } + .status-item{ + font-size: 14px !important; + } } .cell-content { @@ -1068,7 +1086,6 @@ body { } // table end - .el-pagination { margin-top: 16px; display: flex; @@ -1134,7 +1151,6 @@ body { } // dialog--end - // switch --start // .el-switch__core{ // background-color: #00C261; @@ -1143,7 +1159,6 @@ body { // background-color: #BABDC2; // } // switch --end - // 弹出气泡框 .el-popover { padding: 32px; @@ -1218,4 +1233,281 @@ body { color: #1E2226; margin-bottom: 4px; } -} \ No newline at end of file +} + + +.before_h_title{ + font-size: 14px; + font-weight: bold; + line-height: normal; + letter-spacing: normal; + color: #333333; + display: flex; + align-items: center; + text-align: left; + &::before{ + content: ''; + background: #3F62F6; + display: inline-block; + margin-right: 9px; + width: 6px; + height: 16px; + border-radius: 12px; + + } + .desc{ + font-size: 12px; + font-weight: normal; + color: #626573; + margin-left: 8px; + } +} + + +// 上传按钮样式 +.qqCode-wrap { + display: grid; + justify-items: start; +} + +.avatar-desc { + margin-top: 8px; + font-family: Inter; + font-size: 12px; + font-weight: normal; + line-height: 20px; + letter-spacing: normal; + font-variation-settings: "wght" 400; + color: var(--el-color-text-regular); +} +.avatar-uploader{ + .upload-button { + border-radius: 4px; + background: #F2F3F5; + box-sizing: border-box; + border: 1px solid #BABDC2; + } + .bgImg{ + width: 20px; + height: 16px; + margin-right: 6px; + background-image: url(@/assets/site/uploadIcon.svg); + } + &:hover{ + .bgImg{ + background-image: url(@/assets/site/uploadIcon_light.svg); + } + } +} + + +// 页面底部操作按钮样式 单个的 +.save-button{ + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background: #fff; + box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12); + display: flex; + align-items: center; + justify-content: center; + padding: 16px 0; + z-index: 9; + } + +// 论易排版样式 会覆盖原有样式 +.client_flex-common{ + padding: 24px 32px; +} + +.client-form-flex { + // 隐藏原有的el-form-item标签 + ::v-deep .el-form-item__label { + display: none; + } + + ::v-deep .el-form-item__content { + margin-left: 0 !important; + display: flex; + align-items: center; + } + + .client-form-flex-wrapper { + display: flex; + align-items: center; + width: 100%; + + .flex-input { + flex: 1; + position: relative; + display: flex; + justify-content: flex-start; + + ::v-deep .el-select { + width: 100%; + } + ::v-deep .el-input { + width: 100%; + } + + ::v-deep .el-radio-group { + margin: 0; /* 移除原有margin */ + display: flex; + flex-wrap: wrap; + gap: 20px 24px; + width: 100%; + } + } + } + } +// 行 距： 这种表现样式 目前应用的有input select radio + .flex-label { + display: flex; + align-items: center; + margin-right: 12px; + height: 32px; + flex-shrink: 0; + + .label-text { + display: block; + color: #333; + width: 56px; + text-align: justify; + text-align-last: justify; + line-height: 1; + } + + .colon { + margin-left: 4px; + line-height: 1; + } + } + +// 不同状态颜色 / 小标签 -- 待测试其余使用的页面是否生效 +.status-item { + height: 22px; + display: flex; + justify-content: center; + align-items: center; + padding: 2px 10px; + border-radius: 4px; + font-size: 14px; + font-weight: normal; + line-height: 22px; + text-align: center; + letter-spacing: 0.08em; + box-sizing: border-box; +} + +.divgreen { + background: rgba(239, 255, 224, 0.5); + border: 1px solid rgba(0, 194, 97, 0.6); +} + +.fontgreen { + color: #0DAF49; +} + +.divblue { + background: #F2F7FF; + border: 1px solid #BFDAFF; +} + +.fontblue { + color: #006AFF; +} + +.divred { + background: #FFF1F0; + border: 1px solid #FFA39E; +} + +.fontred { + color: #FF4D4F; +} + +.divgray { + background: #F6F7FA; + border: 1px solid #DFE2E6; +} + +.fontgray { + color: #626573; +} + +.divorange { + background: #FFFBF2; + border: 1px solid rgba(251, 131, 45, 0.38); +} + +.fontorange { + color: #FB832D; +} + +.divpurple { + background: #F9F2FF; + border: 1px solid rgba(126, 118, 253, 0.28); +} + +.fontpurple { + color: #6258FF; +} + +// end + +// 卡片选择及默认样式 start +.wallet-item{ + display: flex; + flex-direction: column; + text-align: left; + padding: 16px 14px; + width: 282px; + height: 96px; + letter-spacing: 0.08em; + border-radius: 8px; + background: rgba(255, 255, 255, 0.47); + box-sizing: border-box; + border: 1px solid #DFE2E6; + .desc{ + font-size: 12px; + color: #626573; + letter-spacing: 0.08em; + } + + .wallet-name{ + color: #1E2226; + font-size: 14px; + font-weight: bold; + margin-bottom: 12px; + } + .wallet-num{ + font-size: 12px; + color: #626573; + padding: 0 2px; + display: flex; + align-items: baseline; + } + .wallet-price{ + font-size: 22px; + font-weight: bold; + color: #626573; + } +} + +.wallet-item-active{ + position: relative; + background: #F2F7FF; + border-color: #006AFF; + .tem-active{ + position: absolute; + right: 0; + top: 0; + width: 30px; + height: 30px; + } + .wallet-name{ + color: #006AFF; + } +} +// 卡片选择及默认样式 end \ No newline at end of file diff --git a/src/utils/common.js b/src/utils/common.js index a3a9bf8..815666c 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -2,31 +2,82 @@ export function setHighActive(dom) { const ele = document.getElementById(dom) ele.classList.add('ceshi') - ele.scrollIntoView({behavior:'smooth',block:'start'}) - setTimeout(()=>{ + ele.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }) + setTimeout(() => { ele.classList.remove('ceshi') - },1000) + }, 1000) } export function getServicePriceDesc(price, price_unit, unit_num, unit_name) { let unit = 0; let unit_str = ""; - if (unit_num == 1) return price + price_unit +'/'+unit_name; + if (unit_num == 1) return price + price_unit + '/' + unit_name; - if (unit_num/10000 < 10) { - unit = Math.ceil(unit_num/10000); - unit_str = unit == 1 ? '万' : unit+'万'; + if (unit_num / 10000 < 10) { + unit = Math.ceil(unit_num / 10000); + unit_str = unit == 1 ? '万' : unit + '万'; } - if (unit_num/1000 < 10) { - unit = Math.ceil(unit_num/1000); - unit_str = unit == 1 ? '千' : unit+'千'; + if (unit_num / 1000 < 10) { + unit = Math.ceil(unit_num / 1000); + unit_str = unit == 1 ? '千' : unit + '千'; } - if (unit_num/100 < 10) { - unit = Math.ceil(unit_num/100); - unit_str = unit == 1 ? '百' : unit+'百'; + if (unit_num / 100 < 10) { + unit = Math.ceil(unit_num / 100); + unit_str = unit == 1 ? '百' : unit + '百'; } - return price + price_unit + "/" +unit_str + unit_name; + return price + price_unit + "/" + unit_str + unit_name; } +/** + * 获取格式化的日期字符串 + * @param {string} format - 日期格式，可选值：'YYYY-MM-DD', 'YYYY-MM', 'YYYY', 'HH:mm:ss' 等 + * @returns {string} 格式化后的日期字符串 + * + // 使用示例 + // console.log(getFormattedDate('YYYY')); // 2024 + // console.log(getFormattedDate('YYYY-MM')); // 2024-01 + // console.log(getFormattedDate('YYYY-MM-DD')); // 2024-01-15 + */ +export const getFormattedDate = (format = 'YYYY-MM-DD') => { + const now = new Date(); + const year = now.getFullYear(); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const day = String(now.getDate()).padStart(2, '0'); + const hour = String(now.getHours()).padStart(2, '0'); + const minute = String(now.getMinutes()).padStart(2, '0'); + const second = String(now.getSeconds()).padStart(2, '0'); + + const formats = { + 'YYYY': year, + 'YYYY-MM': `${year}-${month}`, + 'YYYY-MM-DD': `${year}-${month}-${day}`, + 'HH:mm:ss': `${hour}:${minute}:${second}`, + 'YYYY-MM-DD HH:mm:ss': `${year}-${month}-${day} ${hour}:${minute}:${second}`, + 'YYYY/MM/DD': `${year}/${month}/${day}`, + 'YYYY年MM月DD日': `${year}年${month}月${day}日`, + }; + + return formats[format] || formats['YYYY-MM-DD']; +}; + +//金额千分符 会在整数后添加两个0 --适用于直接显示的 +export function stateFormat(row, column, cellValue) { + if (cellValue) { + return Number(cellValue) + .toFixed(2) + .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => { + return $1 + ","; + }) + .replace(/\.$/, ""); + } +} +//金额千分符 自定义渲染表格内容情况下，调用此方法 +export function formatNumber(value) { + if (value === null || value === undefined) return ''; + return Number(value).toLocaleString(); +} \ No newline at end of file diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue index 1b3688b..38eae9d 100644 --- a/src/views/elementGroups.vue +++ b/src/views/elementGroups.vue @@ -26,8 +26,6 @@

- -
@@ -43,6 +41,27 @@
+
+ +
状态标签
+
状态标签
+
状态标签
+
状态标签
+
状态标签
+
+
+ +
+ +
这是默认
+
小文案小文案小文案小文案小文案
+
+
+ +
这是选中
+
小文案小文案小文案小文案小文案
+
+
@@ -221,7 +240,7 @@ - +
- +
+ +
+
+
+
名称
+ ： +
+

说明：类名是固定的

+
+ + + +
+ +
选项一 @@ -276,23 +314,29 @@ 按钮
- + 按钮 按钮 按钮
- + 按钮 按钮 按钮
+ + 按钮 + 按钮 + 按钮 +
+
强引导 弱引导
-
+
自定义左侧 --> 跳转一下 自定义右侧 - + +
@@ -1357,6 +1403,7 @@ export default { display: flex; align-items: center; justify-content: flex-start; + flex-wrap: wrap; margin: 20px 0 30px; label {