Commit 76d6f00e authored by Z's avatar Z

Z: Dot: 侧边栏主页/优惠券: Layout done.

parent 32eab36d
...@@ -10,6 +10,11 @@ const routes = [ ...@@ -10,6 +10,11 @@ const routes = [
name: 'home', name: 'home',
component: Home component: Home
}, },
{
path: '/discount',
name: 'Discount',
component: ()=>import('@/views/sideNav/discount/index')
},
// { // {
// path: '/about', // path: '/about',
// name: 'about', // name: 'about',
......
<template> <template>
<div> <div>
<button @click="disClick">discount</button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'home' name: "home",
methods: {
disClick() {
this.$router.push("Discount");
} }
}
};
</script> </script>
<style scoped> <style scoped>
</style> </style>
<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: "https://ezhq.xyz/img/main/logo_sona.jpg",
usedPercent: "10",
money: "100",
shareMan: "Alice",
commision: "11"
},
{
imgUrl: "https://pbs.twimg.com/media/D01HBOkU0AMLWGU?format=jpg&name=medium",
usedPercent: "20",
money: "200",
shareMan: "Bob",
commision: "22"
},
{
imgUrl: "https://pbs.twimg.com/media/EMTspXRU0AIpV9e?format=jpg&name=medium",
usedPercent: "30",
money: "300",
shareMan: "Clid",
commision: "33"
},
{
imgUrl: "https://pbs.twimg.com/media/EMTqzHcVAAIQD6n?format=jpg&name=medium",
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>
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