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
Hide 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 = [
path: '/actTemplate',
name: 'ActTemplate',
component: () => import('@/views/mainSale/active/template/index')
},
{
path: '/me',
name: 'Me',
component: () => import('@/views/mainSale/me/main/index')
}
// {
// path: '/about',
......
ybf_wx/src/views/mainSale/active/main/index.vue
View file @ 34bad990
......@@ -48,7 +48,7 @@
</div>
<div class="main-actives">
<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>
<!-- <img class="actives-banner-small" :src="test.cache.imgUrl">-->
......@@ -87,7 +87,7 @@
</div>
</div>
<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']">
<div class="menuBar-title menuBar-title-ac">活动</div>
</div>
......@@ -100,7 +100,8 @@
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['4']">
<div class="menuBar-title">任务</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>
</div>
......@@ -151,27 +152,37 @@
"3": "/mainSale/icon-active-3.png",
}
},
menuBarInfo:{
icon:{
now:{
menuBarInfo: {
list: {
main: [
{
name: "",
iconUaUrl: "",
iconAcUrl: "",
}
],
},
icon: {
now: {
"1": "",
"2": "",
"3": "",
"4": "",
"5": "",
},
ua:{
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-5-ac.png",
"2": "/mainSale/icon-menuBar-5-ac.png",
"3": "/mainSale/icon-menuBar-5-ac.png",
"4": "/mainSale/icon-menuBar-5-ac.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",
}
},
......@@ -185,7 +196,7 @@
this.checkNowMenuBar()
},
methods: {
checkNowMenuBar(){
checkNowMenuBar() {
let inData = '1'
this.test.menuBarInfo.icon.now = this.test.menuBarInfo.icon.ua
......@@ -193,19 +204,26 @@
},
testButtonClick() {
},
menu01Click(){},
menu02Click(){},
menu03Click(){
menu01Click() {
},
menu02Click() {
},
menu03Click() {
this.$router.push("activeList")
},
menu04Click(){},
menu05Click(){
menu04Click() {
},
menu05Click() {
this.$router.push("ActTemplate")
},
menu06Click(){},
menu06Click() {
},
buttonMainMarketingClick() {
// this.$router.push("home")
},
menuBarClick(inData) {
this.$router.push(inData)
},
}
};
......@@ -412,6 +430,7 @@
justify-content: center;
}
.actives-banner-small {
......@@ -440,7 +459,6 @@
position: relative;
bottom: 7px;
}
......@@ -586,7 +604,8 @@
color: rgba(67, 119, 188, 0.4);
text-align: center;
}
.menuBar-title-ac{
.menuBar-title-ac {
color: rgba(67, 119, 188, 1);
}
</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