Skip to content

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

样式更新

parent 8bf43e41
Show whitespace changes
Inline Side-by-side
Showing with 370 additions and 327 deletions
src/components/sallCenter/plugin/nav-page.vue
View file @ 86b7b92b
<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;
...@@ -28,48 +28,48 @@ ...@@ -28,48 +28,48 @@
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;
...@@ -79,9 +79,13 @@ ...@@ -79,9 +79,13 @@
border-radius: 0; border-radius: 0;
position: absolute; position: absolute;
margin-left: 0; margin-left: 0;
} }
.navapp-image-upload .pic-box { .nav-edit-options a {
color: #5CB3FD !important;
}
.navapp-image-upload .pic-box {
width: 70px; width: 70px;
height: 70px; height: 70px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -91,14 +95,14 @@ ...@@ -91,14 +95,14 @@
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;
...@@ -112,74 +116,107 @@ ...@@ -112,74 +116,107 @@
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 {
padding: 20px 0;
display: flex;
align-items: center;
}
.chooseformwork>div>div {
margin: 10px 0;
}
.chooseformwork>div {
flex: 1;
}
.chooseformwork .categroy {
padding-right: 32px;
}
.chooseformwork .isdisplay {
padding-right: 4px;
}
.chooseimgname-title {
margin-top: 10px;
}
.chooseformwork .chooseformwork-one {
display: flex;
align-items: center;
}
</style> </style>
<template> <template>
<div :class="{'active':navData.isCked}"> <div :class="{ 'active': navData.isCked }">
<div class="diy-component-options" v-if="navData.isCked"> <div class="diy-component-options" v-if="navData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button> <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
<el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button> <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
<el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)" <el-button type="primary" icon="el-icon-arrow-up" v-if="index > 0" @click="resetSord(0)"
style="right: -25px; top: 0;"></el-button> style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" <el-button type="primary" icon="el-icon-arrow-down" v-if="index != dataLeng - 1" @click="resetSord(1)"
style="right: -25px; top: 30px;"></el-button> style="right: -25px; top: 30px;"></el-button>
</div> </div>
<div class="diy-component-preview"> <div class="diy-component-preview">
<div class="diynav-container" :style="{backgroundColor:navData.data.backgroundColor,overflowX:navData.data.scroll?'auto':'hidden',backgroundPosition:bgPostion, <div class="diynav-container" :style="{
backgroundImage:'url(' + getIconLink(navData.data.backgroundPicUrl) + ')'}"> backgroundColor: navData.data.backgroundColor, overflowX: navData.data.scroll ? 'auto' : 'hidden', backgroundPosition: bgPostion,
backgroundImage: 'url(' + getIconLink(navData.data.backgroundPicUrl) + ')'
}">
<div flex="dir:left" style="width:750px;flex-wrap:wrap;"> <div flex="dir:left" style="width:750px;flex-wrap:wrap;">
<div class="Headernav-item" v-for="(item,index) in navData.data.navs" :key="index" <div class="Headernav-item" v-for="(item, index) in navData.data.navs" :key="index"
:style="{width:getNavWidth(navData.data.columns)}"> :style="{ width: getNavWidth(navData.data.columns) }">
<img :src="getIconLink(item.icon)" /> <img :src="getIconLink(item.icon)" />
<div :style="{color:navData.data.color}">{{item.name}}</div> <div :style="{ color: navData.data.color }">{{ item.name }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -206,85 +243,91 @@ ...@@ -206,85 +243,91 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="拉取商城导航"> <el-form-item label="拉取商城导航">
<el-button size="small" @click="isShowNavLink=true">选择</el-button> <el-button size="small" @click="isShowNavLink = true">选择</el-button>
</el-form-item> </el-form-item>
<!-- edit -->
<el-form-item label="导航图标"> <el-form-item label="导航图标">
<div flex="dir:top"> <div flex="dir:top">
<div class="edit-nav-item" v-for="(item,index) in navData.data.navs" :key="index"> <div class="edit-nav-item" v-for="(item, index) in navData.data.navs" :key="index">
<div class="nav-edit-options"> <div class="nav-edit-options">
<el-button type="primary" icon="el-icon-delete" @click="delIcon(index)" <el-button type="primary" icon="el-icon-delete" @click="delIcon(index)"
style="top: -6px; right: -31px;"></el-button> style="top: -6px; right: -31px;"></el-button>
<a v-if="index>0" @click="Move('up',index)" style="color:blue;cursor:pointer;"> <a v-if="index > 0" @click="Move('up', index)" style="color:blue;cursor:pointer;">
上移 上移
</a> </a>
<a v-if="index!=navData.data.navs.length-1" @click="Move('down',index)" <a v-if="index != navData.data.navs.length - 1" @click="Move('down', index)"
style="color:blue;cursor:pointer;"> style="color:blue;cursor:pointer;">
下移 下移
</a> </a>
</div> </div>
<div flex="dir:left box:first cross:center"> <div class="chooseimgname">
<div> <div>
<div class="navapp-image-upload"> <div class="navapp-image-upload">
<div flex="main:center cross:center" @click="choiceMyImg(index,1)" class="pic-box" <p class="chooseimgname-title">默认图标</p>
:style="{backgroundImage:'url(' + getIconLink(item.icon) + ')'}"> <div flex="main:center cross:center" @click="choiceMyImg(index, 1)" class="pic-box"
<i class="el-icon-picture-outline" v-if="item.icon==''"></i> :style="{ backgroundImage: 'url(' + getIconLink(item.icon) + ')' }">
<i class="el-icon-picture-outline" v-if="item.icon == ''"></i>
<div class="size-tip">88 × 88</div> <div class="size-tip">88 × 88</div>
<el-button type="danger" v-if="item.icon!=''" class="image-delete" size="mini" <el-button type="danger" v-if="item.icon != ''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="item.icon=''" circle></el-button> icon="el-icon-close" @click.stop="item.icon = ''" circle></el-button>
</div> </div>
</div> </div>
</div> </div>
<div flex="dir:left box:first cross:center"> <div flex="dir:left box:first cross:center">
<div> <div>
<div class="navapp-image-upload"> <div class="navapp-image-upload">
<div flex="main:center cross:center" @click="choiceMyImg(index,2)" class="pic-box" <p class="chooseimgname-title">选中图标</p>
:style="{backgroundImage:'url(' + getIconLink(item.checkIcon) + ')'}"> <div flex="main:center cross:center" @click="choiceMyImg(index, 2)" class="pic-box"
<i class="el-icon-picture-outline" v-if="item.checkIcon==''"></i> :style="{ backgroundImage: 'url(' + getIconLink(item.checkIcon) + ')' }">
<i class="el-icon-picture-outline" v-if="item.checkIcon == ''"></i>
<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>
</div> </div>
<div flex="dir:left box:first cross:center">
<div> <div>
<div style="margin-bottom:5px;"> <div class="navapp-image-upload">
<el-input type="text" placeholder="名称" v-model="item.name" size="small"></el-input> <p class="chooseimgname-title">选中背景</p>
<div flex="main:center cross:center" @click="choiceMyImg(index, 3)" class="pic-box"
:style="{ backgroundImage: 'url(' + getIconLink(item.checkBgImg) + ')' }">
<i class="el-icon-picture-outline" v-if="item.checkBgImg == ''"></i>
<div class="size-tip">88 × 88</div>
<el-button type="danger" v-if="item.checkBgImg != ''" class="image-delete" size="mini"
icon="el-icon-close" @click.stop="item.checkBgImg = ''" circle></el-button>
</div> </div>
<div style="margin-bottom:5px;">
默认颜色
<el-color-picker v-model="item.color" size="small"></el-color-picker>
<el-input type="text" v-model="item.color" size="small" style="width: 80px; margin-right: 25px;">
</el-input>
</div> </div>
<div style="margin-bottom:5px;">
选中颜色：
<el-color-picker v-model="item.checkColor" size="small"></el-color-picker>
<el-input type="text" v-model="item.checkColor" size="small"
style="width: 80px; margin-right: 25px;">
</el-input>
</div> </div>
</div>
<div style="margin-bottom:5px;"> </div>
<div class="chooseformwork">
<div>
<div class="chooseformwork-one" style="margin-bottom:5px;">
<span class="categroy">类型</span>
<el-radio-group v-model="item.ShowType"> <el-radio-group v-model="item.ShowType">
<el-radio :label="0">组件</el-radio> <el-radio :label="0">组件</el-radio>
<el-radio :label="1">模板</el-radio> <el-radio :label="1">模板</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div style="margin-bottom:5px;"> <div class="chooseformwork-one" style="margin-bottom:5px;">
<span class="isdisplay">是否显示</span>
<el-radio-group v-model="item.isShow"> <el-radio-group v-model="item.isShow">
<el-radio :label="1">显示</el-radio> <el-radio :label="1">显示</el-radio>
<el-radio :label="0">隐藏</el-radio> <el-radio :label="0">隐藏</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div v-if="item.ShowType==0" style="margin-bottom:5px;"> </div>
<div>
<div v-if="item.ShowType == 0" style="margin-bottom:5px;">
<el-input type="text" v-model="item.ComponentName" placeholder="选择组件" size="small"> <el-input type="text" v-model="item.ComponentName" placeholder="选择组件" size="small">
<el-button slot="append" @click="isShowModule=true,commonIndex=index">选择组件</el-button> <el-button slot="append" @click="isShowModule = true, commonIndex = index">选择组件</el-button>
</el-input> </el-input>
</div> </div>
<div v-if="item.ShowType==1" style="margin-bottom:5px;"> <div v-if="item.ShowType == 1" style="margin-bottom:5px;">
<el-input type="text" v-model="item.TemplateShowName" placeholder="点击选择模板" size="small"> <el-input type="text" v-model="item.TemplateShowName" placeholder="点击选择模板" size="small">
<el-button slot="append" @click="isShowModule=true,commonIndex=index">选择模板</el-button> <el-button slot="append" @click="isShowModule = true, commonIndex = index">选择模板</el-button>
</el-input> </el-input>
</div> </div>
</div> </div>
...@@ -305,34 +348,34 @@ ...@@ -305,34 +348,34 @@
</el-form-item> </el-form-item>
<el-form-item label="上传背景" v-if="navData.data.showImg"> <el-form-item label="上传背景" v-if="navData.data.showImg">
<div style="line-height:normal;display:inline-block;"> <div style="line-height:normal;display:inline-block;">
<div class="navigation_pic_boxDiv" @click="choicImg=true,selectType=1" flex="main:center cross:center" <div class="navigation_pic_boxDiv" @click="choicImg = true, selectType = 1" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(navData.data.backgroundPicUrl) + ')'}"> :style="{ backgroundImage: 'url(' + getIconLink(navData.data.backgroundPicUrl) + ')' }">
<i class="el-icon-picture-outline" v-if="navData.data.backgroundPicUrl==''"></i> <i class="el-icon-picture-outline" v-if="navData.data.backgroundPicUrl == ''"></i>
<el-button type="danger" class="image-delete" v-if="navData.data.backgroundPicUrl!=''" size="mini" <el-button type="danger" class="image-delete" v-if="navData.data.backgroundPicUrl != ''" size="mini"
icon="el-icon-close" @click.stop="navData.data.backgroundPicUrl=''" circle></el-button> icon="el-icon-close" @click.stop="navData.data.backgroundPicUrl = ''" circle></el-button>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="图片位置" v-if="navData.data.showImg"> <el-form-item label="图片位置" v-if="navData.data.showImg">
<div flex="main:justify wrap:wrap" class="divbg_position"> <div flex="main:justify wrap:wrap" class="divbg_position">
<div :class="{'bg_active':navData.data.position==1}" <div :class="{ 'bg_active': navData.data.position == 1 }"
@click="navData.data.position=1,selectPosition('left top')"></div> @click="navData.data.position = 1, selectPosition('left top')"></div>
<div :class="{'bg_active':navData.data.position==2}" <div :class="{ 'bg_active': navData.data.position == 2 }"
@click="navData.data.position=2,selectPosition('center top')"></div> @click="navData.data.position = 2, selectPosition('center top')"></div>
<div :class="{'bg_active':navData.data.position==3}" <div :class="{ 'bg_active': navData.data.position == 3 }"
@click="navData.data.position=3,selectPosition('right top')"></div> @click="navData.data.position = 3, selectPosition('right top')"></div>
<div :class="{'bg_active':navData.data.position==4}" <div :class="{ 'bg_active': navData.data.position == 4 }"
@click="navData.data.position=4,selectPosition('left center')"></div> @click="navData.data.position = 4, selectPosition('left center')"></div>
<div :class="{'bg_active':navData.data.position==5}" <div :class="{ 'bg_active': navData.data.position == 5 }"
@click="navData.data.position=5,selectPosition('center center')"></div> @click="navData.data.position = 5, selectPosition('center center')"></div>
<div :class="{'bg_active':navData.data.position==6}" <div :class="{ 'bg_active': navData.data.position == 6 }"
@click="navData.data.position=6,selectPosition('right center')"></div> @click="navData.data.position = 6, selectPosition('right center')"></div>
<div :class="{'bg_active':navData.data.position==7}" <div :class="{ 'bg_active': navData.data.position == 7 }"
@click="navData.data.position=7,selectPosition('left bottom')"></div> @click="navData.data.position = 7, selectPosition('left bottom')"></div>
<div :class="{'bg_active':navData.data.position==8}" <div :class="{ 'bg_active': navData.data.position == 8 }"
@click="navData.data.position=8,selectPosition('center bottom')"></div> @click="navData.data.position = 8, selectPosition('center bottom')"></div>
<div :class="{'bg_active':navData.data.position==9}" <div :class="{ 'bg_active': navData.data.position == 9 }"
@click="navData.data.position=9,selectPosition('right bottom')"></div> @click="navData.data.position = 9, selectPosition('right bottom')"></div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="填充方式" v-if="navData.data.showImg"> <el-form-item label="填充方式" v-if="navData.data.showImg">
...@@ -343,12 +386,12 @@ ...@@ -343,12 +386,12 @@
<el-radio :label="4">平铺满</el-radio> <el-radio :label="4">平铺满</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="背景图宽" v-if="navData.data.mode!=1"> <el-form-item label="背景图宽" v-if="navData.data.mode != 1">
<el-slider v-model="navData.data.backgroundWidth" show-input :show-input-controls='false' <el-slider v-model="navData.data.backgroundWidth" show-input :show-input-controls='false'
style="float:left;width:95%;"></el-slider> style="float:left;width:95%;"></el-slider>
<div style="float:right;">%</div> <div style="float:right;">%</div>
</el-form-item> </el-form-item>
<el-form-item label="背景图高" v-if="navData.data.mode!=1"> <el-form-item label="背景图高" v-if="navData.data.mode != 1">
<el-slider v-model="navData.data.backgroundHeight" show-input :show-input-controls='false' <el-slider v-model="navData.data.backgroundHeight" show-input :show-input-controls='false'
style="float:left;width:95%;"></el-slider> style="float:left;width:95%;"></el-slider>
<div style="float:right;">%</div> <div style="float:right;">%</div>
...@@ -376,10 +419,10 @@ ...@@ -376,10 +419,10 @@
</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 {
...@@ -450,9 +493,9 @@ ...@@ -450,9 +493,9 @@
addNavigatiton() { addNavigatiton() {
let obj = { let obj = {
icon: '', icon: '',
color: '', //默认颜色
checkIcon: '', //选中导航图标 checkIcon: '', //选中导航图标
checkColor: '', //选中颜色 checkBgImg: '', //选中背景图片
name: '', name: '',
ShowType: 0, //0-组件,1-模板 ShowType: 0, //0-组件,1-模板
ComponentName: "", //组件名称 ComponentName: "", //组件名称
...@@ -500,5 +543,5 @@ ...@@ -500,5 +543,5 @@
mounted() { 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