Skip to content

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

新增商城风格

parent 47feff40
Hide whitespace changes
Inline Side-by-side
Showing with 276 additions and 2 deletions
src/assets/css/zkcss.css
View file @ 4616a4dc
......@@ -22,4 +22,12 @@ input, textarea, select{
}
.w400{
width:400px;
}
\ No newline at end of file
}
.CommonHeader{
padding: 18px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
src/components/StoreDesign/storeStyle.vue 0 → 100644
View file @ 4616a4dc
<style>
.storeContent{
background-color: #fff;
margin-top:10px;
padding:20px 0;
}
.theme_List{
width:60%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item-active {
border: 2px solid #3399ff!important;
}
.theme_List>div{
display: flex;
justify-content:center;
align-items: center;
width: 127px;
height: 61px;
position: relative;
border: 1px solid #e2e2e2;
border-radius: 5px;
margin-left: 20px;
margin-bottom: 20px;
overflow: hidden;
cursor: pointer;
}
.theme_color{
width: 46px;
height: 33px;
margin-right: 5px;
transform-origin: 50% 50%;
position: relative;
}
.theme_color div{
width: 25px;
height: 25px;
border-radius: 5px;
position: absolute;
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{
margin-top: -3px;
box-shadow: 0 4px 4px 4px #ECECEC;
}
.theme_show{
height: 460px;
width: 60%;
padding: 5px;
margin: 20px 0 20px 20px;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.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){
background-color: rgb(243, 152, 0);
}
.ColorOne div:nth-child(2){
background-color: rgb(255, 69, 68);
}
.ColorTwo div:nth-child(1){
background-color: rgb(85, 85, 85);
}
.ColorTwo div:nth-child(2){
background-color: rgb(252, 198, 0);
}
.ColorThree div:nth-child(1){
background-color: rgb(255, 230, 232);
}
.ColorThree div:nth-child(2){
background-color: rgb(255, 84, 123);
}
.ColorFour div:nth-child(1){
background-color: rgb(240, 235, 216);
}
.ColorFour div:nth-child(2){
background-color: rgb(221, 183, 102);
}
.ColorFive div:nth-child(1){
background-color: rgb(233, 235, 255);
}
.ColorFive div:nth-child(2){
background-color: rgb(119, 131, 234);
}
.ColorSix div:nth-child(1){
background-color: rgb(85, 85, 85);
}
.ColorSix div:nth-child(2){
background-color: rgb(255, 69, 68);
}
.ColorSeven div:nth-child(1){
background-color: rgb(225, 244, 227);
}
.ColorSeven div:nth-child(2){
background-color: rgb(99, 190, 114);
}
.ColorEight div:nth-child(1){
background-color: rgb(219, 233, 249);
}
.ColorEight div:nth-child(2){
background-color: rgb(74, 144, 226);
}
.ColorNine div:nth-child(1){
background-color: rgb(222, 222, 222);
}
.ColorNine div:nth-child(2){
background-color: rgb(51, 51, 51);
}
.ColorTen div:nth-child(1){
background-color: rgb(255, 218, 218);
}
.ColorTen div:nth-child(2){
background-color: rgb(255, 69, 68);
}
</style>
<template>
<div class="storeStyle">
<div class="CommonHeader">
商城风格
</div>
<div class="storeContent">
<div class="theme_List">
<div class="theme_Item item-active">
<div class="theme_color ColorOne">
<div class="deep"></div>
<div class="shallow"></div>
</div>
<div class="text">默认风格</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">
<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>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary">保存</el-button>
</div>
</template>
<script>
export default {
data() {
return {
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']
}]
};
},
created() {
},
methods: {
},
mounted() {
}
};
</script>
\ No newline at end of file
src/plug/index.js
View file @ 4616a4dc
......@@ -55,7 +55,8 @@ export default {
Vue.prototype.domainManager = function () {
let domainUrl = '';
domainUrl = "http://192.168.2.214:8200";
domainUrl = "https://localhost:5001";
// domainUrl = "https://localhost:5001";
domainUrl = "http://192.168.2.17:8088";
let locationName = window.location.hostname;
if (locationName.indexOf('testerp.oytour') !== -1) {
domainUrl = "http://testapi.oytour.com";
......@@ -67,6 +68,7 @@ export default {
DomainUrl: domainUrl,
//常用提交数据URL
PostUrl: domainUrl + "/api/common/post",
ImageUrl:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com'
};
return obj;
},
......
src/router/index.js
View file @ 4616a4dc
......@@ -117,6 +117,12 @@ export default new Router({
path: '/navigationIcon',
name: 'navigationIcon',
component: resolve => require(['@/components/StoreDesign/navigationIcon'], resolve),
},
//店铺管理 商城风格
{
path: '/storeStyle',
name: 'storeStyle',
component: resolve => require(['@/components/StoreDesign/storeStyle'], 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