Skip to content

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

页面修改

parent 92231e60
Show whitespace changes
Inline Side-by-side
Showing with 285 additions and 217 deletions
src/components/StoreDesign/navigationIcon.vue
View file @ 6eb06a15
......@@ -23,7 +23,6 @@
</el-table-column>
<el-table-column label="导航图标" width="80">
<template slot-scope="scope">
<img :src="scope.row.NavIconImg">
</template>
</el-table-column>
......
src/components/StoreDesign/storeStyle.vue
View file @ 6eb06a15
<style>
.storeContent{
.storeContent {
background-color: #fff;
margin-top:10px;
padding:20px 0;
margin-top: 10px;
padding: 20px 0;
}
.theme_List{
width:60%;
.theme_List {
width: 60%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item-active {
border: 2px solid #3399ff!important;
border: 2px solid #3399ff !important;
}
.theme_List>div{
.theme_List>div {
display: flex;
justify-content:center;
justify-content: center;
align-items: center;
width: 127px;
height: 61px;
......@@ -27,14 +30,16 @@
overflow: hidden;
cursor: pointer;
}
.theme_color{
.theme_color {
width: 46px;
height: 33px;
margin-right: 5px;
transform-origin: 50% 50%;
position: relative;
}
.theme_color div{
.theme_color div {
width: 25px;
height: 25px;
border-radius: 5px;
......@@ -42,22 +47,27 @@
top: 3.5px;
transform: rotate(45deg);
}
.deep {
left: 3.5px;
}
.shallow {
left: 18.5px;
}
.theme_Item .text {
margin-left: 5px;
font-size: 12px;
color: #666666;
}
.theme_Item:hover{
.theme_Item:hover {
margin-top: -3px;
box-shadow: 0 4px 4px 4px #ECECEC;
}
.theme_show{
.theme_show {
height: 460px;
width: 60%;
padding: 5px;
......@@ -66,71 +76,92 @@
justify-content: space-between;
flex-direction: row;
}
.imgList_item{
.imgList_item {
width: 250px;
height: 100%;
box-shadow: 0 10px 30px 3px #dddddd;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.ColorOne div:nth-child(1){
.ColorOne div:nth-child(1) {
background-color: rgb(243, 152, 0);
}
.ColorOne div:nth-child(2){
.ColorOne div:nth-child(2) {
background-color: rgb(255, 69, 68);
}
.ColorTwo div:nth-child(1){
.ColorTwo div:nth-child(1) {
background-color: rgb(85, 85, 85);
}
.ColorTwo div:nth-child(2){
.ColorTwo div:nth-child(2) {
background-color: rgb(252, 198, 0);
}
.ColorThree div:nth-child(1){
.ColorThree div:nth-child(1) {
background-color: rgb(255, 230, 232);
}
.ColorThree div:nth-child(2){
.ColorThree div:nth-child(2) {
background-color: rgb(255, 84, 123);
}
.ColorFour div:nth-child(1){
.ColorFour div:nth-child(1) {
background-color: rgb(240, 235, 216);
}
.ColorFour div:nth-child(2){
.ColorFour div:nth-child(2) {
background-color: rgb(221, 183, 102);
}
.ColorFive div:nth-child(1){
.ColorFive div:nth-child(1) {
background-color: rgb(233, 235, 255);
}
.ColorFive div:nth-child(2){
.ColorFive div:nth-child(2) {
background-color: rgb(119, 131, 234);
}
.ColorSix div:nth-child(1){
.ColorSix div:nth-child(1) {
background-color: rgb(85, 85, 85);
}
.ColorSix div:nth-child(2){
.ColorSix div:nth-child(2) {
background-color: rgb(255, 69, 68);
}
.ColorSeven div:nth-child(1){
.ColorSeven div:nth-child(1) {
background-color: rgb(225, 244, 227);
}
.ColorSeven div:nth-child(2){
.ColorSeven div:nth-child(2) {
background-color: rgb(99, 190, 114);
}
.ColorEight div:nth-child(1){
.ColorEight div:nth-child(1) {
background-color: rgb(219, 233, 249);
}
.ColorEight div:nth-child(2){
.ColorEight div:nth-child(2) {
background-color: rgb(74, 144, 226);
}
.ColorNine div:nth-child(1){
.ColorNine div:nth-child(1) {
background-color: rgb(222, 222, 222);
}
.ColorNine div:nth-child(2){
.ColorNine div:nth-child(2) {
background-color: rgb(51, 51, 51);
}
.ColorTen div:nth-child(1){
.ColorTen div:nth-child(1) {
background-color: rgb(255, 218, 218);
}
.ColorTen div:nth-child(2){
.ColorTen div:nth-child(2) {
background-color: rgb(255, 69, 68);
}
......@@ -142,7 +173,8 @@
</div>
<div class="storeContent">
<div class="theme_List">
<div class="theme_Item" :class="{'item-active':checked==index}" v-for="(item,index) in storeObj" @click="getStyle(index,item)" :key="index">
<div class="theme_Item" :class="{'item-active':checked==index}" v-for="(item,index) in storeObj"
@click="getStyle(index,item)" :key="index">
<div class="theme_color" :class="item.cssName">
<div class="deep"></div>
<div class="shallow"></div>
......@@ -151,12 +183,18 @@
</div>
</div>
<div class="theme_show">
<div class="imgList_item" :style="{backgroundImage:'url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/' + Url1 + ')'}"></div>
<div class="imgList_item" :style="{backgroundImage:'url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/' + Url2 + ')'}"></div>
<div class="imgList_item" :style="{backgroundImage:'url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/' + Url3 + ')'}"></div>
<div class="imgList_item"
:style="{backgroundImage:'url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/' + Url1 + ')'}">
</div>
<div class="imgList_item"
:style="{backgroundImage:'url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/' + Url2 + ')'}">
</div>
<div class="imgList_item"
:style="{backgroundImage:'url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/' + Url3 + ')'}">
</div>
</div>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary">保存</el-button>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="Save()">保存</el-button>
</div>
</template>
<script>
......@@ -164,62 +202,66 @@
data() {
return {
//默认选中
checked:0,
storeObj:[{
name:'默认风格',
cssName:'ColorOne',
Id:0,
ImgArr:['classic-red-pic-1.png','classic-red-pic-2.png','classic-red-pic-2.png']
},{
name:'活力黄',
cssName:'ColorTwo',
Id:1,
ImgArr:['vibrant-yellow-pic-1.png','vibrant-yellow-pic-2.png','vibrant-yellow-pic-3.png']
},{
name:'浪漫粉',
cssName:'ColorThree',
Id:1,
ImgArr:['romantic-powder-pic-1.png','romantic-powder-pic-2.png','romantic-powder-pic-3.png']
},{
name:'流光金',
cssName:'ColorFour',
Id:1,
ImgArr:['streamer-gold-pic-1.png','streamer-gold-pic-2.png','streamer-gold-pic-3.png']
},{
name:'优雅紫',
cssName:'ColorFive',
Id:1,
ImgArr:['elegant-purple-pic-1.png','elegant-purple-pic-2.png','elegant-purple-pic-3.png']
},{
name:'品味红',
cssName:'ColorSix',
Id:1,
ImgArr:['taste-red-pic-1.png','taste-red-pic-2.png','taste-red-pic-3.png']
},{
name:'清新绿',
cssName:'ColorSeven',
Id:1,
ImgArr:['fresh-green-pic-1.png','fresh-green-pic-2.png','fresh-green-pic-3.png']
},{
name:'商务蓝',
cssName:'ColorEight',
Id:1,
ImgArr:['business-blue-pic-1.png','business-blue-pic-2.png','business-blue-pic-3.png']
},{
name:'纯粹黑',
cssName:'ColorNine',
Id:1,
ImgArr:['pure-black-pic-1.png','pure-black-pic-2.png','pure-black-pic-3.png']
},{
name:'热情红',
cssName:'ColorTen',
Id:1,
ImgArr:['passionate-red-pic-1.png','passionate-red-pic-2.png','passionate-red-pic-3.png']
checked: 0,
storeObj: [{
name: '默认风格',
cssName: 'ColorOne',
Id: 0,
ImgArr: ['classic-red-pic-1.png', 'classic-red-pic-2.png', 'classic-red-pic-2.png']
}, {
name: '活力黄',
cssName: 'ColorTwo',
Id: 1,
ImgArr: ['vibrant-yellow-pic-1.png', 'vibrant-yellow-pic-2.png', 'vibrant-yellow-pic-3.png']
}, {
name: '浪漫粉',
cssName: 'ColorThree',
Id: 2,
ImgArr: ['romantic-powder-pic-1.png', 'romantic-powder-pic-2.png', 'romantic-powder-pic-3.png']
}, {
name: '流光金',
cssName: 'ColorFour',
Id: 3,
ImgArr: ['streamer-gold-pic-1.png', 'streamer-gold-pic-2.png', 'streamer-gold-pic-3.png']
}, {
name: '优雅紫',
cssName: 'ColorFive',
Id: 4,
ImgArr: ['elegant-purple-pic-1.png', 'elegant-purple-pic-2.png', 'elegant-purple-pic-3.png']
}, {
name: '品味红',
cssName: 'ColorSix',
Id: 5,
ImgArr: ['taste-red-pic-1.png', 'taste-red-pic-2.png', 'taste-red-pic-3.png']
}, {
name: '清新绿',
cssName: 'ColorSeven',
Id: 6,
ImgArr: ['fresh-green-pic-1.png', 'fresh-green-pic-2.png', 'fresh-green-pic-3.png']
}, {
name: '商务蓝',
cssName: 'ColorEight',
Id: 7,
ImgArr: ['business-blue-pic-1.png', 'business-blue-pic-2.png', 'business-blue-pic-3.png']
}, {
name: '纯粹黑',
cssName: 'ColorNine',
Id: 8,
ImgArr: ['pure-black-pic-1.png', 'pure-black-pic-2.png', 'pure-black-pic-3.png']
}, {
name: '热情红',
cssName: 'ColorTen',
Id: 9,
ImgArr: ['passionate-red-pic-1.png', 'passionate-red-pic-2.png', 'passionate-red-pic-3.png']
}],
//图片
Url1:'classic-red-pic-1.png',
Url2:'classic-red-pic-2.png',
Url3:'classic-red-pic-2.png',
Url1: 'classic-red-pic-1.png',
Url2: 'classic-red-pic-2.png',
Url3: 'classic-red-pic-2.png',
addMsg: {
MallBaseId: 0,
MallShopStyle: 0
}
};
},
created() {
......@@ -227,15 +269,42 @@
},
methods: {
//点击
getStyle(index,item){
getStyle(index, item) {
this.checked = index;
this.Url1=item.ImgArr[0];
this.Url2=item.ImgArr[1];
this.Url3=item.ImgArr[2];
this.Url1 = item.ImgArr[0];
this.Url2 = item.ImgArr[1];
this.Url3 = item.ImgArr[2];
this.addMsg.MallShopStyle = item.Id;
},
Save() {
var mallId = this.getLocalStorage().MallBaseId;
this.apipost("/api/Tenant/SetMiniProgrameShopStyle", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.Success("设置成功!");
this.GetList();
} else {
this.Info(res.data.message);
}
})
},
GetList() {
var mallId = this.getLocalStorage().MallBaseId;
this.apipost("/api/Tenant/GetMiniPrograme", {
MallBaseId: mallId
}, res => {
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
this.NavIconIsShowAdd = false;
} else {
this.Info(res.data.message);
}
})
}
},
mounted() {
this.addMsg.MallBaseId = this.getLocalStorage().MallBaseId;
this.GetList();
}
};
</script>
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