<template>
|
<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>
|
<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>
|
