Commit 6f7c22dc authored by Z's avatar Z

Merge branch 'master' of http://114.67.93.201/xulili/ybf

parents abea5556 8d6981df
...@@ -25,6 +25,11 @@ const routes = [ ...@@ -25,6 +25,11 @@ const routes = [
name: 'activeList', name: 'activeList',
component: () => import('../views/active/activeList.vue') component: () => import('../views/active/activeList.vue')
}, },
{
path: '/createBigWheelActive',
name: 'createBigWheelActive',
component: () => import('../views/active/createBigWheelActive.vue')
},
{ {
path: '/discount', path: '/discount',
name: 'Discount', name: 'Discount',
...@@ -84,7 +89,22 @@ const routes = [ ...@@ -84,7 +89,22 @@ const routes = [
path: '/taskList', path: '/taskList',
name: 'taskList', name: 'taskList',
component: () => import('@/views/task/taskList') component: () => import('@/views/task/taskList')
} },
{
path: '/newMemberTask',
name: 'newMemberTask',
component: () => import('@/views/task/newMemberTask')
},
{
path: '/case',
name: 'case',
component: () => import('@/views/case/index')
},
{
path: '/caseDetail',
name: 'caseDetail',
component: () => import('@/views/case/caseDetail')
},
// { // {
// path: '/about', // path: '/about',
// name: 'about', // name: 'about',
......
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<van-field <van-field
class="right" class="right"
v-model="startTime1" v-model="startTime1"
placeholder="选择活动结束时间" readonly="readonly" placeholder="选择活动开始时间" readonly="readonly"
@click="startShow = true" @click="startShow = true"
/> />
<van-popup v-model="startShow" position="bottom" :overlay="true"> <van-popup v-model="startShow" position="bottom" :overlay="true">
......
This diff is collapsed.
<template>
<div class="container">
<div class="ct">
<div class="head">
<h3>我的一次成功销售案例</h3>
<div>
<span>作者: </span>
<span>亿百分</span>
<span style="margin-left:24px;">2019 / 12 /24</span>
</div>
</div>
<div class="nr">
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
<div class="pic">
<img src="/img/article.png" alt="">
</div>
<p>
马几一民号传所把半米料己走专管每见严且具还京叫海公好速信调化眼务难心化二响住厂图电没速严义常象关更了低。由压反几风列线法再石究说布通总织第量回儿称从消片度音济学地通斯带老水亲东志报月者进放北传看术走形解林直动效提情影和复色米最只等。济交感去照象强手式性九己值正可心什体收并适部该置可山省十。
</p>
</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.pic {
height: 166px;
width: 100%;
margin-bottom: 14px;
}
.pic img {
width: 100%;
}
.nr {
margin-top: 12px;
}
.nr p {
font-size: 12px;
font-weight: 400;
color: #576C88;
margin-bottom: 14px;
}
.container {
background: #f8f8f8;
height: 100%;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.ct {
background-color: #fff;
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
padding: 16px;
}
.head {
height: 74px;
width: 100%;
border-bottom: 1px solid rgba(238, 238, 238, 1);
}
.head h3 {
font-size: 18px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.head span {
font-size: 12px;
font-weight: 500;
color: rgba(45, 71, 106, 1);
}
</style>
<template>
<div class="container">
<div class="kj">
<div class="title">热门案例</div>
<div class="ct" @click="handleDetail">
<div class="ck">查看详情</div>
</div>
</div>
<div class="kj" @click="handleDetail">
<div class="title">技巧</div>
<div class="ct">
<div class="ck">查看详情</div>
</div>
</div>
<div class="kj last" @click="handleDetail">
<div class="title">服务</div>
<div class="ct">
<div class="ck">查看详情</div>
</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 menuBar-title-ac">案例</div>
</div>
<div class="menuBar-menu" @click="menuProfit()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="menuBar-title">收益</div>
</div>
<div class="menuBar-menu" @click="menuTask()">
<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">我的</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 图标
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: {
handleDetail() {
this.$router.push({
path:'caseDetail'
})
},
// 导航
checkNowMenuBar() {
let inData = "2";
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
},
menuBarClick(inData) {
this.$router.push(inData);
},
listTaskClick() {
this.$router.push("Task");
},
menuProfit() {
this.$router.push({ path: "/profitList" });
},
menuTask() {
this.$router.push({ path: "/taskList" });
}
}
};
</script>
<style scoped>
.kj {
width: 344px;
height: 229px;
background: rgba(248, 248, 248, 1);
padding: 12px;
margin-bottom: 10px;
}
.container {
padding: 16px;
}
.title {
font-size: 14px;
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
.ct {
width: 320px;
height: 180px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
border-radius: 10px;
margin-top: 12px;
position: relative;
}
.ck {
position: absolute;
width: 100%;
bottom: 0;
height: 32px;
line-height: 32px;
text-align: center;
background: rgba(117, 178, 253, 0.8);
border-radius: 0px 0px 10px 10px;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.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);
}
.last {
margin-bottom: 80px;
}
</style>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<h3>¥888</h3> <h3>¥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD" @click="handleUpperShelf"></div> <div class="sj" color="#75B2FD" ></div>
</div> </div>
</div> </div>
<div class="good"> <div class="good">
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<h3>¥888</h3> <h3>¥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD"></div> <div class="sj" color="#75B2FD"></div>
</div> </div>
</div> </div>
<div class="good"> <div class="good">
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<h3>¥888</h3> <h3>¥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD"></div> <div class="sj" color="#75B2FD"></div>
</div> </div>
</div> </div>
<div class="good"> <div class="good">
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
<h3>¥888</h3> <h3>¥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD"></div> <div class="sj" color="#75B2FD"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<h3>¥888</h3> <h3>¥888</h3>
</div> </div>
<div class="right"> <div class="right">
<div class="sj" color="#75B2FD">上架</div> <div class="sj" color="#75B2FD" @click="handleUpperShelf">上架</div>
</div> </div>
</div> </div>
<div class="good"> <div class="good">
......
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
<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>
<div class="menuBar-menu"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['2']"> <div class="menuBar-menu" @click="menuCase()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['2']">
<div class="menuBar-title">案例</div> <div class="menuBar-title">案例</div>
</div> </div>
<div class="menuBar-menu" @click="menuProfit()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']"> <div class="menuBar-menu" @click="menuProfit()"><img class="menuBar-icon" :src="test.menuBarInfo.icon.now['3']">
...@@ -235,6 +235,9 @@ ...@@ -235,6 +235,9 @@
menuBarClick(inData) { menuBarClick(inData) {
this.$router.push(inData) this.$router.push(inData)
}, },
menuCase() {
this.$router.push({path:"/case"})
},
menuProfit() { menuProfit() {
this.$router.push({path:"/profitList"}) this.$router.push({path:"/profitList"})
}, },
......
<template> <template>
<div class="main"> <div class="main">
<div class="backgrounds"> <div class="backgrounds">
<img class="background-img" :src="cache.icon.testImg"> <img class="background-img" :src="cache.icon.testImg" />
</div> </div>
<div class="infos"> <div class="infos">
<div class="info"> <div class="info">
<div class="info-logos"> <div class="info-logos">
<img class="info-logo" :src="cache.icon.testImg"> <img class="info-logo" :src="cache.icon.testImg" />
</div> </div>
<div class="info-msgs"> <div class="info-msgs">
<div class="msg"> <div class="msg">
...@@ -26,41 +26,40 @@ ...@@ -26,41 +26,40 @@
</div> </div>
</div> </div>
<div class="lists"> <div class="lists">
<div class="list"> <div class="list">
<div class="list-title">我的客户</div> <div class="list-title">我的客户</div>
<img class="list-icon" :src="cache.icon.arrowRightDark"> <img class="list-icon" :src="cache.icon.arrowRightDark" />
</div> </div>
<div class="list" @click="listTaskClick"> <div class="list" @click="listTaskClick">
<div class="list-title">任务列表</div> <div class="list-title">任务列表</div>
<img class="list-icon" :src="cache.icon.arrowRightDark"> <img class="list-icon" :src="cache.icon.arrowRightDark" />
</div> </div>
<div class="list list-latest"> <div class="list list-latest">
<div class="list-title">我的收益</div> <div class="list-title">我的收益</div>
<img class="list-icon" :src="cache.icon.arrowRightDark"> <img class="list-icon" :src="cache.icon.arrowRightDark" />
</div> </div>
</div> </div>
<div class="main-menuBar"> <div class="main-menuBar">
<div class="menuBar-menu" @click="menuBarClick('MainSale')"> <div class="menuBar-menu" @click="menuBarClick('MainSale')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['1']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['1']" />
<div class="menuBar-title">活动</div> <div class="menuBar-title">活动</div>
</div> </div>
<div class="menuBar-menu"> <div class="menuBar-menu" @click="menuCase()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['2']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['2']" />
<div class="menuBar-title">案例</div> <div class="menuBar-title">案例</div>
</div> </div>
<div class="menuBar-menu"> <div class="menuBar-menu" @click="menuProfit()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="menuBar-title">收益</div> <div class="menuBar-title">收益</div>
</div> </div>
<div class="menuBar-menu"> <div class="menuBar-menu" @click="menuTask()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['4']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['4']" />
<div class="menuBar-title">任务</div> <div class="menuBar-title">任务</div>
</div> </div>
<div class="menuBar-menu" @click="menuBarClick('Me')"> <div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['5']"> <img class="menuBar-icon" :src="menuBarInfo.icon.now['5']" />
<div class="menuBar-title menuBar-title-ac">我的</div> <div class="menuBar-title menuBar-title-ac">我的</div>
</div> </div>
</div> </div>
...@@ -68,15 +67,15 @@ ...@@ -68,15 +67,15 @@
</template> </template>
<script> <script>
export default { export default {
name: "me", name: "me",
data() { data() {
return { return {
cache:{ cache: {
icon:{ icon: {
testImg: "/mainSale/test-city.png", testImg: "/mainSale/test-city.png",
arrowRightLight: "/mainSale/icon-arrow-right-light.png", arrowRightLight: "/mainSale/icon-arrow-right-light.png",
arrowRightDark: "/mainSale/icon-arrow-right-dark.png", arrowRightDark: "/mainSale/icon-arrow-right-dark.png"
} }
}, },
menuBarInfo: { menuBarInfo: {
...@@ -85,10 +84,9 @@ ...@@ -85,10 +84,9 @@
{ {
name: "", name: "",
iconUaUrl: "", iconUaUrl: "",
iconAcUrl: "", iconAcUrl: ""
} }
], ]
}, },
icon: { icon: {
now: { now: {
...@@ -96,49 +94,57 @@ ...@@ -96,49 +94,57 @@
"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-1-ac.png", "1": "/mainSale/icon-menuBar-1-ac.png",
"2": "/mainSale/icon-menuBar-2-ac.png", "2": "/mainSale/icon-menuBar-2-ac.png",
"3": "/mainSale/icon-menuBar-3-ac.png", "3": "/mainSale/icon-menuBar-3-ac.png",
"4": "/mainSale/icon-menuBar-4-ac.png", "4": "/mainSale/icon-menuBar-4-ac.png",
"5": "/mainSale/icon-menuBar-5-ac.png", "5": "/mainSale/icon-menuBar-5-ac.png"
}
} }
},
} }
}; };
}, },
created() { created() {
this.checkNowMenuBar() this.checkNowMenuBar();
}, },
methods: { methods: {
checkNowMenuBar() { checkNowMenuBar() {
let inData = '5' let inData = "5";
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData] this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
}, },
menuBarClick(inData) { menuBarClick(inData) {
this.$router.push(inData) this.$router.push(inData);
}, },
listTaskClick(){ listTaskClick() {
this.$router.push('Task') this.$router.push("Task");
}, },
menuProfit() {
this.$router.push({ path: "/profitList" });
},
menuTask() {
this.$router.push({ path: "/taskList" });
},
menuCase() {
this.$router.push({ path: "/case" });
} }
}; }
};
</script> </script>
<style scoped> <style scoped>
.main { .main {
/*border: 1px solid red;*/ /*border: 1px solid red;*/
background-color: rgba(248, 248, 248, 1); background-color: rgba(248, 248, 248, 1);
width: 100%; width: 100%;
...@@ -151,28 +157,28 @@ ...@@ -151,28 +157,28 @@
justify-content: start; justify-content: start;
overflow: auto; overflow: auto;
} }
.backgrounds{ .backgrounds {
/*border: 1px solid dodgerblue;*/ /*border: 1px solid dodgerblue;*/
width: 100%; width: 100%;
height: 124px; height: 124px;
overflow: hidden; overflow: hidden;
background-color: rgba(10, 10, 10, 0.5); background-color: rgba(10, 10, 10, 0.5);
} }
.background-img{ .background-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
filter: blur(2px); filter: blur(2px);
} }
.infos{ .infos {
/*border: 1px solid orange;*/ /*border: 1px solid orange;*/
width: 100%; width: 100%;
height: 44px; height: 44px;
margin-top: 12px; margin-top: 12px;
} }
.info{ .info {
/*border: 1px solid red;*/ /*border: 1px solid red;*/
width: 100%; width: 100%;
height: 148px; height: 148px;
...@@ -185,22 +191,20 @@ ...@@ -185,22 +191,20 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: start; align-items: start;
}
} .info-logos {
.info-logos{
/*background-color: #96CEDC;*/ /*background-color: #96CEDC;*/
width: 100%; width: 100%;
height: 48px; height: 48px;
}
} .info-logo {
.info-logo{
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
border: 1px solid white; border: 1px solid white;
object-fit: cover; object-fit: cover;
} }
.info-msgs{ .info-msgs {
width: 100%; width: 100%;
height: 80px; height: 80px;
margin-bottom: 12px; margin-bottom: 12px;
...@@ -213,8 +217,8 @@ ...@@ -213,8 +217,8 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.msg{ .msg {
width: 50%; width: 50%;
height: 100%; height: 100%;
/*border: 1px solid red;*/ /*border: 1px solid red;*/
...@@ -224,12 +228,12 @@ ...@@ -224,12 +228,12 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
} }
.msg-latest{ .msg-latest {
border-right: none; border-right: none;
align-items: flex-end; align-items: flex-end;
} }
.msg-title{ .msg-title {
width: 120px; width: 120px;
height: 14px; height: 14px;
font-size: 12px; font-size: 12px;
...@@ -237,8 +241,8 @@ ...@@ -237,8 +241,8 @@
line-height: 14px; line-height: 14px;
color: rgba(45, 71, 106, 1); color: rgba(45, 71, 106, 1);
text-align: center; text-align: center;
} }
.msg-num{ .msg-num {
width: 120px; width: 120px;
height: 32px; height: 32px;
border-radius: 16px; border-radius: 16px;
...@@ -248,24 +252,23 @@ ...@@ -248,24 +252,23 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.msg-num-red{ .msg-num-red {
color: rgba(208, 2, 27, 1); color: rgba(208, 2, 27, 1);
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
} }
.msg-num-blue{ .msg-num-blue {
color: rgba(117, 178, 253, 1); color: rgba(117, 178, 253, 1);
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
} }
.lists{ .lists {
/*border: 1px solid red;*/ /*border: 1px solid red;*/
width: 100%; width: 100%;
height: auto; height: auto;
...@@ -273,8 +276,8 @@ ...@@ -273,8 +276,8 @@
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1); box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
} }
.list{ .list {
/*border: 1px solid dodgerblue;*/ /*border: 1px solid dodgerblue;*/
width: 100%; width: 100%;
height: 44px; height: 44px;
...@@ -285,26 +288,26 @@ ...@@ -285,26 +288,26 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.list-latest{ .list-latest {
border-bottom: none; border-bottom: none;
} }
.list-title{ .list-title {
width: auto; width: auto;
height: 16px; height: 16px;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
line-height: 16px; line-height: 16px;
color: rgba(45, 71, 106, 1); color: rgba(45, 71, 106, 1);
} }
.list-icon{ .list-icon {
margin-right: 16px; margin-right: 16px;
width: 8px; width: 8px;
height: 13px; height: 13px;
object-fit: cover; object-fit: cover;
} }
.main-menuBar { .main-menuBar {
/*border: 1px solid darkviolet;*/ /*border: 1px solid darkviolet;*/
box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1); box-shadow: inset 0px 1px 2px 0px rgba(221, 221, 221, 1);
width: 100%; width: 100%;
...@@ -312,37 +315,36 @@ ...@@ -312,37 +315,36 @@
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
background-color: #FAFAFA; background-color: #fafafa;
padding: 0px 14px; padding: 0px 14px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.menuBar-menu { .menuBar-menu {
/*background-color: greenyellow;*/ /*background-color: greenyellow;*/
width: 48px; width: 48px;
height: 47px; height: 47px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.menuBar-icon { .menuBar-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
object-fit: cover; object-fit: cover;
} }
.menuBar-title { .menuBar-title {
width: auto; width: auto;
height: 12px; height: 12px;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
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>
...@@ -46,37 +46,74 @@ ...@@ -46,37 +46,74 @@
background="#F8F8F8" background="#F8F8F8"
> >
<van-tab title="优惠券核销"> <van-tab title="优惠券核销">
<van-list v-model="writeOff" :finished="finished" @load="onLoad" > <van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell :value="item.action" class="content" v-for="(item,index) in writeOffList" :key="index"> <van-cell
:value="item.action"
class="content"
v-for="(item, index) in writeOffList"
:key="index"
>
<template slot="title"> <template slot="title">
<img src="../../../public/img/photo.png" alt=""> <img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{item.name}}</span> <span class="custom-title">{{ item.name }}</span>
</template> </template>
</van-cell> </van-cell>
</van-list> </van-list>
</van-tab> </van-tab>
<van-tab title="商品购买"> <van-tab title="商品购买">
<van-list v-model="writeOff" :finished="finished" @load="onLoad" > <van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell :value="item.action" class="content" v-for="(item,index) in writeOffList" :key="index"> <van-cell
:value="item.action"
class="content"
v-for="(item, index) in writeOffList"
:key="index"
>
<template slot="title"> <template slot="title">
<img src="../../../public/img/photo.png" alt=""> <img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{item.name}}</span> <span class="custom-title">{{ item.name }}</span>
</template> </template>
</van-cell> </van-cell>
</van-list> </van-list>
</van-tab> </van-tab>
<van-tab title="拉新会员"> <van-tab title="拉新会员">
<van-list v-model="writeOff" :finished="finished" @load="onLoad" > <van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell :value="item.action" class="content" v-for="(item,index) in writeOffList" :key="index"> <van-cell
:value="item.action"
class="content"
v-for="(item, index) in writeOffList"
:key="index"
>
<template slot="title"> <template slot="title">
<img src="../../../public/img/photo.png" alt=""> <img src="../../../public/img/photo.png" alt="" />
<span class="custom-title">{{item.name}}</span> <span class="custom-title">{{ item.name }}</span>
</template> </template>
</van-cell> </van-cell>
</van-list> </van-list>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</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" @click="menuCase()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['2']" />
<div class="menuBar-title">案例</div>
</div>
<div class="menuBar-menu" @click="menuProfit()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="menuBar-title menuBar-title-ac">收益</div>
</div>
<div class="menuBar-menu" @click="menuTask()">
<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">我的</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -90,29 +127,67 @@ export default { ...@@ -90,29 +127,67 @@ export default {
oldTime: "", oldTime: "",
writeOff: false, writeOff: false,
finished: false, finished: false,
writeOffList:[ writeOffList: [
{ {
action: "现金券核销", action: "现金券核销",
src: '', src: "",
name: "Solomon" name: "Solomon"
} }
], ],
ShoppingList:[ ShoppingList: [
{ {
action: "商品购买", action: "商品购买",
src: '', src: "",
name: "Solomon" name: "Solomon"
} }
], ],
newMemberList:[ newMemberList: [
{ {
action: "拉新会员", action: "拉新会员",
src: '', src: "",
name: "Solomon" name: "Solomon"
} }
],
// 图标
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: { methods: {
onSearch() {}, onSearch() {},
timeFormat(time) { timeFormat(time) {
...@@ -132,6 +207,27 @@ export default { ...@@ -132,6 +207,27 @@ export default {
// fetchSomeThing().catch(() => { // fetchSomeThing().catch(() => {
this.writeOff = false; this.writeOff = false;
// }) // })
},
menuCase() {
this.$router.push({ path: "/case" });
},
menuProfit() {
this.$router.push({ path: "/profitList" });
},
// 导航
checkNowMenuBar() {
let inData = "3";
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
},
menuBarClick(inData) {
this.$router.push(inData);
},
listTaskClick() {
this.$router.push("Task");
},
menuTask() {
this.$router.push({ path: "/taskList" });
} }
}, },
mounted() { mounted() {
...@@ -141,28 +237,31 @@ export default { ...@@ -141,28 +237,31 @@ export default {
</script> </script>
<style scoped> <style scoped>
.container >>> .van-tabs__wrap, .van-tabs__wrap--scrollable { .container >>> .van-tabs__wrap,
.van-tabs__wrap--scrollable {
height: 40px; height: 40px;
} }
.container >>> .van-tab,.van-tab--active,.van-ellipsis { .container >>> .van-tab,
.van-tab--active,
.van-ellipsis {
line-height: 40px; line-height: 40px;
} }
.tab { .tab {
box-shadow:0px 1px 3px 0px rgba(221,221,221,1); box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
} }
.content >>> .van-cell__value { .content >>> .van-cell__value {
font-size:14px; font-size: 14px;
font-weight:400; font-weight: 400;
color:rgba(45,71,106,1); color: rgba(45, 71, 106, 1);
line-height: 44px; line-height: 44px;
} }
.custom-title { .custom-title {
margin-left: 12px; margin-left: 12px;
font-size:16px; font-size: 16px;
font-weight:bold; font-weight: bold;
color:rgba(45,71,106,1); color: rgba(45, 71, 106, 1);
} }
.content img{ .content img {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 50%; border-radius: 50%;
...@@ -198,8 +297,8 @@ export default { ...@@ -198,8 +297,8 @@ export default {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: rgba(208, 2, 27, 1); color: rgba(208, 2, 27, 1);
margin: 0 auto;
margin-top: 8px; margin-top: 8px;
margin-left: 20px;
} }
.detail { .detail {
font-size: 10px; font-size: 10px;
...@@ -234,4 +333,44 @@ export default { ...@@ -234,4 +333,44 @@ export default {
.right { .right {
border-left: 1px solid #eee; border-left: 1px solid #eee;
} }
.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> </style>
<template>
<div class="container">
<div class="person">
<span class="pic">
<img src="/img/photo.png" alt="" />
</span>
<span class="name">营业员1</span>
<div class="fr sx">
<span>月度</span>
<van-icon name="arrow-down" />
</div>
</div>
<div class="title">月度拉新任务情况统计</div>
<div class="title">9月新增客户</div>
<van-list
v-model="writeOff"
:finished="finished"
@load="onLoad"
class="list"
>
<van-cell
:value="item.time"
class="content"
v-for="(item, index) in list"
:key="index"
>
<template slot="title">
<img src="/img/photo.png" alt="" />
<div class="info">
<div class="custom-title">{{ item.name }}</div>
<div>18866664444</div>
</div>
</template>
</van-cell>
</van-list>
</div>
</template>
<script>
export default {
data() {
return {
writeOff: false,
finished: false,
list: [
{
time: "2019 / 12 /27",
src: "",
name: "Solomon"
}
]
};
},
methods: {
onLoad() {
// fetchSomeThing().catch(() => {
this.writeOff = false;
// })
}
}
};
</script>
<style scoped>
.fr >>> .van-icon-arrow-down:before {
margin-top: 3px;
}
.content >>> .van-cell__value {
font-size: 14px;
font-weight: 400;
color: rgba(45, 71, 106, 1);
line-height: 44px;
}
.container {
background-color: #f8f8f8;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
.sx {
width: 52px;
height: 20px;
border-radius: 2px;
display: flex;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 1);
font-size: 10px;
font-weight: 500;
color: #fff;
text-align: center;
}
.list {
width: 100%;
display: flex;
}
.info {
display: inline-block;
margin-left: 12px;
}
.person {
flex: 1;
height: 72px;
background: rgba(67, 119, 188, 1);
width: 100%;
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.pic {
/* display: inline-block; */
width: 48px;
height: 48px;
}
.pic img {
width: 100%;
border-radius: 50%;
}
.name {
font-size: 14px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
margin-right: 175px;
}
.title {
height: 44px;
line-height: 44px;
padding-left: 16px;
font-size: 12px;
font-weight: 400;
color: rgba(45, 71, 106, 1);
}
.content img {
width: 44px;
height: 44px;
border-radius: 50%;
}
</style>
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
class="tab" class="tab"
background="#F8F8F8" background="#F8F8F8"
> >
<van-tab title="人员拉新" > <van-tab title="人员拉新">
<van-list v-model="writeOff" :finished="finished" @load="onLoad"> <van-list v-model="writeOff" :finished="finished" @load="onLoad">
<van-cell <van-cell
:value="item.number" :value="item.number"
...@@ -31,6 +31,28 @@ ...@@ -31,6 +31,28 @@
<van-tab title="推活动"> </van-tab> <van-tab title="推活动"> </van-tab>
<van-tab title="推商品"> </van-tab> <van-tab title="推商品"> </van-tab>
</van-tabs> </van-tabs>
<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" @click="menuCase()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['2']" />
<div class="menuBar-title">案例</div>
</div>
<div class="menuBar-menu" @click="menuProfit()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['3']" />
<div class="menuBar-title">收益</div>
</div>
<div class="menuBar-menu" @click="menuTask()">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['4']" />
<div class="menuBar-title menuBar-title-ac">任务</div>
</div>
<div class="menuBar-menu" @click="menuBarClick('Me')">
<img class="menuBar-icon" :src="menuBarInfo.icon.now['5']" />
<div class="menuBar-title">我的</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -40,50 +62,112 @@ export default { ...@@ -40,50 +62,112 @@ export default {
return { return {
writeOff: false, writeOff: false,
finished: false, finished: false,
newMemberList:[ newMemberList: [
{ {
number: 100, number: 100,
src: '', src: "",
name: "Solomon" name: "Solomon"
} }
],
// 图标
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: { methods: {
onClick() {}, onClick() {},
onLoad() { onLoad() {
// fetchSomeThing().catch(() => { // fetchSomeThing().catch(() => {
this.writeOff = false; this.writeOff = false;
// }) // })
}
}, },
// 导航
checkNowMenuBar() {
let inData = "4";
this.menuBarInfo.icon.now = this.menuBarInfo.icon.ua;
this.menuBarInfo.icon.now[inData] = this.menuBarInfo.icon.ac[inData];
},
menuBarClick(inData) {
this.$router.push(inData);
},
listTaskClick() {
this.$router.push("Task");
},
menuProfit() {
this.$router.push({ path: "/profitList" });
},
menuTask() {
this.$router.push({ path: "/taskList" });
},
menuCase() {
this.$router.push({ path: "/case" });
}
}
}; };
</script> </script>
<style scoped> <style scoped>
.container >>> .van-tabs__wrap, .van-tabs__wrap--scrollable { .container >>> .van-tabs__wrap,
.van-tabs__wrap--scrollable {
height: 40px; height: 40px;
} }
.container >>> .van-tab,.van-tab--active,.van-ellipsis { .container >>> .van-tab,
.van-tab--active,
.van-ellipsis {
line-height: 40px; line-height: 40px;
} }
.content >>> .van-icon-arrow:before { .content >>> .van-icon-arrow:before {
margin-top: 10px; margin-top: 10px;
color: #2D476A; color: #2d476a;
} }
.content >>> .van-cell__value { .content >>> .van-cell__value {
font-size:14px; font-size: 14px;
font-weight:400; font-weight: 400;
color:rgba(45,71,106,1); color: rgba(45, 71, 106, 1);
line-height: 44px; line-height: 44px;
} }
.custom-title { .custom-title {
margin-left: 12px; margin-left: 12px;
font-size:16px; font-size: 16px;
font-weight:bold; font-weight: bold;
color:rgba(45,71,106,1); color: rgba(45, 71, 106, 1);
} }
.content img{ .content img {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 50%; border-radius: 50%;
...@@ -104,4 +188,44 @@ export default { ...@@ -104,4 +188,44 @@ export default {
.van-tabs__nav--card { .van-tabs__nav--card {
margin: 0; margin: 0;
} }
.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> </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