Skip to content

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

修改

parent 70035fb3
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 86 deletions
src/components/StoreDesign/storeStyle.vue
View file @ 92231e60
......@@ -142,82 +142,18 @@
</div>
<div class="storeContent">
<div class="theme_List">
<div class="theme_Item item-active">
<div class="theme_color ColorOne">
<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>
</div>
<div class="text">默认风格</div>
<div class="text">{{item.name}}</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorTwo">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">活力黄</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorThree">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">浪漫粉</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorFour">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">流光金</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorFive">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">优雅紫</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorSix">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">品味红</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorSeven">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">清新绿</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorEight">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">商务蓝</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorNine">
<div class="deep" style=""></div>
<div class="shallow" style=""></div>
</div>
<div class="text">纯粹黑</div>
</div>
<div class="theme_Item">
<div class="theme_color ColorTen">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">热情红</div>
</div>
</div>
<div class="theme_show">
<div class="imgList_item" style="background-image: url('http://wx.weibaoge.cn/web/statics/img/mall/theme-color/classic-red-pic-1.png');"></div>
<div class="imgList_item"></div>
<div class="imgList_item"></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>
......@@ -227,29 +163,76 @@
export default {
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:'ColorTwo',
Id:1,
ImgArr:['romantic-powder-pic-1.png','romantic-powder-pic-2.png','romantic-powder-pic-3.png']
}]
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']
}],
//图片
Url1:'classic-red-pic-1.png',
Url2:'classic-red-pic-2.png',
Url3:'classic-red-pic-2.png',
};
},
created() {
},
methods: {
//点击
getStyle(index,item){
this.checked = index;
this.Url1=item.ImgArr[0];
this.Url2=item.ImgArr[1];
this.Url3=item.ImgArr[2];
}
},
mounted() {
......
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