Skip to content

E
ElectricitySheep
Commit da826258 authored by 黄奎's avatar 黄奎
Browse files
Options

页面更新

parent 013ac2e0
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 317 deletions
src/components/sallCenter/plugin/nav-page.vue
View file @ da826258
<style> <style>
.diynav-container { .diynav-container {
min-height: 100px; min-height: 100px;
width: 100%; width: 100%;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.Headernav-item { .Headernav-item {
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
padding: 20px 0; padding: 20px 0;
} }
.Navabout-text { .Navabout-text {
color: #909399; color: #909399;
font-size: 12px; font-size: 12px;
margin-top: -10px; margin-top: -10px;
} }
.navigation_pic_boxDiv { .navigation_pic_boxDiv {
width: 70px; width: 70px;
height: 70px; height: 70px;
border: 1px solid #ccc; border: 1px solid #ccc;
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: #fff;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
} }
.navigation_pic_boxDiv i { .navigation_pic_boxDiv i {
font-size: 22px; font-size: 22px;
color: #909399; color: #909399;
} }
.divbg_position { .divbg_position {
width: 170px; width: 170px;
height: 180px; height: 180px;
} }
.divbg_position>div { .divbg_position>div {
height: 50px; height: 50px;
width: 50px; width: 50px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
background-color: #F5F7F9; background-color: #F5F7F9;
} }
.bg_active { .bg_active {
background-color: #E6F4FF; background-color: #E6F4FF;
border: 2px dashed #5CB3FD; border: 2px dashed #5CB3FD;
} }
.edit-nav-item { .edit-nav-item {
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
line-height: normal; line-height: normal;
padding: 5px; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.nav-edit-options { .nav-edit-options {
position: relative; position: relative;
} }
.navapp-image-upload { .navapp-image-upload {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
.nav-edit-options .el-button { .nav-edit-options .el-button {
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
width: 25px; width: 25px;
padding: 0; padding: 0;
text-align: center; text-align: center;
border: none; border: none;
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
margin-left: 0; margin-left: 0;
} }
.nav-edit-options a { .nav-edit-options a {
color: #5CB3FD !important; color: #5CB3FD !important;
} }
.navapp-image-upload .pic-box { .navapp-image-upload .pic-box {
width: 70px; width: 70px;
height: 70px; height: 70px;
border: 1px solid #ccc; border: 1px solid #ccc;
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: #fff;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative; position: relative;
} }
.navapp-image-upload .pic-box i { .navapp-image-upload .pic-box i {
font-size: 22px; font-size: 22px;
color: #909399; color: #909399;
} }
.navapp-image-upload .pic-box .size-tip { .navapp-image-upload .pic-box .size-tip {
line-height: 1.35; line-height: 1.35;
text-align: center; text-align: center;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
letter-spacing: -1px; letter-spacing: -1px;
} }
.navapp-image-upload .image-delete { .navapp-image-upload .image-delete {
position: absolute; position: absolute;
top: -10px; top: -10px;
right: -10px; right: -10px;
padding: 5px; padding: 5px;
visibility: hidden; visibility: hidden;
z-index: 1; z-index: 1;
} }
.navapp-image-upload .image-delete i { .navapp-image-upload .image-delete i {
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
} }
.navapp-image-upload:hover .image-delete { .navapp-image-upload:hover .image-delete {
visibility: visible; visibility: visible;
} }
.Headernav-item img { .Headernav-item img {
display: block; display: block;
width: 88px; width: 88px;
height: 88px; height: 88px;
margin: 0 auto 5px auto; margin: 0 auto 5px auto;
} }
.Headernav-item>div { .Headernav-item>div {
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
} }
.navigation_pic_boxDiv .image-delete { .navigation_pic_boxDiv .image-delete {
position: absolute; position: absolute;
top: -10px; top: -10px;
right: -10px; right: -10px;
padding: 5px; padding: 5px;
visibility: hidden; visibility: hidden;
z-index: 1; z-index: 1;
} }
.navigation_pic_boxDiv:hover .image-delete { .navigation_pic_boxDiv:hover .image-delete {
visibility: visible; visibility: visible;
} }
.navigation_pic_boxDiv .image-delete i { .navigation_pic_boxDiv .image-delete i {
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
} }
.chooseformwork { .chooseformwork {
padding: 20px 0; padding: 20px 0;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.chooseformwork>div>div { .chooseformwork>div>div {
margin: 10px 0; margin: 10px 0;
} }
.chooseformwork>div { .chooseformwork>div {
flex: 1; flex: 1;
} }
.chooseformwork .categroy { .chooseformwork .categroy {
padding-right: 32px; padding-right: 32px;
} }
.chooseformwork .isdisplay { .chooseformwork .isdisplay {
padding-right: 4px; padding-right: 4px;
} }
.chooseimgname-title { .chooseimgname-title {
margin-top: 10px; margin-top: 10px;
} }
.chooseformwork .chooseformwork-one { .chooseformwork .chooseformwork-one {
display: flex; display: flex;
align-items: center; align-items: center;
} }
</style> </style>
<template> <template>
<div :class="{ 'active': navData.isCked }"> <div :class="{ 'active': navData.isCked }">
...@@ -261,9 +261,14 @@ ...@@ -261,9 +261,14 @@
</a> </a>
</div> </div>
<div class="chooseimgname"> <div class="chooseimgname">
<span style="padding-right:5px;">名称</span>
<el-input v-model="navData.data.navs[index].name" style="width:200px; margin: 10px 0;" placeholder="名称">
</el-input>
<div> <div>
<div class="navapp-image-upload"> <div class="navapp-image-upload">
<p class="chooseimgname-title">默认图标</p> <p class="chooseimgname-title">默认图标</p>
<div>
</div>
<div flex="main:center cross:center" @click="choiceMyImg(index, 1)" class="pic-box" <div flex="main:center cross:center" @click="choiceMyImg(index, 1)" class="pic-box"
:style="{ backgroundImage: 'url(' + getIconLink(item.icon) + ')' }"> :style="{ backgroundImage: 'url(' + getIconLink(item.icon) + ')' }">
<i class="el-icon-picture-outline" v-if="item.icon == ''"></i> <i class="el-icon-picture-outline" v-if="item.icon == ''"></i>
...@@ -283,6 +288,7 @@ ...@@ -283,6 +288,7 @@
<div class="size-tip">88 × 88</div> <div class="size-tip">88 × 88</div>
<el-button type="danger" v-if="item.checkIcon != ''" class="image-delete" size="mini" <el-button type="danger" v-if="item.checkIcon != ''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="item.checkIcon = ''" circle></el-button> icon="el-icon-close" @click.stop="item.checkIcon = ''" circle></el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -419,131 +425,130 @@ ...@@ -419,131 +425,130 @@
</div> </div>
</template> </template>
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue"; import ChooseImg from "@/components/global/ChooseImg.vue";
import choiceModule from "@/components/common/choiceModule.vue"; import choiceModule from "@/components/common/choiceModule.vue";
export default { export default {
props: ["navData", "index", "dataLeng"], props: ["navData", "index", "dataLeng"],
data() { data() {
return { return {
bgPostion: '', bgPostion: '',
//宽度 //宽度
navWidth: '', navWidth: '',
//数组下标 //数组下标
commonIndex: 0, commonIndex: 0,
//选择图片弹窗 //选择图片弹窗
choicImg: false, choicImg: false,
selectType: 1, selectType: 1,
isShowModule: false, //是否显示选择模板 isShowModule: false, //是否显示选择模板
checkType: 1, checkType: 1,
}; };
},
components: {
ChooseImg,
choiceModule
},
created() {
},
methods: {
Move(type, index) {
var currentItem = this.navData.data.navs[index];
if (type == 'up') {
var upItem = this.navData.data.navs[index - 1];
this.$set(this.navData.data.navs, index - 1, currentItem);
this.$set(this.navData.data.navs, index, upItem);
}
if (type == 'down') {
var downItem = this.navData.data.navs[index + 1];
this.$set(this.navData.data.navs, index + 1, currentItem);
this.$set(this.navData.data.navs, index, downItem);
}
}, },
components: { //选择模板
ChooseImg, getCustom(obj) {
choiceModule if (this.commonIndex > -1) {
this.navData.data.navs[this.commonIndex].TemplateId = obj.Id;
this.navData.data.navs[this.commonIndex].TemplateShowName = '#' + obj.Id + ':' + obj.TemplateName;
}
this.isShowModule = false;
}, },
created() { //是否显示背景图切换
showImgChange() {
if (!this.navData.data.showImg) {
this.navData.data.backgroundPicUrl = "";
}
}, },
methods: { //切换背景位置
Move(type, index) { selectPosition(po) {
var currentItem = this.navData.data.navs[index]; this.bgPostion = po;
if (type == 'up') { },
var upItem = this.navData.data.navs[index - 1]; //改变宽度
this.$set(this.navData.data.navs, index - 1, currentItem); getNavWidth(w) {
this.$set(this.navData.data.navs, index, upItem); let str = ''
} if (w == 3) {
if (type == 'down') { str = '33.3333%'
var downItem = this.navData.data.navs[index + 1]; } else if (w == 4) {
this.$set(this.navData.data.navs, index + 1, currentItem); str = '25%'
this.$set(this.navData.data.navs, index, downItem); } else {
} str = '20%'
},
//选择模板
getCustom(obj) {
if (this.commonIndex > -1) {
this.navData.data.navs[this.commonIndex].TemplateId = obj.Id;
this.navData.data.navs[this.commonIndex].TemplateShowName = '#' + obj.Id + ':' + obj.TemplateName;
}
this.isShowModule = false;
},
//是否显示背景图切换
showImgChange() {
if (!this.navData.data.showImg) {
this.navData.data.backgroundPicUrl = "";
}
},
//切换背景位置
selectPosition(po) {
this.bgPostion = po;
},
//改变宽度
getNavWidth(w) {
let str = ''
if (w == 3) {
str = '33.3333%'
} else if (w == 4) {
str = '25%'
} else {
str = '20%'
}
return str;
},
//添加导航图标
addNavigatiton() {
let obj = {
icon: '',
checkIcon: '', //选中导航图标
checkBgImg: '', //选中背景图片
name: '',
ShowType: 0, //0-组件,1-模板
ComponentName: "", //组件名称
url: "", //组件URL
TemplateId: 0,
TemplateShowName: "",
isShow: 1, //1-显示，0-隐藏
}
this.navData.data.navs.push(obj);
},
//删除导航图标
delIcon(index) {
this.navData.data.navs.splice(index, 1);
},
//选择图片
SelectId(msg) {
if (this.selectType == 1) {
this.navData.data.backgroundPicUrl = msg.url;
} else {
if (this.checkType == 1) {
this.navData.data.navs[this.commonIndex].icon = msg.url;
} else if (this.checkType == 2) {
this.navData.data.navs[this.commonIndex].checkIcon = msg.url;
} else if (this.checkType == 3) {
this.navData.data.navs[this.commonIndex].checkBgImg = msg.url;
}
}
this.choicImg = false;
},
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//选取图片
choiceMyImg(index, type) {
this.choicImg = true;
this.commonIndex = index;
this.selectType = 2;
this.checkType = type;
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
} }
return str;
},
//添加导航图标
addNavigatiton() {
let obj = {
icon: '',
checkIcon: '', //选中导航图标
checkBgImg: '', //选中背景图片
name: '',//名称
ShowType: 0, //0-组件,1-模板
ComponentName: "", //组件名称
url: "", //组件URL
TemplateId: 0,
TemplateShowName: "",
isShow: 1, //1-显示，0-隐藏
}
this.navData.data.navs.push(obj);
},
//删除导航图标
delIcon(index) {
this.navData.data.navs.splice(index, 1);
}, },
mounted() {
//选择图片
SelectId(msg) {
if (this.selectType == 1) {
this.navData.data.backgroundPicUrl = msg.url;
} else {
if (this.checkType == 1) {
this.navData.data.navs[this.commonIndex].icon = msg.url;
} else if (this.checkType == 2) {
this.navData.data.navs[this.commonIndex].checkIcon = msg.url;
} else if (this.checkType == 3) {
this.navData.data.navs[this.commonIndex].checkBgImg = msg.url;
}
}
this.choicImg = false;
},
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit('getSord', this.index, IsUp);
},
//选取图片
choiceMyImg(index, type) {
this.choicImg = true;
this.commonIndex = index;
this.selectType = 2;
this.checkType = type;
},
//点击触发父组件删除
delPlugin() {
this.$emit('comDelPlugin', this.index);
} }
}; },
mounted() {
}
};
</script> </script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment