新建logo管理页面

“dzb”

2022-09-20 ffb4f983478bc74ae34d7c7cecc7fb937fab045f

新建logo管理页面

 src/router/index.js

@@ -46,6 +46,11 @@
            path:'otherInterface',
            name:'otherInterface',
            component: () => import('@/views/systemSetting/platform/otherInterface')
          },
          {
            path:'mySetting',
            name:'mySetting',
            component: () => import('@/views/systemSetting/platform/mySetting')
          }
        ]
      },

 src/views/layout/components/Menu/index.vue

@@ -58,6 +58,7 @@
              <template slot="title">
                <span class="secondSpan">门户管理</span>
              </template>
              <el-menu-item index="/home/system/mySetting">自定义菜单</el-menu-item>
              <el-menu-item index="/home/system/portalSetting">logo管理</el-menu-item>
              <el-menu-item index="/home/system/otherInterface">第三方接口管理</el-menu-item>
            </el-submenu>

 src/views/systemSetting/baseSetting/department/updateUser/index.vue

@@ -8,7 +8,7 @@
                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
                    label-position="right">
                    <!-- 部门id -->
                    <el-form-item class="optionItem" label="部门名称:" prop="id">
                    <el-form-item class="optionItem" label="部门id:" prop="id">
                        <el-input v-model="user.id" placeholder="请输入部门名称" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 部门名称 -->

 src/views/systemSetting/platform/mySetting/index.vue

New file
@@ -0,0 +1,5 @@
<template>
    <div>
        
    </div>
</template>

 src/views/systemSetting/platform/portalSetting/index.vue

@@ -1,5 +1,176 @@
<template>
    <div>
        
    <div class="log">
        <header>
            <div clas="headerTitle">
                系统设置 》门户管理 》logo管理
            </div>
        </header>
        <main>
            <div class="mainTitle">LOGO</div>
            <ul class="mainContent">
                <li>
                    <div class="desc">产品图标：主要用于网页头部</div>
                    <div class="upload">
                        <div class="uploadBtn">
                            <i class="el-icon-plus"></i>
                            <span>上传图片</span>
                        </div>
                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>
                    </div>
                </li>
                <li>
                    <div class="desc">网站图标：主要用于浏览器标签页</div>
                    <div class="upload">
                        <div class="uploadBtn">
                            <i class="el-icon-plus"></i>
                            <span>上传图片</span>
                        </div>
                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>
                    </div>
                </li>
                <li>
                    <div class="desc">登录页图标：主要用于登录页</div>
                    <div class="upload">
                        <div class="uploadBtn">
                            <i class="el-icon-plus"></i>
                            <span>上传图片</span>
                        </div>
                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>
                    </div>
                </li>
            </ul>
        </main>
        <footer>
            <div class="webTitle">
                <div class="text">网站标题:</div>
                <div class="inner">
                    <el-input type="text" placeholder="遂昌执法局" v-model="title"></el-input>
                </div>
            </div>
            <div class="footerBtn">
                <el-button class="cancel">返回</el-button>
                <el-button type="primary">提交</el-button>
            </div>
        </footer>
    </div>
</template>
</template>
<script>
export default {
    data() {
        return {
            title:'',
            icon:{
                login:'',
                website:'',
                product:'',
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.log {
    color: #4b9bb7;
    text-align: left;
    padding: 20px;

    li {
        list-style: none;
    }

    header {
        line-height: 60px;
        border-bottom: 1px solid #4b9bb7;
    }

    main {
        padding: 0 20px;

        .mainTitle {
            margin-top: 20px;
            font-size: 20px;
            font-weight: 650;
            line-height: 60px;
        }

        .mainContent {
            padding: 0;

            li {
                margin-top: 30px;
                .desc {
                    line-height: 22px;
                }

                .upload {
                    display: flex;
                    line-height: 100px;
                    margin-top: 15px;

                    .uploadBtn {
                        width: 120px;
                        height: 120px;
                        background-color:rgba(249, 249, 249, 1);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        border-radius: 4px;
                        i {
                            font-size: 30px;
                            font-weight: 650;
                        }

                        span {
                            line-height: 22px;
                        }
                    }

                    .uploadTip {
                        display: flex;
                        align-items: flex-end;
                        margin-left: 20px;
                        font-size: 14px;
                        span{
                            line-height: 22px;
                        }
                    }
                }
            }
        }
    }
    footer{
        padding: 0 20px;
        .webTitle{
            display: flex;
            line-height: 40px;
            margin:30px 0;
            .text{
                flex: 1;
            }
            .inner{
                flex: 13;
                .el-input{
                    width: 496px;
                }
                &::v-deep .el-input__inner{
                    background-color: #09152f;
                    border: 1px solid #17324c;;
                }
            }
        }
        .footerBtn{
            display: flex;
            justify-content: center;
            &::v-deep .el-button{
                padding: 12px 40px;
                font-weight: 600;
            }
            .cancel{
                border: 2px solid #0079fe;
                color: #0079fe;
            }
        }
    }
}
</style>