Browse Source

隐藏分类

master
jiangyy 4 years ago
parent
commit
cca8a71fe5
  1. 814
      epmet-oper-web/src/assets/scss/modules/wx-mini/score.scss
  2. 94
      epmet-oper-web/src/components/wx-index/score.vue
  3. 8
      epmet-oper-web/src/views/modules/customer/customize/CategoryList.vue

814
epmet-oper-web/src/assets/scss/modules/wx-mini/score.scss

@ -1,6 +1,6 @@
@import "@/assets/scss/c/config.scss"; @import '@/assets/scss/c/config.scss';
@import "@/assets/scss/c/function.scss"; @import '@/assets/scss/c/function.scss';
@import "@/assets/scss/c/anime.scss"; @import '@/assets/scss/c/anime.scss';
// 积分银行-积分排行 // 积分银行-积分排行
.score_rank { .score_rank {
@ -22,7 +22,7 @@
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
top: 7px; top: 7px;
left: 0; left: 0;
@ -31,30 +31,30 @@
background: rgba(230, 0, 0, 1); background: rgba(230, 0, 0, 1);
border-radius: 3px; border-radius: 3px;
} }
.score_more{ .score_more {
position: absolute; position: absolute;
top:13px; top: 13px;
right:10px; right: 10px;
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
color: rgb(151, 150, 150); color: rgb(151, 150, 150);
} }
} }
.rank_tabs{ .rank_tabs {
margin:10px 20px; margin: 10px 20px;
display: flex; display: flex;
background: #F8F8F8; background: #f8f8f8;
border-radius: 5px; border-radius: 5px;
height: 40px; height: 40px;
justify-content: space-around; justify-content: space-around;
padding:5px 0; padding: 5px 0;
.tabs_1{ .tabs_1 {
width:28%; width: 28%;
text-align: center; text-align: center;
height: 30px; height: 30px;
background: #FFFFFF; background: #ffffff;
box-shadow: 0px 4px 12px 0px rgba(63, 63, 63, 0.1); box-shadow: 0px 4px 12px 0px rgba(63, 63, 63, 0.1);
border-radius: 5px; border-radius: 5px;
font-size: 15px; font-size: 15px;
@ -63,8 +63,8 @@
color: #333333; color: #333333;
line-height: 30px; line-height: 30px;
} }
.tabs_2{ .tabs_2 {
width:28%; width: 28%;
text-align: center; text-align: center;
height: 30px; height: 30px;
font-size: 15px; font-size: 15px;
@ -73,16 +73,12 @@
color: #999999; color: #999999;
line-height: 30px; line-height: 30px;
} }
} }
} }
} }
//积分银行-党员积分排行榜 //积分银行-党员积分排行榜
.score_party{ .score_party {
position: relative; position: relative;
margin-top: 10px; margin-top: 10px;
.score_party_content { .score_party_content {
@ -99,253 +95,249 @@
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
top: 7px; top: 7px;
left: 0; left: 0;
width: 3px; width: 3px;
height: 15px; height: 15px;
background: rgba(230, 0, 0, 1.0); background: rgba(230, 0, 0, 1);
border-radius: 3px; border-radius: 3px;
} }
} }
.rank_tabs{ .rank_tabs {
margin:0px 15px 0px; margin: 0px 15px 0px;
display: flex; display: flex;
padding:0px 0px; padding: 0px 0px;
.rank_title_left{ .rank_title_left {
margin-left: 25px; margin-left: 25px;
margin-top: 10px; margin-top: 10px;
width:30%; width: 30%;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
font-family: PingFang-SC; font-family: PingFang-SC;
padding:0px 0px 0px 0px; padding: 0px 0px 0px 0px;
font-weight: 600; font-weight: 600;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
} }
.red_line{ .red_line {
height: 3px; height: 3px;
width: 30px; width: 30px;
background-color: red; background-color: red;
position: absolute; position: absolute;
margin-left: 56px; margin-left: 56px;
margin-top: 33px; margin-top: 33px;
border-radius:4px; border-radius: 4px;
} }
.rank_title_right{ .rank_title_right {
margin-left: 70px; margin-left: 70px;
margin-top: 12px; margin-top: 12px;
width:30%; width: 30%;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
font-family: PingFang-SC; font-family: PingFang-SC;
padding:0px 0px 0px 0px; padding: 0px 0px 0px 0px;
font-weight: 500; font-weight: 500;
color: rgb(171, 171, 171); color: rgb(171, 171, 171);
} }
} }
.m-box {
.m-box{ width: 328px;
width: 328px; height: 100%;
height:100%; //height: 480px;
//height: 480px; background-color: white;
background-color: white; position: relative;
float: left;
border-radius: 10px;
margin: 0px 15px 0 15px;
padding-bottom: 7px;
box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26);
.line {
width: 310px;
border-bottom: 1px solid #e7eeee;
margin-left: 15px;
margin-top: 26px;
margin-bottom: 7px;
position: relative; position: relative;
float: left; }
border-radius: 10px; .list6 {
margin: 0px 15px 0 15px; @include list;
padding-bottom: 7px; width: 60px;
box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26); margin-left: 145px;
.line{ margin-top: 20px;
width: 310px; position: relative;
border-bottom: 1px solid #e7eeee; text-align: center;
margin-left: 15px; font-size: 13px;
margin-top: 26px; color: #b9b9b9;
margin-bottom: 7px; margin-bottom: 10px;
position: relative; font-size: PingFang-SC;
} }
.list6{
@include list;
width: 60px;
margin-left: 145px;
margin-top: 20px;
position: relative;
text-align: center;
font-size: 13px;
color: #b9b9b9;
margin-bottom:10px;
font-size: PingFang-SC;
}
.rank_img_score { .rank_img_score {
width: 327px; width: 327px;
height: 160px; height: 160px;
.item{ .item {
position: relative; position: relative;
float: left; float: left;
border-radius: 10px; border-radius: 10px;
background-color: white; background-color: white;
margin-left: 0px; margin-left: 0px;
margin-top: 15px; margin-top: 15px;
width: 33.33%; width: 33.33%;
.d-group-logo { .d-group-logo {
position: absolute; position: absolute;
left: 8px; left: 8px;
top: 74px; top: 74px;
width: 10px; width: 10px;
height: 10px; height: 10px;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
.logo1{ .logo1 {
@include img123; @include img123;
background-color: #f14805; background-color: #f14805;
left: 45px; left: 45px;
}
.logo2{
@include img123;
background-color: #ff0606;
left: 36px;
}
.logo3{
@include img123;
background-color: #ffa515;
left: 30px;
}
span {
position: absolute;
z-index: 10;
font-size: 16px;
font-style: italic;
color: white;
width:17px;
height: 17px;
margin-left: 50px;
position: absolute;
display: block;
}
} }
.d-group-rank{ .logo2 {
position: absolute; @include img123;
padding-top: 1px; background-color: #ff0606;
font-style: italic; left: 36px;
.rank_1{
@include shuzi_123;
margin-left: 58px;
}
.rank_2{
@include shuzi_123;
margin-left: 48px;
}
.rank_3{
margin-left: 43px;
@include shuzi_123;
}
} }
.d-group-name{ .logo3 {
position: absolute; @include img123;
font-family: PingFang-SC; background-color: #ffa515;
font-weight: 600; left: 30px;
.name_1{
margin-left: 47px;
@include name_123;
}
.name_2{
margin-left: 41px;
@include name_123;
}
.name_3{
margin-left: 28px;
@include name_123;
}
} }
.d-group-score{ span {
position: absolute;
z-index: 10;
font-size: 16px;
font-style: italic;
color: white;
width: 17px;
height: 17px;
margin-left: 50px;
position: absolute; position: absolute;
font-family: PingFang-SC; display: block;
.score_1{ }
margin-left: 50px; }
@include jifen; .d-group-rank {
} position: absolute;
.score_2{ padding-top: 1px;
margin-left: 42px; font-style: italic;
@include jifen;
} .rank_1 {
.score_3{ @include shuzi_123;
margin-left: 36px; margin-left: 58px;
@include jifen; }
} .rank_2 {
@include shuzi_123;
margin-left: 48px;
}
.rank_3 {
margin-left: 43px;
@include shuzi_123;
}
}
.d-group-name {
position: absolute;
font-family: PingFang-SC;
font-weight: 600;
.name_1 {
margin-left: 47px;
@include name_123;
}
.name_2 {
margin-left: 41px;
@include name_123;
} }
.name_3 {
margin-left: 28px;
@include name_123;
}
}
.d-group-score {
position: absolute;
font-family: PingFang-SC;
.score_1 {
margin-left: 50px;
@include jifen;
}
.score_2 {
margin-left: 42px;
@include jifen;
}
.score_3 {
margin-left: 36px;
@include jifen;
}
}
.d-group-imgback{ .d-group-imgback {
position: absolute; position: absolute;
margin-top: 0.5px; margin-top: 0.5px;
.back_1{ .back_1 {
width:75px; width: 75px;
height: 75px; height: 75px;
left: 24px; left: 24px;
top: 9.5px; top: 9.5px;
@include img_123; @include img_123;
} }
.back_2{ .back_2 {
@include img_123; @include img_123;
width:88px; width: 88px;
height: 88px; height: 88px;
left: 9px; left: 9px;
top: 0px; top: 0px;
} }
.back_3{ .back_3 {
width:75px; width: 75px;
height: 75px; height: 75px;
left: 9px; left: 9px;
top: 9.5px; top: 9.5px;
@include img_123; @include img_123;
} }
}
.d-group-img {
position: relative;
margin-top: 10px;
width: 50px;
height: 50px;
margin-left: 0px;
.img1 {
@include img_small12;
left: 28px;
right: 0;
bottom: 0;
}
.img2 {
width: 79.5px;
height: 79.5px;
position: absolute;
display: block;
top: 19px;
left: 13.3px;
right: 0;
bottom: 0px;
margin: auto;
border-radius: 100%;
} }
.d-group-img { .img3 {
position: relative; @include img_small12;
margin-top: 10px ; left: 13px;
width: 50px; right: 5;
height: 50px; bottom: 5;
margin-left: 0px;
.img1{
@include img_small12;
left: 28px;
right: 0;
bottom: 0;
}
.img2{
width: 79.5px;
height: 79.5px;
position: absolute;
display: block;
top: 19px;
left: 13.3px;
right: 0;
bottom: 0px;
margin: auto;
border-radius: 100%;
}
.img3{
@include img_small12;
left: 13px;
right: 5;
bottom: 5;
}
} }
} }
} }
}
} }
} }
} }
.rank_box{ .rank_box {
height:100%; height: 100%;
background-color: white; background-color: white;
position: relative; position: relative;
// border-radius: 10px; // border-radius: 10px;
@ -353,150 +345,390 @@
padding-bottom: 7px; padding-bottom: 7px;
// box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26); // box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26);
.list_title{ .list_title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding:10px 10px 0 10px; padding: 10px 10px 0 10px;
margin-top: 8px; margin-top: 8px;
text-align: center; text-align: center;
color: #b9b9b9; color: #b9b9b9;
font-size: 12px; font-size: 12px;
} }
.score_list{ .score_list {
margin-top:10px; margin-top: 10px;
padding:0 10px; padding: 0 10px;
.item{ .item {
display: flex; display: flex;
height:40px; height: 40px;
line-height: 40px; line-height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 8px; margin-top: 8px;
text-align: center; text-align: center;
.d-group-rank{ .d-group-rank {
text-align: center; text-align: center;
font-style: italic; font-style: italic;
>span{ > span {
font-family: PingFang-SC; font-family: PingFang-SC;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
} }
.span_rank1{ .span_rank1 {
color: #E60000; color: #e60000;
} }
.span_rank2{ .span_rank2 {
color: #F56A24; color: #f56a24;
} }
.span_rank3{ .span_rank3 {
color: #F6A33B; color: #f6a33b;
} }
} }
.d-group-img{ .d-group-img {
text-align: center; text-align: center;
>img{ > img {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 25px; border-radius: 25px;
} }
} }
} }
} }
.score_no_border{ .score_no_border {
padding:0 20px; padding: 0 20px;
} }
} }
.single{ .single {
width:100%; width: 100%;
margin:10px 0; margin: 10px 0;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.single_bc{ .single_bc {
width:45%; width: 45%;
height: 140px; height: 140px;
border-radius: 5px; border-radius: 5px;
background: linear-gradient(-54deg, rgba(255, 248, 247, 0.56), rgba(255, 215, 208, 0.56)); background: linear-gradient(
-54deg,
.single_name{ rgba(255, 248, 247, 0.56),
margin:15px 0 0 10px; rgba(255, 215, 208, 0.56)
);
.single_name {
margin: 15px 0 0 10px;
font-size: 15px; font-size: 15px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 23px; line-height: 23px;
height:35px; height: 35px;
>img{ > img {
width: 35px; width: 35px;
height: 35px; height: 35px;
border-radius: 50%; border-radius: 50%;
} }
>span{ > span {
margin-left:10px; margin-left: 10px;
line-height: 30px; line-height: 30px;
} }
} }
.single_rank{ .single_rank {
width:100%; width: 100%;
padding:10px 5px; padding: 10px 5px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.single_rank_bc{ .single_rank_bc {
width:45%; width: 45%;
height: 65px; height: 65px;
border-radius: 5px; border-radius: 5px;
padding:10px; padding: 10px;
.score{ .score {
text-align: center; text-align: center;
.span_title{ .span_title {
font-size: 13px; font-size: 13px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #ffffff;
line-height: 23px; line-height: 23px;
} }
.span_no{ .span_no {
font-size: 15px; font-size: 15px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
color: #FFFFFF; color: #ffffff;
line-height: 23px; line-height: 23px;
} }
} }
.rank2_row2{ .rank2_row2 {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
line-height: 24px; line-height: 24px;
} }
} }
.bc_left{ .bc_left {
background: linear-gradient(-10deg, #2F93EE, #03C7EF); background: linear-gradient(-10deg, #2f93ee, #03c7ef);
} }
.bc_right{ .bc_right {
background: linear-gradient(0deg, #F6A43B, #F56923); background: linear-gradient(0deg, #f6a43b, #f56923);
} }
} }
} }
}
.score_news {
position: relative;
margin: 0 auto;
margin-top: 5px;
padding-bottom: 18px;
background-color: #fff;
.cpt-title {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
// border-bottom: 1px solid #e7eeee;
line-height: 15px;
margin-left: 19px;
.cpt-title-t {
position: relative;
margin: 5px 0 0;
padding: 7px 11px 0;
font-size: 15px;
line-height: 20px;
font-family: Source Han Serif SC;
font-weight: 800;
color: #000000;
&::before {
content: '';
position: absolute;
top: 7px;
left: 0;
width: 4px;
height: 20px;
background: rgba(230, 0, 0, 1);
border-radius: 1px;
}
}
}
.info {
padding: 11px;
margin: 3px 8px 0;
height: 85px;
display: flex;
justify-content: center;
.line {
width: 1px;
height: 88px;
background-color: #ffffff;
}
.card {
width: 50%;
background: #fff2f1;
border-radius: 3px;
box-sizing: border-box;
padding: 0 19px;
text-align: center;
display: flex;
flex-direction: column;
.title {
@include toe;
display: flex;
align-items: center;
margin-top: 5px;
overflow: hidden;
justify-content: center;
.avatar {
flex-shrink: 0;
margin-right: 5px;
display: block;
width: 14px;
height: 14px;
border-radius: 100%;
line-height: 32px;
}
.avatar2 {
box-sizing: border-box;
padding: 6px;
background-color: #fff;
flex-shrink: 0;
margin-right: 5px;
display: block;
width: 29px;
height: 29px;
border-radius: 100%;
line-height: 32px;
}
.name {
@include toe;
font-size: 11px;
font-family: Source Han Serif SC;
font-weight: 800;
color: #000000;
}
}
.ranks {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 9px;
.rank {
display: flex;
flex-direction: column;
text-align: center;
justify-content: space-around;
.rank-value {
@include toe;
margin-top: 5px;
font-size: 11px;
font-family: PingFang SC;
font-family: Source Han Serif SC;
font-weight: bold;
span {
font-size: 11px;
}
}
.value_color_1 {
color: #e72418;
}
.value_color_2 {
color: #27ae60;
}
.rank-field {
font-size: 9px;
font-family: Source Han Serif SC;
font-weight: 400;
color: #000000;
}
}
}
}
}
.rank_title {
margin: 10px 0;
// height: 100px;
line-height: 30px;
width: 100%;
display: flex;
padding: 5px 5px;
box-sizing: border-box;
font-size: 14px;
background: #f8f8f8;
border-radius: 5px;
.tab {
flex: 1;
margin: 0 5px;
width: 105px;
border-radius: 5px;
line-height: 25px;
text-align: center;
color: #999;
font-weight: 500;
}
.selTab {
color: #333333;
background-color: #fff;
box-shadow: 0px 2px 6px 0px rgba(63, 63, 63, 0.1);
font-weight: bold;
}
}
} }
.score_list {
margin: 0 20px 0 20px;
.item {
padding: 8px 0 4px;
background-color: #ffffff;
width: 100%;
display: flex;
height: 30px;
align-items: center;
font-size: 11px;
border-bottom: 1px solid #f7f7f7;
.logo {
width: 10%;
height: 30px;
line-height: 25px;
text-align: center;
> img {
width: 18px;
height: 15px;
}
> span {
font-size: 11px;
font-family: Source Han Serif SC;
font-weight: 400;
color: #000000;
}
}
.avatar {
height: 25px;
margin-left: 10px;
text-align: center;
> img {
top: -1px;
width: 22px;
height: 22px;
border-radius: 100%;
}
}
.name {
float: left;
width: 80%;
font-size: 12px;
margin-left: 11px;
z-index: 10;
font-family: Source Han Serif SC;
font-weight: 400;
color: #000000;
}
.score {
float: right;
width: 20%;
z-index: 20;
text-align: center;
font-size: 11px;
font-family: Source Han Serif SC;
font-weight: 400;
color: #000000;
line-height: 32px;
}
}
}

94
epmet-oper-web/src/components/wx-index/score.vue

@ -5,9 +5,93 @@
@click="focusCpt"> @click="focusCpt">
<!-- 积分银行-积分排行组件 --> <!-- 积分银行-积分排行组件 -->
<div class="score_rank" <div v-if="item.componentFrontId==='resi-functionList-score-rank'">
v-if="item.componentFrontId==='resi-functionList-score-rank'">
<div class="score_rank_content"> <div class="score_news">
<div class="cpt-title">
<div v-if="item.configuration.title"
class="cpt-title-t">{{item.configuration.title}}</div>
<div v-else
class="cpt-title-t">积分排行</div>
</div>
<div class="info">
<div class="card">
<div class="title">
<img class="avatar"
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
mode="aspectFill">
<div class="name">{{item.demoData.info1.title1}}</div>
</div>
<div class="ranks">
<div class="rank">
<div class="rank-field">网格排名</div>
<div class="rank-value value_color_1"><span>{{item.demoData.info1.no1}}</span></div>
</div>
<div class="rank">
<div class="rank-field">总排名</div>
<div class="rank-value value_color_2"><span>{{item.demoData.info1.no2}}</span></div>
</div>
</div>
</div>
<div class="line"></div>
<div class="card">
<div class="title">
<img class="avatar2"
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
mode="aspectFill">
<div class="name">{{item.demoData.info2.title1}}</div>
</div>
<div class="ranks">
<div class="rank">
<div class="rank-field">社区排名</div>
<div class="rank-value value_color_1"><span>{{item.demoData.info2.no1}}</span></div>
</div>
<div class="rank">
<div class="rank-field">总排名</div>
<div class="rank-value value_color_2"><span>{{item.demoData.info2.no2}}</span></div>
</div>
</div>
</div>
</div>
<div class="score_list">
<div class="item"
:key="subindex"
v-for="(subitem,subindex) in item.demoData.list">
<div class="logo">
<img v-if="subindex===0"
src="../../assets/img/modules/wx-mini/index-set/rank1.png"
mode="aspectFill">
<img v-else-if="subindex===1"
src="../../assets/img/modules/wx-mini/index-set/rank2.png"
mode="aspectFill">
<img v-else-if="subindex===2"
src="../../assets/img/modules/wx-mini/index-set/rank3.png"
mode="aspectFill">
<span v-else>{{ subindex+1 }}</span>
</div>
<div class="avatar">
<img src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
mode="aspectFill">
</div>
<div class="name">{{ subitem.name }}</div>
<div class="score">{{ subitem.score }}</div>
</div>
</div>
</div>
<!-- <div class="score_rank_content">
<div v-if="item.configuration.title" <div v-if="item.configuration.title"
class="title">{{item.configuration.title}}</div> class="title">{{item.configuration.title}}</div>
<div v-else <div v-else
@ -26,7 +110,7 @@
<div>当月积分</div> <div>当月积分</div>
</div> </div>
<!--更多排名-->
<div class="score_list score_no_border"> <div class="score_list score_no_border">
<div class="item" <div class="item"
:key="subindex" :key="subindex"
@ -67,7 +151,7 @@
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
<!-- 积分银行-积分排行2 --> <!-- 积分银行-积分排行2 -->

8
epmet-oper-web/src/views/modules/customer/customize/CategoryList.vue

@ -6,9 +6,9 @@
<span style="margin-right:10px">{{customerName}}</span> <span style="margin-right:10px">{{customerName}}</span>
<el-button type="default" <el-button type="default"
@click="diaCancel">取消返回</el-button> @click="diaCancel">取消返回</el-button>
<el-button class="" <!-- <el-button class=""
type="primary" type="primary"
@click="addShow()">{{"新增" }}</el-button> @click="addShow()">{{"新增" }}</el-button> -->
<!-- <el-input v-model="search" <!-- <el-input v-model="search"
placeholder="请输入内容"></el-input> --> placeholder="请输入内容"></el-input> -->
</div> </div>
@ -49,10 +49,10 @@
<el-button type="text" <el-button type="text"
size="small" size="small"
@click="deleteCategory(scope.row)">删除</el-button> @click="deleteCategory(scope.row)">删除</el-button>
<el-button v-if="(scope.row.children )" <!-- <el-button v-if="(scope.row.children )"
type="text" type="text"
size="small" size="small"
@click="showAddLevel2(scope.row)">{{ "新增二级分类"}}</el-button> @click="showAddLevel2(scope.row)">{{ "新增二级分类"}}</el-button> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>

Loading…
Cancel
Save