Skip to content

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

增加页面

parent d559dd3f
Hide whitespace changes
Inline Side-by-side
Showing with 918 additions and 4 deletions
src/assets/css/zkcss.css
View file @ cbe51ad9
...@@ -43,3 +43,9 @@ input, textarea, select{ ...@@ -43,3 +43,9 @@ input, textarea, select{
word-break: break-all; word-break: break-all;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
.el-card__header {
padding: 18px 20px;
border-bottom: 1px solid #EBEEF5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
src/components/StoreDesign/customPoster.vue 0 → 100644
View file @ cbe51ad9
<style>
.custom_Header{
padding: 0 20px;
height: 56px;
line-height: 56px;
background-color: #fff;
margin-bottom: 15px;
}
.custom_Main{
display:flex;
}
.custom_mobile_box{
width: 400px;
height: 740px;
padding: 35px 11px;
background-color: #fff;
border-radius: 30px;
margin-right: 20px;
display: flex;
flex-direction: column;
}
.custom_bg_box{
position: relative;
border: 1px solid #e2e3e3;
width: 750px;
height: 1334px;
zoom: 0.5;
}
.custom_bg_pic{
background:url('../../assets/img/customBg.jpg') no-repeat;
width: 100%;
height: 100%;
background-size:100% 100%;
background-position: center;
}
.custom_AppImage{
background:url('../../assets/img/default_qr_code.png') no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
}
.custom_formBody{
padding: 20px 35% 20px 20px;
background-color: #fff;
margin-bottom: 20px;
width: 100%;
height: 100%;
position: relative;
min-width: 640px;
display: flex;
flex-direction: column;
}
.custom_component{
width: 100px;
height: 100px;
cursor: pointer;
position: relative;
padding: 10px 0;
border: 1px solid #e2e2e2;
margin: 15px 15PX 0 0;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.ccustom_itemremove{
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 28px;
height: 28px;
}
.custom_bottom{
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
border-radius:4px;
margin-top:35px;
}
.customShareBtn{
position: absolute !important;
bottom: -52px;
left: 0;
}
.customShareBtn .el-button--small{
padding:9px 25px;
}
.Custom_active{
border:1px solid #7BBDFC;
}
.custom_headerImg{
background:url('../../assets/img/storeDesign/default_head.png') no-repeat;
background-size: cover;
background-position: center center;
border-radius: 50%;
position: absolute;
}
.poster_bg_box{
position: relative;
border: 2px solid #e2e3e3;
width: 750px;
height: 1334px;
zoom: 0.5;
overflow: hidden;
}
.poster_User{
margin-top: 96px;
margin-bottom: 64px;
}
.poster_User img{
height: 90px;
width: 90px;
border-radius: 50%;
margin-left: 24px;
display: block;
}
.poster_User div{
background: #f1f1f1;
padding: 0 24px;
height: 54px;
color: #4b4b4b;
margin-left: 24px;
border-radius: 30px;
}
.poster_goodImg{
margin: 0 auto;
height: 702px;
width: 702px;
overflow: hidden;
border-radius: 16px 16px 0 0;
}
.goodsone_bg{
height: 310px;
margin: 0 auto;
width: 702px;
padding: 0 28px;
background: #ffffff;
border-radius: 0 0 16px 16px;
}
.goods-name{
padding: 28px 0;
font-size: 34px;
color: #353535;
}
.goods_price{
padding-top: 50px;
color: #ff4544;
}
.goods_remark{
margin-top: 28px;
color: #999999;
font-size: 28px;
}
.goodsone_bg img{
height: 230px;
width: 230px;
margin-left: auto;
display: block;
border-radius: 50%;
}
.custom_Second{
height: 750px;
width: 750px;
overflow: hidden;
}
.custom_SecondBG{
background-image: url('../../assets/img/storeDesign/style-two-end.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 600px;
width: 702px;
position: relative;
left: 24px;
top: -40px;
padding: 0 24px;
}
.cuSecond_goodsName{
font-size: 34px;
color: #353535;
padding-top: 40px;
}
.customSecond_user{
height: 96px;
width: 96px;
border-radius: 50%;
margin-left: 24px;
display: block;
}
.CusSecondRemark{
height: 52px;
width: 100%;
padding: 0 24px;
color: #353535;
background-color: #f1f1f1;
font-size: 24px;
border-radius: 30px;
margin-bottom: 70px;
}
.Second_qrcode{
height: 230px;
width: 230px;
display: block;
margin-left: auto;
}
.three_User img{
height: 97px;
width: 97px;
border-radius: 50%;
margin-left: 35px;
display: block;
}
.app-style-three .three_User div:after {
content: "";
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url('../../assets/img/storeDesign/three-love.png');
height: 24px;
width: 24px;
display: inline-block;
margin-left: 8px;
}
.cusThree_name {
font-size: 34px;
padding-top: 28px;
color: #353535;
}
.cusThree_price {
padding-top: 28px;
color: #ff4544;
}
.cusThree_qrcode {
width: 702px;
border-top: 1px solid #c9c9c9;
height: 278px;
margin: 0 auto;
margin-top: 24px;
}
.cusThree_qrcode div{
margin-top: 20px;
margin-left: 24px;
font-size: 28px;
color: #353535;
}
.app-style-four .user {
margin-top: 35px;
margin-bottom: 35px;
}
.app-style-four .user img {
height: 90px;
width: 90px;
border-radius: 50%;
margin-left: 24px;
display: block;
}
.app-style-four .user div {
background: #f1f1f1;
padding: 0 24px;
height: 54px;
color: #4b4b4b;
margin-left: 24px;
border-radius: 30px;
}
.app-style-four .four-box {
height: 1150px;
background-color: #FFFFFF;
margin: 0 auto;
width: 702px;
border-radius: 16px;
padding: 0 24px;
}
.app-style-four .goods-name {
font-size: 34px;
padding-top: 26px;
color: #353535;
}
.app-style-four .price {
padding-top: 60px;
color: #ff4544;
}
.app-style-four .goods-image {
height: 650px;
width: 650px;
margin-top: 60px;
}
.app-style-four .qrcode img {
height: 150px;
width: 150px;
margin-top: 25px;
}
.app-style-four .qrcode div {
margin-top: 22px;
margin-bottom: 26px;
font-size: 24px;
color: #999999;
}
.poster-style-box{
cursor: pointer;
display: inline-block;
border: 1px solid #E2E2E2;
border-radius: 3px;
height: 245px;
width: 160px;
margin: 5px;
padding: 0 5px;
}
.custom_rightCheck .el-radio{
height:32px;
line-height: 32px;
}
.custom_grid{
flex-wrap: wrap;
height: 100px;
width: 100%;
background: #E6F4FF;
border: 1px solid #b8b8b8;
}
.poster-pic-box {
cursor: pointer;
display: inline-block;
border: 1px solid #E2E2E2;
border-radius: 3px;
height: 147px;
width: 112px;
margin: 5px;
padding: 0 5px;
}
.customSecond_btmdiv{
border-top: 1px solid #E3E3E3;
position: absolute;
bottom: 0;
background-color: #ffffff;
z-index: 999;
padding: 10px;
width: 100%;
}
</style>
<template>
<div class="customPoster">
<div class="custom_Header">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="分销海报" name="1"></el-tab-pane>
<el-tab-pane label="商品海报" name="2"></el-tab-pane>
<el-tab-pane label="专题海报" name="3"></el-tab-pane>
</el-tabs>
</div>
<template v-if="checkIndex==1">
<div class="custom_Main">
<div class="custom_mobile_box">
<div class="custom_bg_box">
<div class="custom_bg_pic">
<div class="custom_headerImg" v-if="ShareMsg[0].isShow==1" :style="{left:ShareMsg[0].leftMargin+'px',
width:ShareMsg[0].size+'px',height:ShareMsg[0].size+'px',top:ShareMsg[0].upMargin+'px'}"></div>
</div>
<span ref="nameSpan" style="position:absolute;display:inline-block;" v-if="ShareMsg[1].isShow==1" :style="{left:ShareMsg[1].leftMargin+'px',
fontSize:ShareMsg[1].size+'px',top:ShareMsg[1].upMargin+'px',color:ShareMsg[1].nameColor}">用户昵称</span>
<div class="custom_AppImage" v-if="ShareMsg[2].isShow==1" :style="{left:ShareMsg[2].leftMargin+'px',
width:ShareMsg[2].size+'px',height:ShareMsg[2].size+'px',top:ShareMsg[2].upMargin+'px',
'borderRadius':ShareMsg[2].ShapeStyle==1?'50%':'0%'}"></div>
</div>
</div>
<div class="custom_formBody">
<div style="margin-bottom:15px;">
<el-tooltip class="item" effect="dark" content="建议尺寸:750 * 1334" placement="top" >
<el-button size="mini">更换背景图</el-button>
</el-tooltip>
</div>
<div flex="wrap:wrap">
<div class="custom_component" v-for="(item,index) in ShareMsg" :key="index" :class="{'Custom_active':item.isActive==1}" @click="getCHecked(item,index)">
<img v-if="index==0" src="../../assets/img/storeDesign/icon_head.png" alt=""/>
<img v-else-if="index==1" src="../../assets/img/storeDesign/icon_name.png" alt=""/>
<img v-else src="../../assets/img/storeDesign/icon_qr_code.png" alt=""/>
<div>{{item.name}}</div>
<img class="ccustom_itemremove" v-if="item.isShow==1" @click.stop="item.isShow=0,isShowShareIndex=0" src="../../assets/img/storeDesign/icon_delete.png" alt=""/>
</div>
</div>
<div class="custom_bottom">
<template v-if="isShowShareIndex==1">
<div class="el-card__header">头像设置</div>
<el-form label-width="20%" style="padding:20px;">
<el-form-item label="大小" size="small">
<el-slider v-model="ShareMsg[0].size" @change="getCodeMax(ShareMsg[0].size,0)" :max="300" show-input></el-slider>
</el-form-item>
<el-form-item label="上边距" size="small">
<el-slider v-model="ShareMsg[0].upMargin" :max="headerMaxTop" show-input></el-slider>
</el-form-item>
<el-form-item label="左边距" size="small">
<el-slider v-model="ShareMsg[0].leftMargin" :max="headerMaxLeft" show-input></el-slider>
</el-form-item>
</el-form>
</template>
<template v-if="isShowShareIndex==2">
<div class="el-card__header">昵称设置</div>
<el-form label-width="20%" style="padding:20px;">
<el-form-item label="大小" size="small">
<el-slider v-model="ShareMsg[1].size" @change="getCodeMax(ShareMsg[1].size,1)" :max="80" show-input></el-slider>
</el-form-item>
<el-form-item label="上边距" size="small">
<el-slider v-model="ShareMsg[1].upMargin" :max="nickNameTop" show-input></el-slider>
</el-form-item>
<el-form-item label="左边距" size="small">
<el-slider v-model="ShareMsg[1].leftMargin" :max="nickNameLeft" show-input></el-slider>
</el-form-item>
<el-form-item label="颜色" size="small">
<el-color-picker v-model="ShareMsg[1].nameColor"></el-color-picker>
</el-form-item>
</el-form>
</template>
<template v-if="isShowShareIndex==3">
<div class="el-card__header">二维码设置</div>
<el-form label-width="20%" style="padding:20px;">
<el-form-item label="样式" size="small">
<el-radio-group v-model="ShareMsg[2].ShapeStyle">
<el-radio :label="1">圆形</el-radio>
<el-radio :label="2">方形</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="大小" size="small">
<el-slider v-model="ShareMsg[2].size" @change="getCodeMax(ShareMsg[2].size,2)" :max="300" show-input></el-slider>
</el-form-item>
<el-form-item label="上边距" size="small">
<el-slider v-model="ShareMsg[2].upMargin" :max="maxTwocodeTop" show-input></el-slider>
</el-form-item>
<el-form-item label="左边距" size="small">
<el-slider v-model="ShareMsg[2].leftMargin" :max="maxTwocodeLeft" show-input></el-slider>
</el-form-item>
</el-form>
</template>
</div>
<div class="customShareBtn">
<el-button size="small" type="primary">保存</el-button>
</div>
</div>
</div>
</template>
<template v-else-if="checkIndex==2">
<div class="custom_Main">
<div class="custom_mobile_box">
<div class="poster_bg_box">
<template v-if="postersMsg.PosterStyle==1">
<div flex="dir:left cross:center" class="poster_User">
<img src="../../assets/img/storeDesign/default_head.png" alt=""/>
<div flex="dir:left cross:center main-center">用户昵称向您推荐一个好物</div>
</div>
<div class="poster_goodImg">
<PictureCheck :pictureNum="postersMsg.pictureNum"></PictureCheck>
</div>
<div flex="dir:left cross:center" class="goodsone_bg">
<div flex="dir:top main:center">
<div class="goods-name">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="goods_price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
<div class="goods_remark">长按识别小程序码进入</div>
</div>
<img src="../../assets/img/default_qr_code.png" alt=""/>
</div>
</template>
<template v-else-if="postersMsg.PosterStyle==2">
<div class="custom_Second">
<PictureCheck :pictureNum="postersMsg.pictureNum"></PictureCheck>
</div>
<div class="custom_SecondBG">
<div class="cuSecond_goodsName">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="goods_price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
<div flex="dir:left cross:center" style="margin-top: 90px;">
<div flex="dir:top">
<div flex="dir:left cross:center" style="margin:96px 0 15px 0;">
<img class="customSecond_user" src="../../assets/img/storeDesign/default_head.png" alt=""/>
<div style="color:#353535;margin-left:26px;">用户昵称</div>
</div>
<div flex="dir-left main:center cross:center" class="CusSecondRemark">
<div>长按识别小程序码进入</div>
<img src="../../assets/img/storeDesign/three-arrow.png" alt="">
</div>
</div>
<img src="../../assets/img/default_qr_code.png" alt="" class="Second_qrcode">
</div>
</div>
</template>
<template v-else-if="postersMsg.PosterStyle==3">
<div class="app-style-three">
<div flex="dir:left cross:center" class="three_User" style="margin:40px 0 38px 0;">
<img src="../../assets/img/storeDesign/default_head.png">
<div style="margin-left:30px;">
我看上了这款商品 <br>
帮我看看咋样啊~ <br>
比心
</div>
</div>
</div>
<div style="width:680px;height:680px;margin:0 auto;">
<PictureCheck :pictureNum="postersMsg.pictureNum"></PictureCheck>
</div>
<div flex="dir:top cross:center">
<div class="cusThree_name">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="cusThree_price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
</div>
<div flex="dir:left cross:center main:center" class="cusThree_qrcode">
<img src="../../assets/img/default_qr_code.png" style="width:230px;height:230px;" alt=""/>
<div>长按识别小程序码 即可查看</div>
</div>
</template>
<template v-else-if="postersMsg.PosterStyle==4">
<div class="app-style-four">
<div flex="dir:left cross:center" class="user"><img src="../../assets/img/storeDesign/default_head.png">
<div flex="dir:left cross:center main-center">
用户昵称向您推荐一个好物
</div>
</div>
<div class="four-box">
<div class="goods-name">商品名称|商品名称</div>
<div flex="dir:left cross:bottom" class="price">
<div style="font-size: 32px; line-height: 1;">￥</div>
<div style="font-size: 56px; line-height: 1;">160</div>
</div>
<div class="goods-image">
<PictureCheck :pictureNum="postersMsg.pictureNum"></PictureCheck>
</div>
<div flex="cross:center dir:top" class="qrcode">
<img src="../../assets/img/default_qr_code.png" alt="">
<div>长按识别小程序码进入</div>
</div>
</div>
</div>
</template>
</div>
</div>
<div class="custom_formBody">
<div class="custom_rightCheck" style="padding:30px 0 50px;">
<el-form label-width="100px">
<el-form-item label="海报样式">
<el-radio-group v-model="postersMsg.PosterStyle" style="min-width:500px;">
<div class="poster-style-box" @click="postersMsg.PosterStyle=1">
<el-radio :label="1">样式一</el-radio>
<img src="../../assets/img/storeDesign/check1.png" alt="">
</div>
<div class="poster-style-box" @click="postersMsg.PosterStyle=2">
<el-radio :label="2">样式二</el-radio>
<img src="../../assets/img/storeDesign/check2.png" alt="">
</div>
<div class="poster-style-box" @click="postersMsg.PosterStyle=3">
<el-radio :label="3">样式三</el-radio>
<img src="../../assets/img/storeDesign/check3.png" alt="">
</div>
<div class="poster-style-box" @click="postersMsg.PosterStyle=4">
<el-radio :label="4">样式四</el-radio>
<img src="../../assets/img/storeDesign/check4.png" alt="">
</div>
</el-radio-group>
</el-form-item>
<el-form-item label="商品图数量">
<el-radio-group v-model="postersMsg.pictureNum" style="width:450px;">
<div class="poster-pic-box" @click="postersMsg.pictureNum=1">
<el-radio :label="1">一张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 100%;"></div>
</div>
</div>
<div class="poster-pic-box" @click="postersMsg.pictureNum=2">
<el-radio :label="2">二张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 100%;"></div>
</div>
</div>
<div class="poster-pic-box" @click="postersMsg.pictureNum=3">
<el-radio :label="3">三张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 100%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%;"></div>
</div>
</div>
<div class="poster-pic-box" @click="postersMsg.pictureNum=4">
<el-radio :label="4">四张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%;"></div>
</div>
</div>
<div class="poster-pic-box" @click="postersMsg.pictureNum=5">
<el-radio :label="5">五张</el-radio>
<div flex="dir:left" class="custom_grid">
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184); border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 33.3%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 50%; width: 50%; border-right: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 16.6%; width: 50%; border-bottom: 1px solid rgb(184, 184, 184);"></div>
<div style="height: 33.3%; width: 50%;"></div>
</div>
</div>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<div class="customSecond_btmdiv">
<el-button size="small" type="primary">保存</el-button>
</div>
</div>
</div>
</template>
<template v-else>
<thematicPosters></thematicPosters>
</template>
</div>
</template>
<script>
import PictureCheck from "../common/PictureCheck.vue"
import thematicPosters from "../StoreDesign/thematicPosters.vue"
export default {
data() {
return {
activeName:'1',
checkIndex:1,
//二维码最大上边距
maxTwocodeTop:0,
//二维码最大左边距
maxTwocodeLeft:0,
//昵称最大上边距
nickNameTop:0,
//昵称最大左边距
nickNameLeft:0,
//头像最大上边距
headerMaxTop:0,
//头像最大左边距
headerMaxLeft:0,
//分销海报判断显示那一坨
isShowShareIndex:1,
ShareMsg:[{
isActive:1,
isShow:0,
name:'头像',
//大小
size:120,
//上边距
upMargin:20,
//左边距
leftMargin:20
},{
isActive:0,
isShow:0,
name:'昵称',
//大小
size:40,
//上边距
upMargin:60,
//左边距
leftMargin:160,
nameColor:'rgb(0, 0, 0)'
},{
isActive:0,
isShow:1,
//形状
ShapeStyle:1,
name:'二维码',
//大小
size:162,
//上边距
upMargin:1022,
//左边距
leftMargin:76
}],
//商品海报msg
postersMsg:{
PosterStyle:1,
pictureNum:5
}
};
},
created() {
},
components: {
PictureCheck,
thematicPosters
},
methods: {
//切换
handleClick(tab){
this.checkIndex = tab.name;
},
//点击切换
getCHecked(item,index){
this.ShareMsg.forEach(x=>{
x.isActive=0;
})
item.isActive=1;
item.isShow=1;
this.isShowShareIndex=index+1
},
//拉伸二维码尺寸动态设置最大值
getCodeMax(chicun,num){
if(num==0){
this.headerMaxTop = 1334-chicun;
this.headerMaxLeft = 750-chicun;
}else if(num==1){
this.nickNameTop = 1334-chicun;
this.nickNameLeft = 750-chicun;
}else{
this.maxTwocodeTop=1334-chicun;
this.maxTwocodeLeft = 750-chicun;
}
}
},
mounted() {
this.maxTwocodeTop=1334-this.ShareMsg[2].size;
this.maxTwocodeLeft = 750-this.ShareMsg[2].size;
this.nickNameTop = 1334-this.ShareMsg[1].size;
this.nickNameLeft = 750-this.ShareMsg[1].size;
this.headerMaxTop = 1334-this.ShareMsg[0].size;
this.headerMaxLeft = 750-this.ShareMsg[0].size;
}
};
</script>
\ No newline at end of file
src/components/StoreDesign/thematicPosters.vue 0 → 100644
View file @ cbe51ad9
<template>
<div>
123
</div>
</template>
\ No newline at end of file
src/components/common/PictureCheck.vue 0 → 100644
View file @ cbe51ad9
<style>
.app-style-multi-map .goods-one, .goods-two, .goods-three, .goods-four {
height: 100%;
width: 100%;
}
.app-style-multi-map .goods-three .el-image:nth-child(1) {
height: 50%;
width: 100%;
}
.app-style-multi-map .goods-three .el-image:nth-child(2) {
height: 50%;
width: 50%;
}
.app-style-multi-map .goods-three .el-image:nth-child(3) {
height: 50%;
width: 50%;
}
.goods-four .el-image{
width:50%;
height:50%;
}
.postimage_inner{
vertical-align: top;
width: 100%;
height: 100%;
object-fit: cover;
}
.goods-two .el-image{
height: 50%;
width: 100%;
}
.goods_one img{
width:100%;
height:100%;
}
.app-style-multi-map {
height: 100%;
width: 100%;
overflow: hidden;
}
.app-style-multi-map > div {
flex-wrap: wrap;
}
.app-style-multi-map .goods-five {
height: 100%;
width: 100%;
position: relative;
}
.app-style-multi-map .goods-five .el-image:nth-child(1) {
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 50%;
}
.app-style-multi-map .goods-five .el-image:nth-child(2) {
position: absolute;
top: 50%;
left: 0;
height: 50%;
width: 50%;
}
.app-style-multi-map .goods-five .el-image:nth-child(3) {
position: absolute;
top: 0;
left: 50%;
height: 33.333%;
width: 50%;
}
.app-style-multi-map .goods-five .el-image:nth-child(4) {
position: absolute;
top: 33.33%;
left: 50%;
height: 33.333%;
width: 50%;
}
.app-style-multi-map .goods-five .el-image:nth-child(5) {
position: absolute;
top: 66.66%;
left: 50%;
height: 33.333%;
width: 50%;
}
</style>
<template>
<div class="app-style-multi-map">
<template v-if="pictureNum==1">
<div class="goods_one">
<img src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
</template>
<template v-else-if="pictureNum==2">
<div flex="dir:left" class="goods-two">
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
</div>
</template>
<template v-else-if="pictureNum==3">
<div flex="dir:left" class="goods-three">
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
</div>
</template>
<template v-else-if="pictureNum==4">
<div flex="dir:left" class="goods-four">
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
</div>
</template>
<template v-else-if="pictureNum==5">
<div flex="dir:left" class="goods-five">
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
<div class="el-image">
<img class="postimage_inner" src="../../assets/img/storeDesign/goods-url.png" alt=""/>
</div>
</div>
</template>
</div>
</template>
<script>
export default {
props: ["pictureNum"],
data() {
return {
};
},
created() {
},
methods: {
},
mounted() {
}
};
</script>
src/components/zanIndex.vue
View file @ cbe51ad9
...@@ -162,10 +162,10 @@ ...@@ -162,10 +162,10 @@
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.el-card__header{ .el-zanIndex_btmheader{
padding: 14px 20px; padding: 14px 20px;
} }
.el-card__header span{ .el-zanIndex_btmheader span{
/* float:left; */ /* float:left; */
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
...@@ -376,7 +376,7 @@ ...@@ -376,7 +376,7 @@
</div> </div>
<div class="zantable-area"> <div class="zantable-area">
<div class="el-card"> <div class="el-card">
<div class="el-card__header"> <div class="el-zanIndex_btmheader">
<span>商品购买力TOP排行</span> <span>商品购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button> <el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</div> </div>
...@@ -434,7 +434,7 @@ ...@@ -434,7 +434,7 @@
</div> </div>
</div> </div>
<div class="el-card"> <div class="el-card">
<div class="el-card__header"> <div class="el-zanIndex_btmheader">
<span>用户购买力TOP排行</span> <span>用户购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button> <el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</div> </div>
......
src/router/index.js
View file @ cbe51ad9
...@@ -210,6 +210,12 @@ export default new Router({ ...@@ -210,6 +210,12 @@ export default new Router({
path: '/userCenter', path: '/userCenter',
name: 'userCenter', name: 'userCenter',
component: resolve => require(['@/components/StoreDesign/userCenter'], resolve), component: resolve => require(['@/components/StoreDesign/userCenter'], resolve),
},
//店铺管理 自定义海报
{
path: '/customPoster',
name: 'customPoster',
component: resolve => require(['@/components/StoreDesign/customPoster'], resolve),
} }
] ]
}, },
......
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