diff --git a/src/assets/styles/base.less b/src/assets/styles/base.less index e0abf1f..673fb1e 100644 --- a/src/assets/styles/base.less +++ b/src/assets/styles/base.less @@ -1,10 +1,15 @@ // element UI fix .el-collapse-item__header { - padding: 0px 10px; + padding: 0; + font-size: 14px; + color: #666666; user-select: none; } .el-collapse-item__wrap { - padding: 0px 10px; + padding: 0; +} +.el-collapse-item__content { + padding-bottom: 18px !important; } .el-collapse { border: 0px; diff --git a/src/components/modules/panel/widgetPanel.vue b/src/components/modules/panel/widgetPanel.vue index 653ed3c..7defbe8 100644 --- a/src/components/modules/panel/widgetPanel.vue +++ b/src/components/modules/panel/widgetPanel.vue @@ -2,7 +2,7 @@
- +
- +
@@ -142,6 +142,7 @@ defineExpose({ } .widget-wrap { width: 328px; + transition: all .3s; background-color: @color-white; flex: 1; height: 100%; diff --git a/src/components/modules/settings/EffectSelect/ContainerWrap.vue b/src/components/modules/settings/EffectSelect/ContainerWrap.vue index 2b4a349..1e10f52 100644 --- a/src/components/modules/settings/EffectSelect/ContainerWrap.vue +++ b/src/components/modules/settings/EffectSelect/ContainerWrap.vue @@ -12,18 +12,17 @@ -
无
- 图片容器 + + 图片蒙版
- 形状 - 框架 +
-
无
- +
无
+
- @@ -59,7 +54,7 @@ type TState = { effectSelect: string visiable: boolean type: string - list: {thumbUrl: string, imgUrl: string}[] + list: {thumb: string, url: string}[] } const props = defineProps() @@ -67,10 +62,9 @@ const props = defineProps() const emit = defineEmits() const state = reactive({ - // strength: 20, // 强度 effectSelect: '', // 选择的模板 visiable: false, // 弹出选择层控制 - type: '166', // 类型 + type: '1', // 类型 list: [], }) @@ -91,11 +85,11 @@ onMounted(async () => { async function getList() { const res = await api.material.getList({ - first_id: 2, - second_id: state.type, + cate: 8, + pageSize: 29 }) - state.list = res.list.map(({ thumbUrl, imgUrl }) => { - return { thumbUrl, imgUrl } + state.list = res.list.map(({ thumb, url }) => { + return { thumb, url } }) } diff --git a/src/components/modules/widgets/pageStyle.vue b/src/components/modules/widgets/pageStyle.vue index 2996567..025c301 100644 --- a/src/components/modules/widgets/pageStyle.vue +++ b/src/components/modules/widgets/pageStyle.vue @@ -18,17 +18,35 @@ - - -
- - 删除 + +
+
+ +
+
+ + 上传图片 + + 背景库 +
+
+
+ +
+ + +
+ +
+
+ +
- - {{ state.innerElement.backgroundImage ? '更换背景' : '上传背景' }}图 + + 上传背景图 - {{ state.downP ? state.downP + ' %' : '下载背景图' }} - + + 将背景分离为图层
@@ -48,6 +66,9 @@ import _dl from '@/common/methods/download' import Tabs from '@palxp/color-picker/comps/Tabs.vue' import TabPanel from '@palxp/color-picker/comps/TabPanel.vue' import { useSetupMapGetters } from '@/common/hooks/mapGetters' +import { Delete as iconDelete, Download as iconDownload } from '@element-plus/icons-vue' +import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting' +// import setImageData from '@/common/methods/DesignFeatures/setImage' type TState = { activeNames: string[] @@ -97,6 +118,8 @@ onMounted(() => { // ...mapActions(['updatePageData']), function colorChange(e: colorChangeData) { if (e.mode === '渐变') { + console.log('渐变背景'); + // setTimeout(() => { // console.log(1, e) // this.finish('backgroundImage', e.color) @@ -171,26 +194,22 @@ async function downloadBG() { state.downP = p < 99 ? p / 100 : 0 }) } - - + diff --git a/src/components/modules/widgets/wImage/wImage.vue b/src/components/modules/widgets/wImage/wImage.vue index a0a2cea..4e3fde4 100644 --- a/src/components/modules/widgets/wImage/wImage.vue +++ b/src/components/modules/widgets/wImage/wImage.vue @@ -21,7 +21,7 @@ > -
+
diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue index bca29eb..2199e66 100644 --- a/src/components/modules/widgets/wImage/wImageStyle.vue +++ b/src/components/modules/widgets/wImage/wImageStyle.vue @@ -28,8 +28,7 @@ --> 美化
- +
@@ -78,7 +77,7 @@ import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSele import numberSlider from '../../settings/numberSlider.vue' // import textInput from '../../settings/textInput.vue' // import CropImage from '@/components/business/cropper/CropImage.vue' -// import ContainerWrap from '../../settings/EffectSelect/ContainerWrap.vue' +import ContainerWrap from '../../settings/EffectSelect/ContainerWrap.vue' // import uploader from '@/components/common/Uploader/index.vue' import { getImage } from '@/common/methods/getImgDetail' import api from '@/api' @@ -282,17 +281,18 @@ function openCropper() { // } -// async function changeContainer(setting) { -// const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid) -// const img = await getImage(setting.svgUrl) -// setting.width = this.innerElement.width -// setting.height = img.height * (this.innerElement.width / img.width) -// setting.left = this.innerElement.left -// setting.top = this.innerElement.top -// setting.imgUrl = this.innerElement.imgUrl -// this.dWidgets.splice(index, 1) -// this.addWidget(setting) -// } +async function changeContainer(setting: any) { + state.innerElement.mask = setting.svgUrl + // const index = this.dWidgets.findIndex((x) => x.uuid == this.innerElement.uuid) + // const img = await getImage(setting.svgUrl) + // setting.width = this.innerElement.width + // setting.height = img.height * (this.innerElement.width / img.width) + // setting.left = this.innerElement.left + // setting.top = this.innerElement.top + // setting.imgUrl = this.innerElement.imgUrl + // this.dWidgets.splice(index, 1) + // this.addWidget(setting) +} // async function uploadImgDone(img) { // this.$store.commit('setShowMoveable', false) diff --git a/src/mixins/methods/dealWithCtrl.ts b/src/mixins/methods/dealWithCtrl.ts index c6f5793..f64811e 100644 --- a/src/mixins/methods/dealWithCtrl.ts +++ b/src/mixins/methods/dealWithCtrl.ts @@ -77,8 +77,6 @@ function paste() { * 撤销 */ function undo(shiftKey: any) { - console.log(store.getters.dHistoryParams); - if (shiftKey) { if (!(store.getters.dHistoryParams.index === store.getters.dHistoryParams.length - 1)) { // this.handleHistory('redo')