Skip to content

Y
ybf
Commit 11a1f1aa authored by Z's avatar Z
Browse files
Options

Z: Dot: 精准营销首页: Layout Done.

parent 76d6f00e
Hide whitespace changes
Inline Side-by-side
Showing with 562 additions and 4 deletions
ybf_wx/src/router/index.js
View file @ 11a1f1aa
...@@ -15,6 +15,11 @@ const routes = [ ...@@ -15,6 +15,11 @@ const routes = [
name: 'Discount', name: 'Discount',
component: ()=>import('@/views/sideNav/discount/index') component: ()=>import('@/views/sideNav/discount/index')
}, },
{
path: '/mainSale',
name: 'MainSale',
component: ()=>import('@/views/mainSale/active/main/index')
},
// { // {
// path: '/about', // path: '/about',
// name: 'about', // name: 'about',
......
ybf_wx/src/views/home.vue
View file @ 11a1f1aa
<template> <template>
<div> <div>
<button @click="disClick">discount</button> <button @click="disClick">discount</button>
<button @click="mainSaleClick">mainSale</button>
</div> </div>
</template> </template>
...@@ -11,10 +12,20 @@ export default { ...@@ -11,10 +12,20 @@ export default {
methods: { methods: {
disClick() { disClick() {
this.$router.push("Discount"); this.$router.push("Discount");
},
mainSaleClick() {
this.$router.push("MainSale");
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
button{
border: 1px solid gray;
margin: 2px;
border-radius: 4px;
padding: 4px;
}
</style> </style>
ybf_wx/src/views/mainSale/active/main/index.vue 0 → 100644
View file @ 11a1f1aa
<template>
<div class="main">
<div class="main-manInfos">
<div class="manInfo-logos">
<img class="logos-logo" :src="test.manInfo.logoUrl">
</div>
<div class="manInfo-name">{{test.manInfo.barFrom}}的专柜：{{test.manInfo.barName}}</div>
<div class="manInfo-switch">
<div class="switch-text">切换</div>
<img class="switch-icon" :src="test.manInfo.icon['1']">
</div>
</div>
<div class="main-tips">
<div class="tips-tip">店铺粉丝 {{test.barInfo.fans}}</div>
<div class="tips-tip">个人粉丝 {{test.barInfo.personalFans}}</div>
<div class="tips-tip">今日新增 {{test.barInfo.newFans}}</div>
</div>
<div class="main-menus">
<div class="menus-row">
<div class="menu">
<img class="menu-logo" :src="test.menuInfo.icon['1']">
<div class="menu-text">优惠券核销</div>
</div>
<div class="menu">
<img class="menu-logo" :src="test.menuInfo.icon['2']">
<div class="menu-text">任务列表</div>
</div>
<div class="menu">
<img class="menu-logo" :src="test.menuInfo.icon['3']">
<div class="menu-text">活动列表</div>
</div>
</div>
<div class="menus-row">
<div class="menu">
<img class="menu-logo" :src="test.menuInfo.icon['4']">
<div class="menu-text">专柜维护</div>
</div>
<div class="menu">
<img class="menu-logo" :src="test.menuInfo.icon['5']">
<div class="menu-text">活动模版</div>
</div>
<div class="menu">
<img class="menu-logo" :src="test.menuInfo.icon['6']">
<div class="menu-text">商品管理</div>
</div>
</div>
</div>
<div class="main-actives">
<div class="actives-banners">
<!-- <img class="actives-banner-small" :src="test.activeInfo.icon['0']">-->
<div class="actives-banner-title">现有开展活动</div>
<!-- <img class="actives-banner-small" :src="test.cache.imgUrl">-->
</div>
<div class="actives-main">
<div class="active-logos">
<img class="active-logo" :src="test.activeInfo.icon['1']">
</div>
<div class="active-infos">
<div class="active-title">大转盘</div>
<div class="active-dsc">{{test.cache.actDsc}}</div>
</div>
</div>
<div class="actives-main">
<div class="active-logos">
<img class="active-logo" :src="test.activeInfo.icon['2']">
</div>
<div class="active-infos">
<div class="active-title">现金券发放</div>
<div class="active-dsc">{{test.cache.actDsc}}</div>
</div>
</div>
<div class="actives-main">
<div class="active-logos">
<img class="active-logo" :src="test.activeInfo.icon['3']">
</div>
<div class="active-infos">
<div class="active-title">集卡</div>
<div class="active-dsc">{{test.cache.actDsc}}</div>
</div>
</div>
<div class="actives-mores">
<div class="mores-title">查看更多</div>
<img class="mores-icon" :src="test.manInfo.logoUrl">
</div>
</div>
<div class="main-menuBar">
<div class="menuBar-menu">
<img class="menuBar-icon" :src="test.cache.imgUrl">
<div class="menuBar-title">活动</div>
</div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.cache.imgUrl">
<div class="menuBar-title">案例</div>
</div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.cache.imgUrl">
<div class="menuBar-title">收益</div>
</div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.cache.imgUrl">
<div class="menuBar-title">任务</div>
</div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.cache.imgUrl">
<div class="menuBar-title">我的</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "discountIndex",
data() {
return {
test: {
cache: {
imgUrl: "/hi.jpg",
actDsc: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
},
manInfo: {
bk_logoUrl: "https://ezhq.xyz/img/main/logo_sona.jpg",
logoUrl: "/hi.jpg",
barFrom: "Faker",
barName: "only",
icon: {
"1": "/mainSale/icon-arrow-right-light.png",
}
},
barInfo: {
fans: "299",
personalFans: "77",
newFans: "11",
},
menuInfo: {
icon: {
"1": "/mainSale/icon-menu-01.png",
"2": "/mainSale/icon-menu-02.png",
"3": "/mainSale/icon-menu-03.png",
"4": "/mainSale/icon-menu-04.png",
"5": "/mainSale/icon-menu-05.png",
"6": "/mainSale/icon-menu-06.png",
}
},
activeInfo: {
icon: {
"0": "/mainSale/icon-active-title.png",
"1": "/mainSale/icon-active-1.png",
"2": "/mainSale/icon-active-2.png",
"3": "/mainSale/icon-active-3.png",
}
}
},
dis: {}
};
},
methods: {
testButtonClick() {
},
buttonMainMarketingClick() {
// this.$router.push("home")
},
}
};
</script>
<style scoped>
.testCube {
width: 60px;
height: 10px;
background-color: lightcoral;
border: 1px solid white;
}
.main {
background-color: rgb(237, 239, 243);
width: 100%;
height: auto;
/*padding: ;*/
padding-bottom: 94px;
display: flex;
flex-direction: column;
justify-content: start;
overflow: auto;
}
.main-manInfos {
width: 100%;
height: 72px;
background-color: #4377BC;
padding: 0px 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.manInfo-logos {
width: 48px;
height: 48px;
/*border: 1px solid white;*/
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.logos-logo {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 50%;
border: 2px solid white;
}
.manInfo-name {
/*border: 1px solid gold;*/
width: 100%;
height: 18px;
padding: 0px 12px;
margin-right: 60px;
color: white;
font-size: 14px;
line-height: 16px;
font-weight: bold;
}
.manInfo-switch {
/*border: 1px solid greenyellow;*/
width: 100px;
height: 18px;
font-size: 14px;
line-height: 18px;
font-weight: bold;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.switch-icon {
width: 5px;
height: 8px;
}
.switch-text {
color: white;
padding-right: 4px;
font-size: 14px;
line-height: 16px;
font-weight: normal;
}
.main-tips {
/*border: 1px solid red;*/
width: 100%;
height: 48px;
background-color: #F8F8F8;
padding: 0px 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.tips-tip {
/*border: 1px solid darkorange;*/
width: 30%;
height: 16px;
color: #4377BC;
font-size: 12px;
font-weight: normal;
line-height: 16px;
text-align: center;
}
.main-menus {
/*border: 1px solid lightseagreen;*/
width: 100%;
height: 240px;
display: flex;
flex-direction: column;
justify-content: start;
}
.menus-row {
width: 100%;
height: 120px;
padding: 12px 16px 0px 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.menu {
width: 108px;
height: 108px;
background-color: #F8F8F8;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-logo {
width: 48px;
height: 48px;
object-fit: cover;
}
.menu-text {
font-size: 14px;
font-weight: bold;
color: #2D476A;
}
.main-actives {
/*border: 1px solid lightcoral;*/
width: 100%;
height: 380px;
/*margin-bottom: 94px;*/
margin-top: 36px;
padding: 0px 12px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: start;
}
.actives-banners {
border-bottom: 1px solid #EEEEEE;
width: 100%;
height: 25px;
display: flex;
flex-direction: row;
justify-content: center;
}
.actives-banner-small {
width: 220px;
height: 30px;
object-fit: cover;
position: relative;
bottom: 7px;
}
.actives-banner-title {
background: url(/mainSale/icon-active-title.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 220px;
height: 30px;
font-size: 16px;
line-height: 16px;
color: #2D476A;
text-align: center;
position: relative;
bottom: 7px;
}
.actives-banner-main {
width: 148px;
height: 24px;
border-radius: 40px;
margin: 0px 4px;
font-size: 16px;
font-weight: bold;
line-height: 18px;
text-align: center;
color: #2D476A;
background: linear-gradient(#FFFFFF, 50%, #E4F9FF);
box-shadow: 0px 1px 1px 0px #96CEDC;
position: relative;
bottom: 12px;
}
.actives-main {
border-bottom: 1px solid #EEEEEE;
width: 100%;
height: 105px;
padding: 12px 0px;
display: flex;
flex-direction: row;
justify-content: start;
}
.active-logos {
background-color: #F8F8F8;
width: 80px;
height: 80px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.active-logo {
width: 56px;
height: 56px;
}
.active-infos {
width: 100%;
height: 80px;
padding-left: 12px;
display: flex;
flex-direction: column;
justify-content: center;
}
.active-title {
height: 16px;
font-size: 14px;
font-weight: bold;
line-height: 14px;
margin-bottom: 8px;
}
.active-dsc {
height: 36px;
width: 100%;
font-size: 12px;
font-weight: normal;
}
.actives-mores {
width: 100%;
height: 40px;
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.mores-title {
width: auto;
height: 14px;
margin-right: 4px;
font-size: 12px;
font-weight: normal;
line-height: 14px;
color: #2D476A;
}
.mores-icon {
width: 10px;
height: 14px;
}
.main-menuBar {
/*border: 1px solid darkviolet;*/
box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
width: 100%;
height: 82px;
position: fixed;
bottom: 0px;
left: 0px;
background-color: #FAFAFA;
padding: 0px 14px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.menuBar-menu {
/*background-color: greenyellow;*/
width: 48px;
height: 47px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.menuBar-icon {
width: 24px;
height: 24px;
object-fit: cover;
}
.menuBar-title {
width: auto;
height: 12px;
font-size: 10px;
font-weight: bold;
color: #4377BC;
text-align: center;
}
</style>
ybf_wx/src/views/sideNav/discount/index.vue
View file @ 11a1f1aa
...@@ -41,28 +41,28 @@ export default { ...@@ -41,28 +41,28 @@ export default {
list: { list: {
main: [ main: [
{ {
imgUrl: "https://ezhq.xyz/img/main/logo_sona.jpg", imgUrl: "/hi.jpg",
usedPercent: "10", usedPercent: "10",
money: "100", money: "100",
shareMan: "Alice", shareMan: "Alice",
commision: "11" commision: "11"
}, },
{ {
imgUrl: "https://pbs.twimg.com/media/D01HBOkU0AMLWGU?format=jpg&name=medium", imgUrl: "/hi.jpg",
usedPercent: "20", usedPercent: "20",
money: "200", money: "200",
shareMan: "Bob", shareMan: "Bob",
commision: "22" commision: "22"
}, },
{ {
imgUrl: "https://pbs.twimg.com/media/EMTspXRU0AIpV9e?format=jpg&name=medium", imgUrl: "/hi.jpg",
usedPercent: "30", usedPercent: "30",
money: "300", money: "300",
shareMan: "Clid", shareMan: "Clid",
commision: "33" commision: "33"
}, },
{ {
imgUrl: "https://pbs.twimg.com/media/EMTqzHcVAAIQD6n?format=jpg&name=medium", imgUrl: "/hi.jpg",
usedPercent: "40", usedPercent: "40",
money: "400", money: "400",
shareMan: "Doke", shareMan: "Doke",
......
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