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