|
|
@@ -0,0 +1,590 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ custom-class="background"
|
|
|
+ width="720px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :visible="visible"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <div class="background-title">背景设置</div>
|
|
|
+ <div class="set-background">
|
|
|
+ <div class="background-img">
|
|
|
+ <div v-if="file_url" class="img-set" :style="{ top: imgTop, left: imgLeft, position: 'relative' }">
|
|
|
+ <div class="dot top-left" @mousedown="dragStart($event, 'nwse-resize', 'top-left')"></div>
|
|
|
+ <div class="horizontal-line" @mousedown="dragStart($event, 'ns-resize', 'top')"></div>
|
|
|
+ <div class="dot top-right" @mousedown="dragStart($event, 'nesw-resize', 'top-right')"></div>
|
|
|
+ <div class="vertical-line" @mousedown="dragStart($event, 'ew-resize', 'left')"></div>
|
|
|
+ <img
|
|
|
+ ref="img"
|
|
|
+ :src="file_url"
|
|
|
+ draggable="false"
|
|
|
+ :style="{ width: imgWidth, height: imgHeight }"
|
|
|
+ @mousedown="dragStart($event, 'move', 'move')"
|
|
|
+ />
|
|
|
+ <div class="vertical-line" @mousedown="dragStart($event, 'ew-resize', 'right')"></div>
|
|
|
+ <div class="dot bottom-left" @mousedown="dragStart($event, 'nesw-resize', 'bottom-left')"></div>
|
|
|
+ <div class="horizontal-line" @mousedown="dragStart($event, 'ns-resize', 'bottom')"></div>
|
|
|
+ <div class="dot bottom-right" @mousedown="dragStart($event, 'nwse-resize', 'bottom-right')"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="setup">
|
|
|
+ <div class="setup-item">
|
|
|
+ <div class="setup-top">
|
|
|
+ <el-radio v-model="background.mode" label="image">图片</el-radio>
|
|
|
+ </div>
|
|
|
+ <div class="setup-content">
|
|
|
+ <div class="image-set">
|
|
|
+ <el-upload
|
|
|
+ ref="upload"
|
|
|
+ class="file-uploader"
|
|
|
+ action="no"
|
|
|
+ accept="image/*"
|
|
|
+ :show-file-list="false"
|
|
|
+ :limit="1"
|
|
|
+ :http-request="uploadFile"
|
|
|
+ >
|
|
|
+ <span style="cursor: pointer">选择图片</span>
|
|
|
+ </el-upload>
|
|
|
+ <div>
|
|
|
+ <span class="opacity-icon"></span>
|
|
|
+ <el-input v-model="background.image_opacity" size="mini" :min="0" :max="100" style="width: 55px" />%
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mode-list">
|
|
|
+ <span
|
|
|
+ v-for="mode in imageModeList"
|
|
|
+ :key="mode.value"
|
|
|
+ :class="{ active: mode.value === background.imageMode }"
|
|
|
+ @click="background.imageMode = mode.value"
|
|
|
+ >
|
|
|
+ {{ mode.label }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="setup-item">
|
|
|
+ <div class="setup-top">
|
|
|
+ <el-radio v-model="background.mode" label="color">颜色</el-radio>
|
|
|
+ </div>
|
|
|
+ <div class="setup-content">
|
|
|
+ <el-color-picker v-model="background.color" show-alpha />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="setup-item">
|
|
|
+ <div class="setup-top">
|
|
|
+ <el-checkbox v-model="background.enable_border" label="边框" />
|
|
|
+ </div>
|
|
|
+ <div class="setup-content">
|
|
|
+ <el-color-picker v-model="background.border_color" show-alpha />
|
|
|
+ <div>
|
|
|
+ <el-input v-model="background.border_width" style="width: 70px; margin-right: 10px">
|
|
|
+ <i slot="prefix" class="el-icon-s-fold" style="line-height: 32px"></i>
|
|
|
+ </el-input>
|
|
|
+ <el-select v-model="background.border_style" placeholder="边框样式" style="width: 120px">
|
|
|
+ <el-option label="实线" value="solid" />
|
|
|
+ <el-option label="虚线" value="dashed" />
|
|
|
+ <el-option label="点线" value="dotted" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="setup-item">
|
|
|
+ <div class="setup-top">
|
|
|
+ <el-checkbox v-model="background.enable_radius" label="圆角" />
|
|
|
+ </div>
|
|
|
+ <div class="setup-content border-radius">
|
|
|
+ <div class="radius-item">
|
|
|
+ <span class="span-radius" :style="computedBorderRadius('top', 'left')"></span>
|
|
|
+ <el-input v-model="background.top_left_radius" :min="0" type="number" />
|
|
|
+ </div>
|
|
|
+ <div class="radius-item">
|
|
|
+ <span class="span-radius" :style="computedBorderRadius('top', 'right')"></span>
|
|
|
+ <el-input v-model="background.top_right_radius" :min="0" type="number" />
|
|
|
+ </div>
|
|
|
+ <div class="radius-item">
|
|
|
+ <span class="span-radius" :style="computedBorderRadius('bottom', 'left')"></span>
|
|
|
+ <el-input v-model="background.bottom_left_radius" :min="0" type="number" />
|
|
|
+ </div>
|
|
|
+ <div class="radius-item">
|
|
|
+ <span class="span-radius" :style="computedBorderRadius('bottom', 'right')"></span>
|
|
|
+ <el-input v-model="background.bottom_right_radius" :min="0" type="number" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="handleClose">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { fileUpload } from '@/api/app';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'SetBackground',
|
|
|
+ props: {
|
|
|
+ visible: {
|
|
|
+ type: Boolean,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ url: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ position: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({ width: 0, height: 0, top: 0, left: 0 }),
|
|
|
+ },
|
|
|
+ backgroundData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ maxWidth: 480,
|
|
|
+ maxHeight: 410,
|
|
|
+
|
|
|
+ imgData: {
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ },
|
|
|
+ drag: {
|
|
|
+ dragging: false,
|
|
|
+ startX: 0,
|
|
|
+ startY: 0,
|
|
|
+ type: '',
|
|
|
+ },
|
|
|
+ file_url: '', // 背景图片地址
|
|
|
+ background: {
|
|
|
+ mode: 'image', // 背景模式
|
|
|
+ imageMode: 'auto', // 图片背景模式
|
|
|
+ image_opacity: 100, // 背景图片透明度
|
|
|
+ color: 'rgba(255, 255, 255, 1)', // 背景颜色
|
|
|
+ enable_border: false, // 是否启用边框
|
|
|
+ border_color: 'rgba(0, 0, 0, 1)', // 边框颜色
|
|
|
+ border_width: 1, // 边框宽度
|
|
|
+ border_style: 'solid', // 边框样式
|
|
|
+ enable_radius: false, // 是否启用圆角
|
|
|
+ top_left_radius: 4, // 左上圆角
|
|
|
+ top_right_radius: 4, // 右上圆角
|
|
|
+ bottom_left_radius: 4, // 左下圆角
|
|
|
+ bottom_right_radius: 4, // 右下圆角
|
|
|
+ },
|
|
|
+ imageModeList: [
|
|
|
+ { label: '填充', value: 'fill' },
|
|
|
+ { label: '拉伸', value: 'stretch' },
|
|
|
+ { label: '适应', value: 'adapt' },
|
|
|
+ { label: '自定', value: 'auto' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ imgTop() {
|
|
|
+ return `${this.imgData.top - 9}px`;
|
|
|
+ },
|
|
|
+ imgLeft() {
|
|
|
+ return `${this.imgData.left}px`;
|
|
|
+ },
|
|
|
+ imgWidth() {
|
|
|
+ return `${this.imgData.width}px`;
|
|
|
+ },
|
|
|
+ imgHeight() {
|
|
|
+ return `${this.imgData.height}px`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visible(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.file_url = this.url;
|
|
|
+ this.imgData = {
|
|
|
+ width: (this.position.width * this.maxWidth) / 100,
|
|
|
+ height: (this.position.height * this.maxHeight) / 100,
|
|
|
+ top: (this.position.top * this.maxHeight) / 100,
|
|
|
+ left: (this.position.left * this.maxWidth) / 100,
|
|
|
+ };
|
|
|
+ if (this.backgroundData && Object.keys(this.backgroundData).length) {
|
|
|
+ this.background = { ...this.backgroundData };
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ document.querySelector('.background-img').addEventListener('mousemove', this.mouseMove);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ document.querySelector('.background-img')?.removeEventListener('mousemove', this.mouseMove);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ document.body.addEventListener('mouseup', this.mouseUp);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ document.querySelector('.background-img')?.removeEventListener('mousemove', this.mouseMove);
|
|
|
+ document.body.removeEventListener('mouseup', this.mouseUp);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClose() {
|
|
|
+ this.$emit('update:visible', false);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 拖拽开始
|
|
|
+ * @param {MouseEvent} event
|
|
|
+ * @param {string} cursor
|
|
|
+ * @param {string} type
|
|
|
+ */
|
|
|
+ dragStart(event, cursor, type) {
|
|
|
+ const { clientX, clientY } = event;
|
|
|
+ this.drag = {
|
|
|
+ dragging: true,
|
|
|
+ startX: clientX,
|
|
|
+ startY: clientY,
|
|
|
+ type,
|
|
|
+ };
|
|
|
+
|
|
|
+ document.querySelector('.el-dialog__wrapper').style.cursor = cursor;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 鼠标移动
|
|
|
+ * @param {MouseEvent} event
|
|
|
+ */
|
|
|
+ mouseMove(event) {
|
|
|
+ if (!this.drag.dragging) return;
|
|
|
+ const { clientX, clientY } = event;
|
|
|
+ const { startX, startY, type } = this.drag;
|
|
|
+
|
|
|
+ const widthDiff = clientX - startX;
|
|
|
+ const heightDiff = clientY - startY;
|
|
|
+
|
|
|
+ if (type === 'top-left') {
|
|
|
+ this.imgData.width = Math.min(this.maxWidth, Math.max(0, this.imgData.width - widthDiff));
|
|
|
+ this.imgData.height = Math.min(this.maxHeight, Math.max(0, this.imgData.height - heightDiff));
|
|
|
+ this.imgData.top = Math.min(this.maxHeight - this.imgData.height, Math.max(0, this.imgData.top + heightDiff));
|
|
|
+ this.imgData.left = Math.min(this.maxWidth - this.imgData.width, Math.max(0, this.imgData.left + widthDiff));
|
|
|
+ } else if (type === 'top-right') {
|
|
|
+ this.imgData.width = Math.min(this.maxWidth, this.imgData.width + widthDiff);
|
|
|
+ this.imgData.height = Math.min(this.maxHeight, Math.max(0, this.imgData.height - heightDiff));
|
|
|
+ this.imgData.top = Math.min(this.maxHeight - this.imgData.height, Math.max(0, this.imgData.top + heightDiff));
|
|
|
+ this.imgData.left = Math.min(this.maxWidth - this.imgData.width, Math.max(0, this.imgData.left));
|
|
|
+ } else if (type === 'bottom-left') {
|
|
|
+ this.imgData.width = Math.min(this.maxWidth, Math.max(0, this.imgData.width - widthDiff));
|
|
|
+ this.imgData.height = Math.min(this.maxHeight, this.imgData.height + heightDiff);
|
|
|
+ this.imgData.top = Math.min(this.maxHeight - this.imgData.height, Math.max(0, this.imgData.top));
|
|
|
+ this.imgData.left = Math.min(this.maxWidth - this.imgData.width, Math.max(0, this.imgData.left + widthDiff));
|
|
|
+ } else if (type === 'bottom-right') {
|
|
|
+ this.imgData.width = Math.min(this.maxWidth, this.imgData.width + widthDiff);
|
|
|
+ this.imgData.height = Math.min(this.maxHeight, this.imgData.height + heightDiff);
|
|
|
+ this.imgData.top = Math.min(this.maxHeight - this.imgData.height, Math.max(0, this.imgData.top));
|
|
|
+ this.imgData.left = Math.min(this.maxWidth - this.imgData.width, Math.max(0, this.imgData.left));
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'top') {
|
|
|
+ this.imgData.height = Math.min(this.maxHeight, Math.max(0, this.imgData.height - heightDiff));
|
|
|
+ this.imgData.top = Math.min(this.maxHeight - this.imgData.height, Math.max(0, this.imgData.top + heightDiff));
|
|
|
+ } else if (type === 'bottom') {
|
|
|
+ this.imgData.height = Math.min(this.maxHeight, this.imgData.height + heightDiff);
|
|
|
+ this.imgData.top = Math.min(this.maxHeight - this.imgData.height, Math.max(0, this.imgData.top));
|
|
|
+ } else if (type === 'left') {
|
|
|
+ this.imgData.width = Math.min(this.maxWidth, this.imgData.width - widthDiff);
|
|
|
+ this.imgData.left = Math.min(this.maxWidth - this.imgData.width, Math.max(0, this.imgData.left + widthDiff));
|
|
|
+ } else if (type === 'right') {
|
|
|
+ this.imgData.width = Math.min(this.maxWidth, this.imgData.width + widthDiff);
|
|
|
+ this.imgData.left = Math.min(this.maxWidth - this.imgData.width, Math.max(0, this.imgData.left));
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'move') {
|
|
|
+ this.imgData.top = Math.min(this.maxHeight - this.imgData.height, Math.max(0, this.imgData.top + heightDiff));
|
|
|
+ this.imgData.left = Math.min(this.maxWidth - this.imgData.width, Math.max(0, this.imgData.left + widthDiff));
|
|
|
+ }
|
|
|
+
|
|
|
+ this.drag.startX = clientX;
|
|
|
+ this.drag.startY = clientY;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 鼠标抬起
|
|
|
+ */
|
|
|
+ mouseUp() {
|
|
|
+ this.drag.dragging = false;
|
|
|
+ document.querySelector('.el-dialog__wrapper').style.cursor = 'auto';
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 计算圆角样式
|
|
|
+ * @param {string} position 位置，top/bottom
|
|
|
+ * @param {string} direction 方向，left/right
|
|
|
+ * @returns {Object} 圆角样式对象
|
|
|
+ */
|
|
|
+ computedBorderRadius(position, direction) {
|
|
|
+ const radius = this.background[`${position}_${direction}_radius`];
|
|
|
+ let borderWidth = {};
|
|
|
+ if (position === 'top') {
|
|
|
+ borderWidth['border-bottom-width'] = 0;
|
|
|
+ } else {
|
|
|
+ borderWidth['border-top-width'] = 0;
|
|
|
+ }
|
|
|
+ if (direction === 'left') {
|
|
|
+ borderWidth['border-right-width'] = 0;
|
|
|
+ } else {
|
|
|
+ borderWidth['border-left-width'] = 0;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ [`border-${position}-${direction}-radius`]: `${radius}px`,
|
|
|
+ ...borderWidth,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ uploadFile(file) {
|
|
|
+ fileUpload('Mid', file, { isGlobalprogress: true })
|
|
|
+ .then(({ file_info_list }) => {
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ if (file_info_list.length > 0) {
|
|
|
+ const fileUrl = file_info_list[0].file_url;
|
|
|
+ const img = new Image();
|
|
|
+ img.src = fileUrl;
|
|
|
+ img.onload = () => {
|
|
|
+ const { width, height } = img;
|
|
|
+ this.normalComputed(width, height);
|
|
|
+ this.file_url = fileUrl;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.error('上传失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 正常填充
|
|
|
+ * @param {number} width 图片宽度
|
|
|
+ * @param {number} height 图片高度
|
|
|
+ */
|
|
|
+ normalComputed(width, height) {
|
|
|
+ if (width > this.maxWidth || height > this.maxHeight) {
|
|
|
+ const wScale = width / this.maxWidth;
|
|
|
+ const hScale = height / this.maxHeight;
|
|
|
+ const scale = wScale > hScale ? this.maxWidth / 2 / width : this.maxHeight / 2 / height;
|
|
|
+
|
|
|
+ this.imgData = {
|
|
|
+ width: width * scale,
|
|
|
+ height: height * scale,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.imgData = {
|
|
|
+ width,
|
|
|
+ height,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ this.$emit(
|
|
|
+ 'setBackground',
|
|
|
+ this.file_url,
|
|
|
+ {
|
|
|
+ width: (this.imgData.width / this.maxWidth) * 100,
|
|
|
+ height: (this.imgData.height / this.maxHeight) * 100,
|
|
|
+ top: (this.imgData.top / this.maxHeight) * 100,
|
|
|
+ left: (this.imgData.left / this.maxWidth) * 100,
|
|
|
+ },
|
|
|
+ this.background,
|
|
|
+ );
|
|
|
+ this.handleClose();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.background-title {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: $font-light-color;
|
|
|
+}
|
|
|
+
|
|
|
+.set-background {
|
|
|
+ display: flex;
|
|
|
+ column-gap: 8px;
|
|
|
+
|
|
|
+ .background-img {
|
|
|
+ flex: 1;
|
|
|
+ height: 410px;
|
|
|
+ border: 1px dashed rgba(0, 0, 0, 8%);
|
|
|
+
|
|
|
+ .img-set {
|
|
|
+ display: inline-grid;
|
|
|
+ grid-template:
|
|
|
+ ' . . . ' 2px
|
|
|
+ ' . img . ' auto
|
|
|
+ ' . . . ' 2px
|
|
|
+ / 2px auto 2px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .horizontal-line,
|
|
|
+ .vertical-line {
|
|
|
+ background-color: $main-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .horizontal-line {
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ cursor: ns-resize;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vertical-line {
|
|
|
+ width: 2px;
|
|
|
+ height: 100%;
|
|
|
+ cursor: ew-resize;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ z-index: 1;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: $main-color;
|
|
|
+
|
|
|
+ &.top-left {
|
|
|
+ top: -2px;
|
|
|
+ left: -2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.top-right {
|
|
|
+ top: -2px;
|
|
|
+ right: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bottom-left {
|
|
|
+ bottom: 2px;
|
|
|
+ left: -2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bottom-right {
|
|
|
+ right: 2px;
|
|
|
+ bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.top-left,
|
|
|
+ &.bottom-right {
|
|
|
+ position: relative;
|
|
|
+ cursor: nwse-resize;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.top-right,
|
|
|
+ &.bottom-left {
|
|
|
+ position: relative;
|
|
|
+ cursor: nesw-resize;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .setup {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 12px;
|
|
|
+ width: 200px;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ column-gap: 8px;
|
|
|
+
|
|
|
+ .setup-top {
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setup-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 8px;
|
|
|
+
|
|
|
+ .image-set {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 32px;
|
|
|
+ color: $font-light-color;
|
|
|
+ background-color: #f2f3f5;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .opacity-icon {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ vertical-align: middle;
|
|
|
+ background: url('@/assets/icon/opacity.png');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mode-list {
|
|
|
+ display: flex;
|
|
|
+ padding: 2px 3px;
|
|
|
+ background-color: #f2f3f5;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ flex: 1;
|
|
|
+ padding: 2px 6px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: $main-color;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.border-radius {
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: 1fr 1fr;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 8px 8px;
|
|
|
+
|
|
|
+ .radius-item {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ column-gap: 4px;
|
|
|
+ align-items: center;
|
|
|
+ height: 32px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ background-color: #f2f3f5;
|
|
|
+
|
|
|
+ .span-radius {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border-color: #000;
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.el-dialog.background {
|
|
|
+ .el-dialog__header {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 8px 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
dsy
