Skip to content

E
ElectricitySheep
Commit c4f771a8 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 2352d021
Hide whitespace changes
Inline Side-by-side
Showing with 191 additions and 29 deletions
src/components/sallCenter/plugin/banner.vue
View file @ c4f771a8
...@@ -2,12 +2,6 @@ ...@@ -2,12 +2,6 @@
.banner-container{ .banner-container{
background-color: #fff; background-color: #fff;
} }
.banner-container .el-carousel{
height:100%;
}
.banner-container .el-carousel__container{
height:100%;
}
.bannerStyle-item { .bannerStyle-item {
width: 100px; width: 100px;
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
...@@ -56,8 +50,9 @@ ...@@ -56,8 +50,9 @@
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
padding: 5px; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
position: relative;
} }
.navapp-image-upload .pic-box{ .banner_image_upload .pic-box{
width: 70px; width: 70px;
height: 70px; height: 70px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -79,7 +74,7 @@ ...@@ -79,7 +74,7 @@
position: absolute; position: absolute;
margin-left: 0; margin-left: 0;
} }
.navapp-image-upload .pic-box .size-tip { .banner_image_upload .pic-box .size-tip {
line-height: 1.35; line-height: 1.35;
text-align: center; text-align: center;
position: absolute; position: absolute;
...@@ -94,9 +89,32 @@ ...@@ -94,9 +89,32 @@
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
letter-spacing: -1px; letter-spacing: -1px;
} }
.navapp-image-upload .pic-box i { .banner_image_upload .pic-box i {
font-size: 22px; font-size: 12px;
color: #909399; color: #fff;
}
.banner_image_upload .image-delete {
position: absolute;
top: -10px;
right: -10px;
padding: 5px;
visibility: hidden;
z-index: 1;
}
.banner_image_upload:hover .image-delete{
visibility:visible;
}
.banner-container .banner-img {
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center;
}
.banner-container .banner-img-contain{
background-size: contain;
}
.banner-container .banner-img-cover{
background-size: cover;
} }
</style> </style>
<template> <template>
...@@ -109,22 +127,27 @@ ...@@ -109,22 +127,27 @@
</div> </div>
<div class="diy-component-preview"> <div class="diy-component-preview">
<div class="banner-container" :style="{height:banData.data.height+'px'}"> <div class="banner-container" :style="{height:banData.data.height+'px'}">
<el-carousel :interval="3000" arrow="always"> <el-carousel :interval="3000" arrow="always" v-if="banData.data.style==1" :height="banData.data.height+'px'">
<el-carousel-item v-for="item in 4" :key="item"> <el-carousel-item v-for="(item,index) in banData.data.banners" :key="index">
<h3>{{ item }}</h3> <div class="banner-img" :class="banData.data.fill==1?'banner-img-cover':'banner-img-contain'" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+item.picUrl+')'}"></div>
</el-carousel-item>
</el-carousel>
<el-carousel v-else :interval="4000" type="card" :height="banData.data.height+'px'">
<el-carousel-item v-for="(item,index) in banData.data.banners" :key="index">
<div class="banner-img" :class="banData.data.fill==1?'banner-img-cover':'banner-img-contain'" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+item.picUrl+')'}"></div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
</div> </div>
<div class="diy-component-edit" v-if="banData.isCked"> <div class="diy-component-edit" v-if="banData.isCked">
<el-form label-width="100px;"> <el-form label-width="100px">
<el-form-item label="样式"> <el-form-item label="样式">
<div flex="dir:left"> <div flex="dir:left">
<div class="bannerStyle-item banner_active"> <div class="bannerStyle-item" :class="{'banner_active':banData.data.style==1}" @click="banData.data.style=1">
<div class="banner-style-1"></div> <div class="banner-style-1"></div>
<div>样式1</div> <div>样式1</div>
</div> </div>
<div class="bannerStyle-item" style="margin-left:5px;"> <div class="bannerStyle-item" style="margin-left:5px;" :class="{'banner_active':banData.data.style==2}" @click="banData.data.style=2">
<div flex class="banner-style-2"> <div flex class="banner-style-2">
<div></div> <div></div>
<div></div> <div></div>
...@@ -151,14 +174,15 @@ ...@@ -151,14 +174,15 @@
<div flex="dir:top"> <div flex="dir:top">
<div class="banner-edit-item" v-for="(item,index) in banData.data.banners" :key="index"> <div class="banner-edit-item" v-for="(item,index) in banData.data.banners" :key="index">
<div class="banner-edit-options"> <div class="banner-edit-options">
<el-button type="primary" icon="el-icon-delete" @click="delBanner(index)" style="top: -6px; right: -31px;"></el-button> <el-button type="primary" icon="el-icon-delete" @click="delBanner(index)" style="position:absolute;top: -1px; right: -26px;"></el-button>
</div> </div>
<div flex="box:first"> <div flex="box:first">
<div> <div>
<div class="navapp-image-upload" style="margin-right:5px;"> <div class="banner_image_upload" style="margin-right:5px;">
<div flex="main:center cross:center" class="pic-box" :style="{backgroundImage:'url(' + item.picUrl + ')'}"> <div flex="main:center cross:center" @click="choiceMyImg(index)" class="pic-box" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + item.picUrl + ')'}">
<i class="el-icon-picture-outline" v-if="item.picUrl==''"></i> <i style="font-size:22px;color:#909399;" class="el-icon-picture-outline" v-if="item.picUrl==''"></i>
<div class="size-tip">720 × 250</div> <div class="size-tip">720 × 250</div>
<el-button type="danger" v-if="item.picUrl!=''" class="image-delete" size="mini" icon="el-icon-close" @click.stop="item.picUrl=''" circle></el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -183,21 +207,28 @@ ...@@ -183,21 +207,28 @@
<el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button> <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import chooseMeun from "../../common/chooseMeun.vue"; import chooseMeun from "../../common/chooseMeun.vue";
import ChooseImg from "@/components/global/ChooseImg.vue";
export default { export default {
props: ["banData","index","dataLeng"], props: ["banData","index","dataLeng"],
data() { data() {
return { return {
isShowLink:false, isShowLink:false,
choicImg:false,
commonIndex:0, commonIndex:0,
}; };
}, },
components: { components: {
chooseMeun, chooseMeun,
ChooseImg
}, },
created() { created() {
...@@ -228,8 +259,20 @@ ...@@ -228,8 +259,20 @@
this.banData.data.banners[this.commonIndex].url=obj.PageUrl; this.banData.data.banners[this.commonIndex].url=obj.PageUrl;
this.isShowLink = false; this.isShowLink = false;
}, },
//选取图片
choiceMyImg(index){
this.choicImg = true;
this.commonIndex=index;
},
//选择图片
SelectId(msg){
this.banData.data.banners[this.commonIndex].picUrl=msg.url;
this.choicImg=false;
},
//向父组件传值 并调用排序
resetSord(IsUp){
this.$emit('getSord', this.index,IsUp);
},
}, },
mounted() { mounted() {
......
src/components/sallCenter/plugin/navigationIcon.vue
View file @ c4f771a8
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + navData.data.backgroundPicUrl + ')'}"> backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + 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" :style="{width:getNavWidth(navData.data.columns)}"> <div class="Headernav-item" v-for="(item,index) in navData.data.navs" :key="index" :style="{width:getNavWidth(navData.data.columns)}">
<img :src="item.icon"/> <img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+item.icon"/>
<div style="color: rgb(53, 53, 53);">{{item.name}}</div> <div style="color: rgb(53, 53, 53);">{{item.name}}</div>
</div> </div>
</div> </div>
...@@ -175,7 +175,7 @@ ...@@ -175,7 +175,7 @@
<el-switch v-model="navData.data.scroll"></el-switch> <el-switch v-model="navData.data.scroll"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="拉取商城导航"> <el-form-item label="拉取商城导航">
<el-button size="small" @click="isShowLink=true">选择</el-button> <el-button size="small" @click="isShowNavLink=true">选择</el-button>
</el-form-item> </el-form-item>
<el-form-item label="导航图标"> <el-form-item label="导航图标">
<div flex="dir:top"> <div flex="dir:top">
...@@ -186,9 +186,10 @@ ...@@ -186,9 +186,10 @@
<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" class="pic-box" :style="{backgroundImage:'url(' + item.icon + ')'}"> <div flex="main:center cross:center" @click="choiceMyImg(index)" class="pic-box" :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>
<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" icon="el-icon-close" @click.stop="item.icon=''" circle></el-button>
</div> </div>
</div> </div>
</div> </div>
...@@ -217,7 +218,7 @@ ...@@ -217,7 +218,7 @@
</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" flex="main:center cross:center" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + navData.data.backgroundPicUrl + ')'}"> <div class="navigation_pic_boxDiv" @click="choicImg=true,selectType=1" flex="main:center cross:center" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + 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" icon="el-icon-close" @click.stop="navData.data.backgroundPicUrl=''" circle></el-button> <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>
</div> </div>
...@@ -297,6 +298,7 @@ ...@@ -297,6 +298,7 @@
commonIndex:0, commonIndex:0,
//选择图片弹窗 //选择图片弹窗
choicImg:false, choicImg:false,
selectType:1,
}; };
}, },
components: { components: {
...@@ -358,14 +360,33 @@ ...@@ -358,14 +360,33 @@
}, },
//选择图片 //选择图片
SelectId(msg){ SelectId(msg){
this.navData.data.backgroundPicUrl=msg.url; if(this.selectType==1){
this.navData.data.backgroundPicUrl=msg.url;
}else{
this.navData.data.navs[this.commonIndex].icon=msg.url;
}
this.choicImg=false; this.choicImg=false;
}, },
//向父组件传值 并调用排序 //向父组件传值 并调用排序
resetSord(IsUp){ resetSord(IsUp){
this.$emit('getSord', this.index,IsUp); this.$emit('getSord', this.index,IsUp);
},
//选取图片
choiceMyImg(index){
this.choicImg=true;
this.commonIndex=index;
this.selectType=2;
},
//判断是否包含http
getIconLink(url){
let str=''
if(url.indexOf('http')!=-1){
str=url
}else{
str= 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+url
}
return str;
} }
}, },
mounted() { mounted() {
......
src/components/sallCenter/plugin/rubik.vue 0 → 100644
View file @ c4f771a8
<style>
.diy-rubik .layout {
width: 750px;
position: relative;
}
.diy-rubik .layout .rubik {
position: absolute;
top: 0;
left: 0;
border: 1px dashed #c9c9c9;
cursor: pointer;
color: #c9c9c9;
z-index: 11;
}
.diy-component-preview{
background-color: #fff;
}
.diy-component-preview:hover {
box-shadow: inset 0 0 10000px rgba(0, 0, 0, .03);
}
</style>
<template>
<div :class="{'active':rubData.isCked}">
<div class="diy-component-options" v-if="rubData.isCked">
<el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></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)" style="right: -25px; top: 0;"></el-button>
<el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)" style="right: -25px; top: 30px;"></el-button>
</div>
<div class="diy-rubik">
<div class="diy-component-preview">
<div class="layout" style="height:360px;">
<div class="rubik" style="width:100%;height:100%;z-index:16;"></div>
<!-- <div flex="main:center cross:center" class="rubik" style="x: 0px; y: 0px; width: calc(100% - 0px); height: calc(100% - 0px); left: 0%; top: 0%;">
<span>宽度为750，不限高度</span>
</div> -->
</div>
</div>
<div class="diy-component-edit" v-if="rubData.isCked">
</div>
</div>
</div>
</template>
<script>
export default {
props: ["rubData","index","dataLeng"],
data() {
return {
};
},
created() {
},
methods: {
// 魔方展示样式(preview)
blockStyle(index) {
// if (index === 8) {
// let per = 750 / this.data.w;
// this.data.height = this.data.h * 750 / this.data.w;
// return `height: ${this.data.height}px;background-image: url('${this.img}');background-size: ${per}px ${per}px;`;
// } else {
// if (index === 0) {
// this.data.height = 'auto';
// return `height: ${this.data.list[0].pic_url ? 'auto' : '360px'}`;
// }
// return `height: ${this.style_list[index] ? this.style_list[index].height : 360}px`;
// }
},
},
mounted() {
}
};
</script>
src/components/sallCenter/templateEdit.vue
View file @ c4f771a8
...@@ -195,6 +195,7 @@ ...@@ -195,6 +195,7 @@
<search v-if="item.Id=='search'" :searchData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></search> <search v-if="item.Id=='search'" :searchData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></search>
<navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></navigationIcon> <navigationIcon v-if="item.Id=='nav'" :navData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></navigationIcon>
<banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></banner> <banner v-if="item.Id=='banner'" :banData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></banner>
<rubik v-if="item.Id=='rubik'" :rubData="item" @getSord="getSord" :index="index" :dataLeng="dataList.length"></rubik>
</div> </div>
</div> </div>
</div> </div>
...@@ -210,6 +211,7 @@ ...@@ -210,6 +211,7 @@
import search from "../sallCenter/plugin/search.vue" import search from "../sallCenter/plugin/search.vue"
import navigationIcon from "../sallCenter/plugin/navigationIcon.vue" import navigationIcon from "../sallCenter/plugin/navigationIcon.vue"
import banner from "../sallCenter/plugin/banner.vue" import banner from "../sallCenter/plugin/banner.vue"
import rubik from "../sallCenter/plugin/rubik.vue"
export default { export default {
data() { data() {
return { return {
...@@ -226,6 +228,7 @@ ...@@ -226,6 +228,7 @@
search, search,
navigationIcon, navigationIcon,
banner, banner,
rubik
}, },
methods: { methods: {
//获取左侧菜单 //获取左侧菜单
...@@ -280,6 +283,7 @@ ...@@ -280,6 +283,7 @@
} }
} }
this.dataList.push(navObj); this.dataList.push(navObj);
console.log(this.dataList,'this.dataList');
break; break;
case 'banner': case 'banner':
let banObj={ let banObj={
...@@ -294,6 +298,22 @@ ...@@ -294,6 +298,22 @@
} }
this.dataList.push(banObj); this.dataList.push(banObj);
break; break;
case 'rubik':
let rubObj={
Id:'rubik',
isCked:false,
data:{
style:-1,
space:0,
height:0,
w:1,
h:1,
list:[],
hotspot:[]
}
}
this.dataList.push(rubObj);
break;
} }
}, },
//给子组件调用 重新排序上移下移 //给子组件调用 重新排序上移下移
......
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