eta_front/src/views/system_manage/components/smartReportImgSet.vue

<template>
    <div class="smart-report-img-set-page">
        <div class="top-wrap">
            <el-input v-model="keyword" :placeholder="$t('SystemManage.BaseConfig.resource_placeholder01')" clearable style="width:200px;margin-right:20px" @input="handleSearch"></el-input>
            <el-select :placeholder="$t('SystemManage.BaseConfig.resource_placeholder02')" v-model="type" clearable style="width:200px" @change="handleSearch">
                <el-option :label="$t('SystemManage.BaseConfig.resource_type01')" :value="1"></el-option>
                <el-option :label="$t('SystemManage.BaseConfig.resource_type02')" :value="2"></el-option>
            </el-select>
            <el-button type="primary" style="float:right" @click="handleShowUploadPop" v-permission="permissionBtn.baseConfigPermission.etaBaseConfig_source_upload">{{$t('SystemManage.BaseConfig.resource_btn04')}}</el-button>
        </div>

        <div class="select-status-box" v-if="selectIds.length>0">
            <el-checkbox 
                :indeterminate="isIndeterminate" 
                v-model="checkAll" 
                @change="handleCheckAllChange"
            >全选</el-checkbox>
            <span>已选择{{selectIds.length}}项</span>
            <span @click="selectIds=[]" style="color:#1146DB;margin-left:20px;cursor: pointer;">{{$t('SystemManage.BaseConfig.resource_btn03')}}</span>
            <span @click="handleBatchDel" style="color:#1146DB;margin-left:20px;cursor: pointer;">{{$t('Table.delete_btn')}}</span>
        </div>


        <ul class="img-list-wrap">
            <li class="img-item" v-for="item in list" :key="item.ResourceId">
                <div :class="['select-box',selectIds.includes(item.ResourceId)?'select-box-active':'']" @click="handleSelectItem(item)"></div>
                <div class="opt-box">
                    <div class="item" @click="handleShowImgFull(item)">
                        <img src="~@/assets/img/icons/fullsreen.png" alt="">
                    </div>
                    <el-dropdown @command="handleClickOpt">
                    <div class="item">
                        <img src="~@/assets/img/icons/more.png" alt="">
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{type:'edit',data:item}">{{$t('Dialog.title_prefix_edit')}}</el-dropdown-item>
                        <el-dropdown-item :command="{type:'del',data:item}" style="color: #AD352F;">{{$t('Table.delete_btn')}}</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <img class="img" :src="item.ImgUrl" alt="">
                <p class="name">{{item.ImgName}}</p>
            </li>
        </ul>
        <tableNoData :text="$t('Table.prompt_slogan')" v-if="list.length===0"/>
        <!-- <el-col :span="24" class="toolbar">
            <el-pagination
                layout="total,prev,pager,next"
                background
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total"
                style="float: right"
            />
        </el-col> -->

        <!-- 上传图片弹窗 -->
        <el-dialog
            :visible.sync="uploadImgPop"
            :title="formData.id?$t('SystemManage.BaseConfig.resource_btn05'):$t('SystemManage.BaseConfig.resource_btn04')"
            :close-on-click-modal="false"
            :append-to-body="true"
            @close="cancelHandle"
            custom-class="classify-dialog"
            center
            width="550px"
            v-dialogDrag
        >
            
            <el-form 
                :model="formData" 
                :rules="formRules" 
                ref="ruleForm" 
                label-width="120px" 
                class="upload-img-form"
            >
                <div class="step-box">
                    <div class="step-item" v-for="(item,index) in steps">
                        <div class="step" :class="[step==(index+1) && 'active',step>(index+1) && 'finish']">
                            <template v-if="!(step>(index+1))">
                                <div class="step-number" >{{ index+1 }}</div>
                                <span class="step-text">{{ item }}</span>
                            </template>
                            <template v-else>
                                <i class="el-icon-success" style="font-size: 18px;color: #0052D9;"></i>
                                <span class="step-text" style="color: #333333;">{{$t('SystemManage.BaseConfig.completed_step')}}</span>
                            </template>
                        </div>
                        <div class="line" v-if="index==0"></div>
                    </div>
                </div>
                <template v-if="step==1">
                    <el-form-item :label="$t('SystemManage.BaseConfig.resource_label01')" prop="name">
                        <el-input v-model="formData.name" :placeholder="$t('SystemManage.BaseConfig.resource_placeholder01')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('SystemManage.BaseConfig.resource_label02')" prop="type">
                        <el-radio-group v-model="formData.type">
                            <el-radio :label="1">{{$t('SystemManage.BaseConfig.resource_type01')}}</el-radio>
                            <el-radio :label="2">{{$t('SystemManage.BaseConfig.resource_type02')}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item 
                        :label="$t('SystemManage.BaseConfig.resource_btn01')" 
                        prop="imgUrl"
                    >
                        <el-upload 
                            action="" 
                            accept="image/*" 
                            :http-request="handleUploadImg" 
                            :show-file-list="false"
                        >
                            <div class="upload-box">
                                <template v-if="!formData.imgUrl">
                                    <i class="el-icon-plus" style="font-size: 24px;"></i>
                                </template>
                                <template v-else>
                                    <img class="upload-img" :src="formData.imgUrl" alt="">
                                </template>
                            </div>
                        </el-upload>
                        <p>{{$t('SystemManage.BaseConfig.upload_suggest')}}</p>
                    </el-form-item>
                </template>
                <template v-else>
                    <draggable tag="div" class="layout-options" :sort="false" :list="layoutOptions" @start="dropStart">
                        <div class="option-item" v-for="item in layoutOptions" :key="item.value">
                            <div class="option-item-title">{{ item.label }}</div>
                            <img src="~@/assets/img/icons/layout-option-icon.png" class="option-item-icon" />
                        </div>
                    </draggable>
                    <div class="layout-background" @dragover.prevent @drop="handleAddOption">
                        <img :src="formData.imgUrl" class="layout-image" ref="layoutImage" />
                        <vue-drag-resize :parentLimitation="true" :sticks="['bl','br']" :minw="10" :minh="10"
                        :w="item.width" :h="item.height" @resizestop="(p)=>resizeStop(p,item.value)" @dragstop="(p)=>dragStop(p,item.value)"
                        v-for="item in layoutItems" :key="item.value" :x="item.x" :y="item.y" :z="item.z" @clicked="()=>optionClick(item)">
                            <div class="layout-item" @contextmenu.prevent="(e)=>rightClick(e,item)" @blur="blur" tabindex="-1"
                            :style="{fontFamily:item.family,fontSize:item.size+'px',fontWeight:item.weight,textAlign:item.align,color:item.color}">{{ item.label }}</div>
                        </vue-drag-resize>
                        <div
                        class="right-mouse-menu"
                        ref="rightMenuRef"
                        v-if="rightMouseMenu.show"
                        :style="{
                            left: rightMouseMenu.left,
                            top: rightMouseMenu.top,
                        }"
                        >
                            <div class="item" @click="optionDel" style="color: #AD352F;">{{$t('Table.delete_btn')}}</div>
                        </div>
                    </div>
                    <div class="layout-font">
                        <div class="layout-font-title">{{$t('SystemManage.BaseConfig.text_style')}}</div>
                        <div class="layout-font-options">
                            <el-select v-model="layoutFont.family" class="font-options-row">
                              <el-option :label="item" :value="item" v-for="item in layoutFontF" :key="item"></el-option>
                            </el-select>
                            <el-select v-model="layoutFont.size" class="font-options-row">
                              <el-option :label="item" :value="item" v-for="item in layoutFontS" :key="item"></el-option>
                            </el-select>
                            <el-select v-model="layoutFont.weight" class="font-options-row">
                              <el-option :label="item.label" :value="item.value" v-for="item in layoutFontW" :key="item.value"></el-option>
                            </el-select>
                            <el-select v-model="layoutFont.align" class="font-options-row">
                              <el-option :label="item.label" :value="item.value" v-for="item in layoutFontAlign" :key="item.value"></el-option>
                            </el-select>
                            <el-color-picker v-model="layoutFont.color"></el-color-picker>
                        </div>
                    </div>
                </template>
                <div style="text-align: center;padding: 30px 0;margin-top: 60px;">
                    <el-button type="primary" style="width:120px;" @click="Steptoggle('+')" v-if="step==1">{{$t('Dialog.next_step')}}</el-button>
                    <el-button type="primary" plain style="width:120px;" @click="Steptoggle('-')" v-else>{{$t('Dialog.prev_step')}}</el-button>
                    <el-button type="primary" style="margin-left:20px;width:120px;" @click="handleSave" v-if="step==2">{{$t('Dialog.complete_btn')}}</el-button>
                </div>
            </el-form>
            
        </el-dialog>
        <el-image-viewer 
            v-if="showViewer" 
            :on-close="()=>{this.picShowList=[];this.showViewer = false}" 
            :url-list="picShowList" 
        />
    </div>
</template>

<script>
import {bannerupload} from '@/api/api.js';
import {apiSmartReport}  from '@/api/modules/smartReport'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import draggable from 'vuedraggable'
import VueDragResize from 'vue-drag-resize'
export default {
    components:{ElImageViewer,draggable,VueDragResize},
    data() {
        return {
            keyword:'',
            type:'',
            page:1,
            pageSize:1000,
            list:[],
            total:0,

            uploadImgPop:false,
            formData:{
                id:0,
                name:'',
                type:'',
                imgUrl:'',
                layout:''
            },
            formRules:{
                name:[{ required: true, message: this.$t('SystemManage.BaseConfig.resource_placeholder01')||'请输入图片名称', trigger: 'blur' }],
                type:[{ required: true, message: this.$t('SystemManage.BaseConfig.resource_placeholder02')||'请选择图片类型', trigger: 'change' }],
                imgUrl:[{ required: true, message: this.$t('SystemManage.BaseConfig.resource_placeholder03')||'请上传图片', trigger: 'change' }]
            },
            step:1,
            steps:[this.$t('SystemManage.BaseConfig.select_layout'),this.$t('SystemManage.BaseConfig.edit_layout')],
            /**
             * value不能变 
             * 一开始定义为创建时间，后面改为发布时间
             */
            layoutOptions:[{value:'研报标题',label:this.$t('SystemManage.BaseConfig.report_title')},//研报标题
                            {value:'研报作者',label:this.$t('SystemManage.BaseConfig.report_author')},//研报作者
                            {value:'创建时间',label:this.$t('SystemManage.BaseConfig.report_release_time')}],//发布时间
            layoutItems:[],
            // currentLayout:{},
            layoutFont:{
                family:'Arial',
                size:'14',
                weight:'normal',
                align:'left',
                color:'#333333'
            },
            rightMouseMenu:{
                show: false,
                left: '99999px',
                top: '99999px',
                value: '',
            },
            dragIndex:0,
            layoutFontF:['微软雅黑','宋体','黑体','仿宋','楷体','隶书','幼圆','思源宋体','思源黑体','Helvetica','Arial','Arial Black','Georgia','Impact','Tahoma','Times New Roman','Andale Mono','Verdana','Book Antiqua','Comic Sans MS','Courier New','Webdings','Wingdings'],
            // layoutFontF:['Arial','Georgia','Impact','Tahoma','Times New Roman','Verdana','思源宋体','思源黑体'],
            layoutFontS:['12','13','14','15','16','18','20','24','28','32','36','40'],
            layoutFontW:[{value:'normal',label:this.$t('SystemManage.BaseConfig.style_font_w_normal')},
                        {value:'bold',label:this.$t('SystemManage.BaseConfig.style_font_w_bold')}],
            layoutFontAlign:[{value:'left',label:this.$t('SystemManage.BaseConfig.style_text_align_left')},
                            {value:'center',label:this.$t('SystemManage.BaseConfig.style_text_align_center')},
                            {value:'right',label:this.$t('SystemManage.BaseConfig.style_text_align_right')}],
            showViewer:false,
            picShowList:[],
            rigtMenuHideTimer:null,
            delIds:[],//要删除的id集合
            selectIds:[],

            isIndeterminate:false,
            checkAll:false
        }
    },
    created() {
        this.getImgList()
    },
    mounted(){

    },
    methods: {
        handleSelectItem(e){
            const index=this.selectIds.indexOf(e.ResourceId)
            if(index>-1){
                this.selectIds.splice(index,1)
            }else{
                this.selectIds.push(e.ResourceId)
            }

            this.checkAll=this.selectIds.length===this.list.length?true:false
            this.isIndeterminate=this.selectIds.length>0&&this.selectIds.length<this.list.length
        },
        handleCheckAllChange(val){
            if(val){
                this.selectIds=this.list.map(item=>item.ResourceId)
            }else{
                this.selectIds=[]
            }
        },

        //分页页码跳转
        handleCurrentChange(current) {
            this.page = current;
            this.getImgList();
        },


        //资源库列表
        async getImgList(){
            // 获取列表数据重置选择数据
            this.selectIds=[]
            this.isIndeterminate=false
            this.checkAll=false
            this.delIds=[]
            
            const res=await apiSmartReport.imgReourceList({
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                Type:this.type,
                Keyword:this.keyword
            })
            if(res.Ret===200){
                this.list=res.Data.List||[]
                this.total=res.Data.Paging.Totals
            }
        },

        handleSearch(){
            this.page=1
            this.getImgList()
        },

        handleUploadImg(file){
            //图片大小和格式限制
            const {size,type} = file.file
            let form = new FormData();
            form.append('file',file.file);
            bannerupload(form).then(res=>{
                // console.log(res);
                if(res.Ret!==200) return 
                this.formData.imgUrl=res.Data.ResourceUrl
            })
        
        },

        handleSave(){
            this.$refs.ruleForm.validate((valid)=>{
                if(valid){
                    let backgroundWidth = this.$refs.layoutImage.width
                    let backgroundGHeight = this.$refs.layoutImage.height
                    let layoutStr = this.layoutItems.map(item =>{
                        return {
                            value:item.value,
                            label:item.label,
                            left:item.x/backgroundWidth*100+'%',
                            top:item.y/backgroundGHeight*100+'%',
                            width:item.width/backgroundWidth*100+'%',
                            height:item.height/backgroundGHeight*100+'%',
                            family:item.family,
                            size:item.size,
                            weight:item.weight,
                            align:item.align,
                            color:item.color,
                        }
                    })
                    const params={
                        Type:this.formData.type,
                        ImgUrl:this.formData.imgUrl,
                        ImgName:this.formData.name,
                        Style:JSON.stringify(layoutStr)
                    }
                    if(this.formData.id){
                        // 编辑
                        apiSmartReport.imgReourceEdit({
                            ResourceId:this.formData.id,
                            ...params
                        }).then(res=>{
                            if(res.Ret===200){
                                this.$message.success(this.$t('MsgPrompt.edit_msg'))
                                this.page=1
                                this.getImgList()
                                this.handleCloseImgUpload()
                            }
                        })
                        return
                    }
                    apiSmartReport.imgReourceAdd(params).then(res=>{
                        if(res.Ret===200){
                            this.$message.success(this.$t('MsgPrompt.add_msg'))
                            this.page=1
                            this.getImgList()
                            this.handleCloseImgUpload()
                        }
                    })
                }
            })
        },
        convertLabel(value){
            let row = this.layoutOptions.find(it => it.value==value)
            return row?row.label:value
        },
        handleCloseImgUpload(){
            this.uploadImgPop=false
        },
        cancelHandle(){
            this.step=1
            this.formData.id=0
            this.formData.name=''
            this.formData.type=''
            this.formData.imgUrl=''
            this.formData.layout=''
            this.layoutItems=[]
            this.layoutFont={
                family:'Arial',
                size:'14',
                weight:'normal',
                align:'left',
                color:'#333333'
            }
            this.rightMouseMenu={
                show: false,
                left: '99999px',
                top: '99999px',
                value: '',
            },
            this.$nextTick(()=>{
                this.$refs.ruleForm.clearValidate()
            })
        },
        handleShowImgFull(e){
            console.log(e);
            this.picShowList=[e.ImgUrl]
            this.showViewer=true
        },

        handleClickOpt(e){
            if(e.type==='del'){
                this.delIds=[e.data.ResourceId]
                this.handleImgDel()
            }
            if(e.type==='edit'){
                this.formData.id=e.data.ResourceId
                this.formData.name=e.data.ImgName
                this.formData.type=e.data.Type
                this.formData.imgUrl=e.data.ImgUrl
                this.formData.layout=e.data.Style

                this.uploadImgPop=true
            }
        },
        handleShowUploadPop(){
            this.formData.id=0
            this.formData.name=''
            this.formData.type=''
            this.formData.imgUrl=''
            this.formData.layout=''
            this.uploadImgPop=true
        },

        handleBatchDel(){
            this.delIds=this.selectIds
            this.handleImgDel()
        },

        handleImgDel(){
            this.$confirm(this.$t('SystemManage.BaseConfig.resource_del_msg'),this.$t('Confirm.prompt'),{
                // confirmButtonText: '确定',
                // cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                apiSmartReport.imgReourceDel({ResourceIds:this.delIds.join(',')}).then(res=>{
                    if(res.Ret===200){
                        this.$message.success(this.$t('MsgPrompt.delete_msg'))
                        this.page=1
                        this.getImgList()
                    }
                })
            })
        },
        // 切换步骤
        Steptoggle(t){
            if(t=='+'){
                this.$refs.ruleForm.validate((valid)=>{
                    if(valid){
                        this.step++
                    }
                })
            }else{
                this.step--
            }
            if(this.step==2){
                this.setLayoutItems()
            }
        },
        // 设置布局设置
        setLayoutItems(){
            this.$nextTick(()=>{
                let backgroundWidth = this.$refs.layoutImage?this.$refs.layoutImage.width:400
                let backgroundGHeight = this.$refs.layoutImage?this.$refs.layoutImage.height:100
                try {
                    this.layoutItems=this.formData.layout?JSON.parse(this.formData.layout).map(it =>{
                        return {
                            value:it.value,
                            label:this.convertLabel(it.value),
                            x:this.percent2Number(it.left,backgroundWidth),
                            y:this.percent2Number(it.top,backgroundGHeight),
                            z:1,
                            width:this.percent2Number(it.width,backgroundWidth),
                            height:this.percent2Number(it.height,backgroundGHeight),
                            family:it.family,
                            size:it.size,
                            weight:it.weight,
                            align:it.align,
                            color:it.color,
                        }
                    }):[]
                } catch (error) {
                    console.log(error,'error');
                    this.layoutItems=[]
                }
                // console.log(this.layoutItems,'this.layoutItems');
            })
        },
        percent2Number(per,entirety){
            per=per+''
            let decimals = (+per.substring(0,per.length-1))/100
            return entirety*decimals
        },
        dropStart(e){
            this.dragIndex = e.oldIndex
        },
        handleAddOption(e){
            let options = this.layoutOptions[this.dragIndex]
            let layoutItem = this.layoutItems.find(it => it.value == options.value)
            if(layoutItem){
                layoutItem.z = Math.max(...this.layoutItems.map(t => t.z))+1
                this.$message.warning(this.$i18nt.locale==='zh'?`已添加${options.label}！`:`${options.label} already added!`)
                return
            }
            this.layoutItems.push({
                value:options.value,
                label:options.label,
                x:e.layerX,
                y:e.layerY,
                z:1,
                width:120,
                height:20,
                family:"Arial",
                size:"14px",
                weight:"normal",
                align:"left",
                color:'#333333'
            })
        },
        resizeStop({width,height},value){
            let item = this.layoutItems.find(it => it.value==value)
            if(!item) return 
            item.width=width
            item.height=height
        },
        dragStop({left,top},value){
            let item = this.layoutItems.find(it => it.value==value)
            if(!item) return 
            item.x=left
            item.y=top
        },
        optionClick(op){
            this.layoutFont = op
        },
        rightClick(e,item){
            clearTimeout(this.rigtMenuHideTimer)
            this.rightMouseMenu.left = e.clientX + "px";
            this.rightMouseMenu.top = e.clientY + "px";
            this.rightMouseMenu.value = item.value;
            this.rightMouseMenu.show = true;
        },
        optionDel(){
            this.layoutItems=this.layoutItems.filter(it => it.value!=this.rightMouseMenu.value)
            this.rightMouseMenu.show=false
        },
        blur(){
            this.$refs.rightMenuRef.style.opacity=0
            setTimeout(()=>{
                this.rightMouseMenu.show=false
            },300)
        }
    },
}
</script>

<style lang="scss" scoped>
.ghost-class{
    display: none;
}
.smart-report-img-set-page{
    padding: 30px;
    padding-bottom: 100px;
    .select-status-box{
        background-color: #F8F8F8;
        padding: 10px 20px;
        margin-top: 20px;
    }
}
.img-list-wrap{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .img-item{
        position: relative;
        width: 160px;
        cursor: pointer;
        .img{
            display: block;
            width: 100%;
            height: 160px;
            background-color: var(--gary-gy-3-disabled, #EBEFF6);
            object-fit: contain !important;
            box-sizing: border-box;
            &:hover{
                border: 1px solid #3375e1;
            }
        }
        .name{
            margin-top: 5px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            line-break: anywhere;
            -webkit-box-orient: vertical;
        }
        .select-box{
            position: absolute;
            left: 1px;
            top: 1px;
            width: 12px;
            height: 12px;
            background-color: #EBEFF6;
            display: none;
        }
        .select-box-active{
            background-image: url('~@/assets/img/smartReport/icon17.png');
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
        }
        .opt-box{
            display: none;
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 5;
            .item{
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fff;
                border-radius: 50%;
                margin-left: 10px;
                img{
                    width: 16px;
                    height: 16px;
                }
            }
        }
        &:hover{
            .opt-box{
                display: flex;
            }
            .select-box{
                display: block;
            }
        }
    }
}
.upload-img-form{
    .el-upload {
        .upload-box {
            position: relative;
            width: 120px;
            height: 120px;
            background-color: #F5F7F9;
            border: 1px dashed #DCDFE6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 4px;
            overflow: hidden;

            &:hover {
                border: 1px dashed #3375e1;

                .upload-mask {
                    opacity: 1;
                }
            }

            .form-hint {
                margin-top: 10px;
                color: #999999;
            }

            .upload-img,
            .upload-mask {
                width: 100%;
                height: 100%;
            }

            .upload-mask {
                position: absolute;
                left: 0;
                top: 0;
                cursor: default;
                text-align: center;
                color: #fff;
                opacity: 0;
                font-size: 20px;
                background-color: rgba(0, 0, 0, .5);
                transition: opacity .3s;
                z-index: 2;
                line-height: 120px;

                .mask-icon {
                    cursor: pointer;
                }
            }
        }
    }
    .step-box{
        padding-left: 43px;
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        .step-item{
            display: flex;
            align-items: center;
            .step{
                display: flex;
                align-items: center;
                .step-number{
                    font-size: 14px;
                    font-weight: 600;
                    color: #C0C4CC;
                    border-radius: 50%;
                    width: 18px;
                    height: 18px;
                    box-sizing: border-box;
                    border: solid 2px #C0C4CC;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .step-text{
                    margin-left: 10px;
                    font-size: 16px;
                    color: #C0C4CC;
                    line-height: 24px;
                }
            }
            .active{
                .step-number{
                    border: solid 2px #0052D9;
                    color: white;
                    background-color: #0052D9;
                }
                .step-text{
                    color: #0052D9;
                }
            }
            .line{
                margin: 0 10px;
                width: 40px;
                height: 2px;
                background-color: #C8CDD9;
            }
        }
    }
    .layout-options{
        padding-left: 43px;
        display: inline-flex;
        align-items: center;
        margin-bottom: 20px;
        .option-item{
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-right: 30px;
            background-color: white;
            .option-item-title{
                font-size: 14px;
                color: #333333;
            }
            .option-item-icon{
                margin-top: 6px;
                width: 32px;
                height: 32px;
            }
        }
    }
    .layout-background{
        // background-color: #D9D9D9;
        border: solid 1px #D9D9D9;
        margin-left: 43px;
        width: 400px;
        text-align: center;
        margin-bottom: 20px;
        position: relative;
        .layout-image{
            vertical-align: bottom;
            width: 100%;
        }
        .layout-item{
            text-align: left;
            cursor: move;
            background-color: white;
            border: dashed 1px #B2B9CB;
            color: #C0C4CC;
            border-radius: 2px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box
        }
    }
    .layout-font{
        padding-left: 43px;
        .layout-font-title{
            font-size: 14px;
            font-weight: bold;
            color: #333333;
        }
        .layout-font-options{
            margin-top: 12px;
            display: flex;
            align-items: center;
            gap: 16px;
            .font-options-row{
                width: 90px;
            }
        }
    }
}
.right-mouse-menu{
    position: fixed;
    z-index: 9999999;
    background: #ffffff;
    border: 1px solid #ececec;
    box-shadow: 0px 3px 6px rgba(143, 143, 143, 0.16);
    border-radius: 4px;
    color: #333;
    font-size: 15px;
    padding: 13px 0;
    .item {
        line-height: 30px;
        padding: 0 20px;
        cursor: pointer;
        &:hover {
            background-color: #f5f7fa;
        }
    }
}
</style>