Skip to content

Y
ybf
Commit 59ec66e8 authored by xd's avatar xd
Browse files
Options

解决冲突

parents a3953c2d 11a1f1aa
Hide whitespace changes
Inline Side-by-side
Showing with 9563 additions and 5 deletions
ybf_wx/src/router/index.js
View file @ 59ec66e8
......@@ -24,7 +24,25 @@ const routes = [
path: '/activeList',
name: 'activeList',
component: () => import(/* webpackChunkName: "about" */ '../views/active/activeList.vue')
},
{
path: '/discount',
name: 'Discount',
component: () => import('@/views/sideNav/discount/index')
},
{
path: '/mainSale',
name: 'MainSale',
component: () => import('@/views/mainSale/active/main/index')
}
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// }
]
const router = new VueRouter({
......
ybf_wx/src/views/home.vue
View file @ 59ec66e8
<template>
<div>
</div>
<div>
<button @click="disClick">discount</button>
<button @click="mainSaleClick">mainSale</button>
</div>
</template>
<script>
export default {
name: 'home'
export default {
name: "home",
methods: {
disClick() {
this.$router.push("Discount");
},
mainSaleClick() {
this.$router.push("MainSale");
}
}
};
</script>
<style scoped>
button{
border: 1px solid gray;
margin: 2px;
border-radius: 4px;
padding: 4px;
}
</style>
ybf_wx/src/views/mainSale/active/main/index.vue 0 → 100644
View file @ 59ec66e8
<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 0 → 100644
View file @ 59ec66e8
<template>
<div class="main">
<!-- <div class="tops"></div> -->
<div class="contents">
<div v-for="(item, index) of test.list.main" :key="index">
<div class="content">
<div class="content-imgs">
<img class="imgs-img" :src="item.imgUrl" alt />
</div>
<div class="content-infos">
<div class="infos-mains">
<div class="mains">
<div class="main-usedPercent">核销率{{item.usedPercent}}%</div>
<div class="main-money">{{item.money}}元代金券</div>
</div>
<div class="buttons">
<button class="button-send" @click="testButtonClick">推送</button>
</div>
</div>
<div class="infos-tips">
<div class="tip-shareMan">最后分享：{{item.shareMan}}</div>
<div class="tip-commision">佣金：¥ {{item.commision}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="menus">
<div class="menu" @click="buttonMainMarketingClick">精准营销</div>
<div class="menu activeMenu">一对一营销侧边栏</div>
</div>
</div>
</template>
<script>
export default {
name: "discountIndex",
data() {
return {
test: {
list: {
main: [
{
imgUrl: "/hi.jpg",
usedPercent: "10",
money: "100",
shareMan: "Alice",
commision: "11"
},
{
imgUrl: "/hi.jpg",
usedPercent: "20",
money: "200",
shareMan: "Bob",
commision: "22"
},
{
imgUrl: "/hi.jpg",
usedPercent: "30",
money: "300",
shareMan: "Clid",
commision: "33"
},
{
imgUrl: "/hi.jpg",
usedPercent: "40",
money: "400",
shareMan: "Doke",
commision: "44"
}
]
}
},
dis: {}
};
},
methods:{
testButtonClick(){},
buttonMainMarketingClick(){
// this.$router.push("home")
},
}
};
</script>
<style scoped>
.main {
background-color: white;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: start;
}
.tops {
border: 2px solid lightblue;
width: 100%;
height: 100px;
}
.contents {
/* border: 2px solid lightpink; */
width: 100%;
height: 100%;
padding: 16px;
padding-bottom: 40px;
}
.content {
border: 0px solid orange;
height: 100px;
width: 100%;
padding: 4px 0px;
margin-bottom: 16px;
border-radius: 4px;
box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);
display: flex;
flex-direction: row;
justify-content: start;
}
.content-imgs {
/* border: 1px solid pink; */
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
.imgs-img {
width: 50px;
height: 50px;
margin-top: 10px;
border-radius: 50%;
object-fit: cover;
}
.content-infos {
/* border: 1px solid orange; */
width: 80%;
height: 100%;
}
.infos-mains {
height: 70%;
width: 100%;
/* border: 1px solid green; */
display: flex;
flex-direction: row;
justify-content: start;
}
.mains {
/* border: 1px solid red; */
width: 70%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.main-usedPercent {
font-size: 14px;
color: grey;
}
.main-money {
/* border: 1px solid lightgreen; */
font-size: 24px;
}
.buttons {
/* border: 1px solid darkorange; */
/* background-color: bisque; */
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button-send{
border: 0px solid blue;
height: 40px;
width: 60px;
border-radius: 4px;
background-color: rgba(68, 93, 251, 1);
color: white;
font-size: 16px;
}
.infos-tips {
height: 30%;
width: 100%;
/* border: 1px solid red; */
border-top: 1px dashed gray;
padding-top: 6px;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.tip-shareMan{
/* border: 1px solid orange; */
width: 70%;
height: 100%;
font-size: 14px;
line-height: 16px;
color: rgb(150, 150, 150);
}
.tip-commision{
/* border: 1px solid green; */
width: 30%;
height: 100%;
font-size: 14px;
line-height: 16px;
color: rgb(150, 150, 150);
}
.menus {
border-top: 1px solid rgb(194, 194, 194);
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: white;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.menu{
/* border: 1px solid red; */
height: 50px;
/* width: 120px; */
width: 50%;
line-height: 50px;
text-align: center;
font-size: 14px;
color: black;
}
.activeMenu{
color:lightcoral;
}
</style>
ybf_wx/yarn.lock 0 → 100644
View file @ 59ec66e8
This source diff could not be displayed because it is too large. You can view the blob instead.
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