Skip to content

Y
ybf
Commit 34bad990 authored by Z's avatar Z
Browse files
Options

Z: Dot: Me's main page: done.

parent 19340054
Show whitespace changes
Inline Side-by-side
Showing with 390 additions and 21 deletions
ybf_wx/public/mainSale/test-city.png 0 → 100644
View file @ 34bad990
This diff is collapsed.
ybf_wx/src/router/index.js
View file @ 34bad990
...@@ -39,6 +39,11 @@ const routes = [ ...@@ -39,6 +39,11 @@ const routes = [
path: '/actTemplate', path: '/actTemplate',
name: 'ActTemplate', name: 'ActTemplate',
component: () => import('@/views/mainSale/active/template/index') component: () => import('@/views/mainSale/active/template/index')
},
{
path: '/me',
name: 'Me',
component: () => import('@/views/mainSale/me/main/index')
} }
// { // {
// path: '/about', // path: '/about',
......
ybf_wx/src/views/mainSale/active/main/index.vue
View file @ 34bad990
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</div> </div>
<div class="main-actives"> <div class="main-actives">
<div class="actives-banners"> <div class="actives-banners">
<!-- <img class="actives-banner-small" :src="test.activeInfo.icon['0']">--> <!-- <img class="actives-banner-small" :src="test.activeInfo.icon['0']">-->
<div class="actives-banner-title">现有开展活动</div> <div class="actives-banner-title">现有开展活动</div>
<!-- <img class="actives-banner-small" :src="test.cache.imgUrl">--> <!-- <img class="actives-banner-small" :src="test.cache.imgUrl">-->
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
</div> </div>
</div> </div>
<div class="main-menuBar"> <div class="main-menuBar">
<div class="menuBar-menu"> <div class="menuBar-menu" @click="menuBarClick('MainSale')">
<img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']"> <img class="menuBar-icon" :src="test.menuBarInfo.icon.now['1']">
<div class="menuBar-title menuBar-title-ac">活动</div> <div class="menuBar-title menuBar-title-ac">活动</div>
</div> </div>
...@@ -100,7 +100,8 @@ ...@@ -100,7 +100,8 @@
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['4']"> <div class="menuBar-menu"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['4']">
<div class="menuBar-title">任务</div> <div class="menuBar-title">任务</div>
</div> </div>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['5']"> <div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="test.menuBarInfo.icon.now['5']">
<div class="menuBar-title">我的</div> <div class="menuBar-title">我的</div>
</div> </div>
</div> </div>
...@@ -151,27 +152,37 @@ ...@@ -151,27 +152,37 @@
"3": "/mainSale/icon-active-3.png", "3": "/mainSale/icon-active-3.png",
} }
}, },
menuBarInfo:{ menuBarInfo: {
icon:{ list: {
now:{ main: [
{
name: "",
iconUaUrl: "",
iconAcUrl: "",
}
],
},
icon: {
now: {
"1": "", "1": "",
"2": "", "2": "",
"3": "", "3": "",
"4": "", "4": "",
"5": "", "5": "",
}, },
ua:{ ua: {
"1": "/mainSale/icon-menuBar-1-ua.png", "1": "/mainSale/icon-menuBar-1-ua.png",
"2": "/mainSale/icon-menuBar-2-ua.png", "2": "/mainSale/icon-menuBar-2-ua.png",
"3": "/mainSale/icon-menuBar-3-ua.png", "3": "/mainSale/icon-menuBar-3-ua.png",
"4": "/mainSale/icon-menuBar-4-ua.png", "4": "/mainSale/icon-menuBar-4-ua.png",
"5": "/mainSale/icon-menuBar-5-ua.png", "5": "/mainSale/icon-menuBar-5-ua.png",
}, },
ac:{ ac: {
"1": "/mainSale/icon-menuBar-5-ac.png", "1": "/mainSale/icon-menuBar-1-ac.png",
"2": "/mainSale/icon-menuBar-5-ac.png", "2": "/mainSale/icon-menuBar-2-ac.png",
"3": "/mainSale/icon-menuBar-5-ac.png", "3": "/mainSale/icon-menuBar-3-ac.png",
"4": "/mainSale/icon-menuBar-5-ac.png", "4": "/mainSale/icon-menuBar-4-ac.png",
"5": "/mainSale/icon-menuBar-5-ac.png", "5": "/mainSale/icon-menuBar-5-ac.png",
} }
}, },
...@@ -185,7 +196,7 @@ ...@@ -185,7 +196,7 @@
this.checkNowMenuBar() this.checkNowMenuBar()
}, },
methods: { methods: {
checkNowMenuBar(){ checkNowMenuBar() {
let inData = '1' let inData = '1'
this.test.menuBarInfo.icon.now = this.test.menuBarInfo.icon.ua this.test.menuBarInfo.icon.now = this.test.menuBarInfo.icon.ua
...@@ -193,19 +204,26 @@ ...@@ -193,19 +204,26 @@
}, },
testButtonClick() { testButtonClick() {
}, },
menu01Click(){}, menu01Click() {
menu02Click(){}, },
menu03Click(){ menu02Click() {
},
menu03Click() {
this.$router.push("activeList") this.$router.push("activeList")
}, },
menu04Click(){}, menu04Click() {
menu05Click(){ },
menu05Click() {
this.$router.push("ActTemplate") this.$router.push("ActTemplate")
}, },
menu06Click(){}, menu06Click() {
},
buttonMainMarketingClick() { buttonMainMarketingClick() {
// this.$router.push("home") // this.$router.push("home")
}, },
menuBarClick(inData) {
this.$router.push(inData)
},
} }
}; };
...@@ -412,6 +430,7 @@ ...@@ -412,6 +430,7 @@
justify-content: center; justify-content: center;
} }
.actives-banner-small { .actives-banner-small {
...@@ -440,7 +459,6 @@ ...@@ -440,7 +459,6 @@
position: relative; position: relative;
bottom: 7px; bottom: 7px;
} }
...@@ -586,7 +604,8 @@ ...@@ -586,7 +604,8 @@
color: rgba(67, 119, 188, 0.4); color: rgba(67, 119, 188, 0.4);
text-align: center; text-align: center;
} }
.menuBar-title-ac{
.menuBar-title-ac {
color: rgba(67, 119, 188, 1); color: rgba(67, 119, 188, 1);
} }
</style> </style>
ybf_wx/src/views/mainSale/me/main/index.vue 0 → 100644
View file @ 34bad990
<template>
<div class="main">
<div class="backgrounds">
<img class="background-img" :src="cache.icon.testImg">
</div>
<div class="infos">
<div class="info">
<div class="info-logos">
<img class="info-logo" :src="cache.icon.testImg">
</div>
<div class="info-msgs">
<div class="msg">
<div class="msg-title">未完成任务</div>
<div class="msg-num">
<div class="msg-num-red">15</div>
</div>
</div>
<div class="msg msg-latest">
<div class="msg-title">未完成任务</div>
<div class="msg-num">
<div class="msg-num-blue">5</div>
</div>
</div>
</div>
</div>
</div>
<div class="lists">
<div class="list">
<div class="list-title">我的客户</div>
<img class="list-icon" :src="cache.icon.arrowRightDark">
</div>
<div class="list">
<div class="list-title">任务列表</div>
<img class="list-icon" :src="cache.icon.arrowRightDark">
</div>
<div class="list list-latest">
<div class="list-title">我的收益</div>
<img class="list-icon" :src="cache.icon.arrowRightDark">
</div>
</div>
<div class="main-menuBar">
<div class="menuBar-menu" @click="menuBarClick('MainSale')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['1']">
<div class="menuBar-title">活动</div>
</div>
<div class="menuBar-menu">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['2']">
<div class="menuBar-title">案例</div>
</div>
<div class="menuBar-menu">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']">
<div class="menuBar-title">收益</div>
</div>
<div class="menuBar-menu">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['4']">
<div class="menuBar-title">任务</div>
</div>
<div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['5']">
<div class="menuBar-title menuBar-title-ac">我的</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "me",
data() {
return {
cache:{
icon:{
testImg: "/mainSale/test-city.png",
arrowRightLight: "/mainSale/icon-arrow-right-light.png",
arrowRightDark: "/mainSale/icon-arrow-right-light.png",
}
},
menuBarInfo: {
list: {
main: [
{
name: "",
iconUaUrl: "",
iconAcUrl: "",
}
],
},
icon: {
now: {
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
},
ua: {
"1": "/mainSale/icon-menuBar-1-ua.png",
"2": "/mainSale/icon-menuBar-2-ua.png",
"3": "/mainSale/icon-menuBar-3-ua.png",
"4": "/mainSale/icon-menuBar-4-ua.png",
"5": "/mainSale/icon-menuBar-5-ua.png",
},
ac: {
"1": "/mainSale/icon-menuBar-1-ac.png",
"2": "/mainSale/icon-menuBar-2-ac.png",
"3": "/mainSale/icon-menuBar-3-ac.png",
"4": "/mainSale/icon-menuBar-4-ac.png",
"5": "/mainSale/icon-menuBar-5-ac.png",
}
},
}
};
},
created() {
this.checkNowMenuBar()
},
methods: {
checkNowMenuBar() {
let inData = '5'
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData]
},
menuBarClick(inData) {
this.$router.push(inData)
},
}
};
</script>
<style scoped>
.main {
/*border: 1px solid red;*/
background-color: rgba(248, 248, 248, 1);
width: 100%;
height: auto;
min-height: 100%;
/*padding: ;*/
padding-bottom: 94px;
display: flex;
flex-direction: column;
justify-content: start;
overflow: auto;
}
.backgrounds{
/*border: 1px solid dodgerblue;*/
width: 100%;
height: 124px;
overflow: hidden;
background-color: rgba(10, 10, 10, 0.5);
}
.background-img{
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(2px);
}
.infos{
/*border: 1px solid orange;*/
width: 100%;
height: 44px;
margin-top: 12px;
}
.info{
/*border: 1px solid red;*/
width: 100%;
height: 148px;
padding: 0px 16px;
position: relative;
bottom: 106px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
}
.info-logos{
/*background-color: #96CEDC;*/
width: 100%;
height: 48px;
}
.info-logo{
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid white;
object-fit: cover;
}
.info-msgs{
width: 100%;
height: 80px;
margin-bottom: 12px;
background-color: rgba(255, 255, 255, 1);
border-radius: 2px;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
padding: 14px 19px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.msg{
width: 50%;
height: 100%;
/*border: 1px solid red;*/
border-right: 1px solid rgba(238, 238, 238, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.msg-latest{
border-right: none;
align-items: flex-end;
}
.msg-title{
width: 120px;
height: 14px;
font-size: 12px;
font-weight: bold;
line-height: 14px;
color: rgba(45, 71, 106, 1);
text-align: center;
}
.msg-num{
width: 120px;
height: 32px;
border-radius: 16px;
background-color: rgba(248, 248, 248, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.msg-num-red{
color: rgba(208, 2, 27, 1);
font-size: 18px;
font-weight: bold;
line-height: 20px;
text-align: center;
}
.msg-num-blue{
color: rgba(117, 178, 253, 1);
font-size: 18px;
font-weight: bold;
line-height: 20px;
text-align: center;
}
.lists{
/*border: 1px solid red;*/
width: 100%;
height: auto;
padding: 0px 0px 0px 16px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
}
.list{
/*border: 1px solid dodgerblue;*/
width: 100%;
height: 44px;
border-bottom: 1px solid rgba(221, 221, 221, 1);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.list-latest{
border-bottom: none;
}
.list-title{
width: auto;
height: 16px;
font-size: 14px;
font-weight: bold;
line-height: 16px;
color: rgba(45, 71, 106, 1);
}
.list-icon{
margin-right: 16px;
width: 8px;
height: 13px;
object-fit: cover;
}
.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: rgba(67, 119, 188, 0.4);
text-align: center;
}
.menuBar-title-ac {
color: rgba(67, 119, 188, 1);
}
</style>
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