jiangyy
4 years ago
19 changed files with 4326 additions and 659 deletions
|
After Width: | Height: | Size: 132 B |
|
After Width: | Height: | Size: 405 B |
|
After Width: | Height: | Size: 629 B |
@ -0,0 +1,219 @@ |
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
@import "@/assets/scss/c/anime.scss"; |
|||
|
|||
//楼院小组-推荐小组 |
|||
.group { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
width: 100%; |
|||
// overflow-x: scroll; |
|||
overflow: hidden; |
|||
|
|||
.list { |
|||
width: 1000px; |
|||
overflow: hidden; |
|||
|
|||
.item { |
|||
width: 205px; |
|||
height:122px; |
|||
position: relative; |
|||
float: left; |
|||
border-radius: 10px; |
|||
background-color: #ffffff; |
|||
margin-left: 10px; |
|||
box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26); |
|||
|
|||
|
|||
.row1{ |
|||
display:flex; |
|||
margin:10px; |
|||
|
|||
.left{ |
|||
display: flex; |
|||
flex-direction:column; |
|||
|
|||
.avatar{ |
|||
position: relative; |
|||
width: 50px; |
|||
height: 50px; |
|||
padding: 4px; |
|||
overflow: hidden; |
|||
border-radius: 100%; |
|||
box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26); |
|||
|
|||
img { |
|||
position: absolute; |
|||
display: block; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
width: 42px; |
|||
height: 42px; |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
} |
|||
|
|||
.no{ |
|||
font-size: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #FFFFFF; |
|||
background: linear-gradient(0deg, #F95C2C 0%, #E3271C 100%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
} |
|||
} |
|||
|
|||
.right{ |
|||
margin-left:10px; |
|||
|
|||
.groupName{ |
|||
font-size: 15px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
} |
|||
.info{ |
|||
margin-top:5px; |
|||
span{ |
|||
font-size: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #666666; |
|||
} |
|||
.span_info2{ |
|||
margin-left:5px; |
|||
} |
|||
} |
|||
.type{ |
|||
text-align: center; |
|||
margin-top:5px; |
|||
width: 35px; |
|||
font-size: 11px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #F67F45; |
|||
border: 1px solid #F67F45; |
|||
border-radius: 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.row2{ |
|||
display:flex; |
|||
text-align: center; |
|||
justify-content:space-around; |
|||
margin:10px 20px; |
|||
|
|||
.operation{ |
|||
text-align: center; |
|||
|
|||
img{ |
|||
height:12px; |
|||
width:12px; |
|||
} |
|||
span{ |
|||
text-align: center; |
|||
margin-left:3px; |
|||
font-size: 11px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #E60000; |
|||
line-height: 42px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.d-group-no { |
|||
position: absolute; |
|||
left: 10px; |
|||
top: 0; |
|||
width: 25px; |
|||
height: 21px; |
|||
line-height: 21px; |
|||
text-align: center; |
|||
|
|||
img { |
|||
position: absolute; |
|||
z-index: 10; |
|||
display: block; |
|||
left: 0; |
|||
top: 0; |
|||
width: 25px; |
|||
} |
|||
span { |
|||
position: relative; |
|||
z-index: 20; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
.d-group-avatar { |
|||
position: relative; |
|||
margin: 30px auto 5px; |
|||
width: 60px; |
|||
height: 60px; |
|||
padding: 4px; |
|||
overflow: hidden; |
|||
border-radius: 100%; |
|||
box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26); |
|||
|
|||
img { |
|||
position: absolute; |
|||
display: block; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
width: 52px; |
|||
height: 52px; |
|||
border-radius: 100%; |
|||
} |
|||
} |
|||
.d-group-name { |
|||
@include toe; |
|||
width: 120px; |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
font-size: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 21px; |
|||
} |
|||
.d-group-info { |
|||
@include toe; |
|||
width: 140px; |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
font-size: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(102, 102, 102, 1); |
|||
line-height: 21px; |
|||
} |
|||
.d-group-btn { |
|||
margin: 10px auto 20px; |
|||
width: 65px; |
|||
height: 25px; |
|||
line-height: 25px; |
|||
background: rgba(255, 76, 82, 1); |
|||
border-radius: 25px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,857 @@ |
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
@import "@/assets/scss/c/anime.scss"; |
|||
|
|||
// 党建声音-轮播新闻 |
|||
.mw-cpt-swiper { |
|||
position: relative; |
|||
|
|||
.d-cpt-wrap { |
|||
padding: 10px 10px 15px 10px; |
|||
background-color: #fff; |
|||
.d-cpt-subwrap { |
|||
position: relative; |
|||
height: 160px; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
> img { |
|||
width: 100%; |
|||
height: 160px; |
|||
} |
|||
> div { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 30px; |
|||
padding: 0 10px; |
|||
line-height: 30px; |
|||
background: rgba(0, 0, 0, 0.26); |
|||
overflow: hidden; |
|||
|
|||
> span { |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
> i { |
|||
float: right; |
|||
position: relative; |
|||
top: 11px; |
|||
margin: 0 2px; |
|||
width: 5px; |
|||
height: 5px; |
|||
border-radius: 50%; |
|||
background: rgba(0, 0, 0, 0.26); |
|||
&.z-on { |
|||
background: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 爱心互助-banner |
|||
.mw-cpt-banner { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
.d-cpt-wrap { |
|||
padding: 10px 10px 15px 10px; |
|||
background-color: rgba(233, 233, 233, 0.26); |
|||
.d-cpt-subwrap { |
|||
position: relative; |
|||
height: 160px; |
|||
border-radius: 10px; |
|||
overflow: hidden; |
|||
> img { |
|||
width: 100%; |
|||
height: 160px; |
|||
} |
|||
|
|||
.d-title { |
|||
margin-top:1px; |
|||
position: absolute; |
|||
border-radius: 5px; |
|||
top: 0; |
|||
right: 0; |
|||
width:230px; |
|||
padding: 0 10px; |
|||
background: rgb(255, 255, 255); |
|||
overflow: hidden; |
|||
|
|||
.left-log { |
|||
vertical-align: middle; |
|||
z-index: 10; |
|||
width: 15px; |
|||
margin-bottom:3px; |
|||
} |
|||
.s-title { |
|||
line-height: 21px; |
|||
margin-left:4px; |
|||
margin-bottom:3px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgb(0, 0, 0); |
|||
vertical-align: middle; |
|||
} |
|||
.d-group-no { |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 3px; |
|||
width: 50px; |
|||
height: 28px; |
|||
vertical-align: middle; |
|||
text-align: center; |
|||
|
|||
img { |
|||
position: absolute; |
|||
z-index: 10; |
|||
left: 0; |
|||
top: 0; |
|||
width: 50px; |
|||
} |
|||
span { |
|||
position: relative; |
|||
z-index: 20; |
|||
vertical-align: middle; |
|||
font-size: 7px; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 我的消息 |
|||
.mw-cpt-new_msg { |
|||
position: relative; |
|||
|
|||
.d-cpt-wrap { |
|||
width: 136px; |
|||
height: 50px; |
|||
background: rgba(255, 255, 255, 1); |
|||
box-shadow: 0px 2px 12px 0px rgba(211, 211, 211, 0.26); |
|||
border-radius: 50px 0 0 50px; |
|||
line-height: 50px; |
|||
img { |
|||
position: relative; |
|||
width: 40px; |
|||
margin: 5px; |
|||
vertical-align: top; |
|||
} |
|||
span { |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 76, 82, 1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 党建声音-最新发布 |
|||
.mw-cpt-cnt_news { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
|
|||
.d-cpt-wrap { |
|||
width: 355px; |
|||
margin: 0 auto; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
background: rgba(255, 255, 255, 1); |
|||
|
|||
.d-cpt-title { |
|||
position: relative; |
|||
margin: 10px 10px 0 10px; |
|||
padding: 7px 10px 13px; |
|||
font-size: 17px; |
|||
line-height: 15px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: rgba(51, 51, 51, 1); |
|||
border-bottom: 1px solid #e7eeee; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 7px; |
|||
left: 0; |
|||
width: 3px; |
|||
height: 15px; |
|||
background: rgba(230, 0, 0, 1); |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
padding: 0 10px; |
|||
.item { |
|||
position: relative; |
|||
padding: 10px 0; |
|||
padding-left: 110px; |
|||
border-bottom: 1px solid #eee; |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
> img { |
|||
position: absolute; |
|||
width: 100px; |
|||
height: 55px; |
|||
left: 0; |
|||
top: 11px; |
|||
border-radius: 5px; |
|||
} |
|||
.d-news-title { |
|||
margin: 7px 0; |
|||
height: 40px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 20px; |
|||
overflow: hidden; |
|||
} |
|||
.d-news-info { |
|||
margin-top: 17px; |
|||
margin-left: -110px; |
|||
padding: 0 1px; |
|||
font-size: 13px; |
|||
line-height: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
overflow: hidden; |
|||
> img { |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
width: 13px; |
|||
vertical-align: bottom; |
|||
} |
|||
> span { |
|||
@include toe; |
|||
display: inline-block; |
|||
max-width: 70%; |
|||
vertical-align: bottom; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item2 { |
|||
position: relative; |
|||
padding: 10px 0; |
|||
border-bottom: 1px solid #eee; |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
.d-news-title { |
|||
@include toe; |
|||
font-size: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 24px; |
|||
} |
|||
.d-news-content { |
|||
@include toe; |
|||
padding: 3px 0; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 20px; |
|||
} |
|||
.d-news-info { |
|||
margin-top: 5px; |
|||
padding: 0 1px; |
|||
font-size: 13px; |
|||
line-height: 26px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
overflow: hidden; |
|||
> img { |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
width: 26px; |
|||
vertical-align: bottom; |
|||
} |
|||
> span { |
|||
@include toe; |
|||
display: inline-block; |
|||
max-width: 70%; |
|||
vertical-align: bottom; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item3 { |
|||
position: relative; |
|||
padding: 10px 0; |
|||
border-bottom: 1px solid #eee; |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
.d-news-title { |
|||
@include toe; |
|||
font-size: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 24px; |
|||
} |
|||
.d-news-content { |
|||
@include toe; |
|||
padding: 3px 0; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 20px; |
|||
} |
|||
.d-news-info { |
|||
margin-top: 5px; |
|||
padding: 0 1px; |
|||
font-size: 13px; |
|||
line-height: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(153, 153, 153, 1); |
|||
overflow: hidden; |
|||
> img { |
|||
display: inline-block; |
|||
margin-right: 5px; |
|||
width: 13px; |
|||
vertical-align: bottom; |
|||
} |
|||
> span { |
|||
@include toe; |
|||
display: inline-block; |
|||
max-width: 70%; |
|||
vertical-align: bottom; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
// 爱心互助最新活动 |
|||
.mw-cpt-heart_news { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
|
|||
.d-cpt-wrap { |
|||
width: 355px; |
|||
margin: 0 auto; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
background: rgba(255, 255, 255, 1); |
|||
|
|||
.d-cpt-title { |
|||
position: relative; |
|||
margin: 10px 10px 0 10px; |
|||
padding: 7px 10px 13px; |
|||
font-size: 17px; |
|||
line-height: 15px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: rgba(51, 51, 51, 1); |
|||
border-bottom: 1px solid #e7eeee; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 7px; |
|||
left: 0; |
|||
width: 3px; |
|||
height: 15px; |
|||
background: rgba(230, 0, 0, 1); |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.more{ |
|||
position: absolute; |
|||
top:13px; |
|||
right:10px; |
|||
font-size: 13px; |
|||
font-weight: normal; |
|||
color: rgb(151, 150, 150); |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
padding: 0 10px; |
|||
.item { |
|||
position: relative; |
|||
padding: 5px 0; |
|||
height: 140px; |
|||
padding-left: 110px; |
|||
border-bottom: 1px solid #eee; |
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
> img { |
|||
position: absolute; |
|||
width: 110px; |
|||
height: 120px; |
|||
|
|||
left: 0; |
|||
top: 11px; |
|||
border-radius: 5px; |
|||
} |
|||
.d-news-title { |
|||
margin-left:7px; |
|||
height: 40px; |
|||
font-size: 16px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 20px; |
|||
overflow: hidden; |
|||
} |
|||
.d-news-time { |
|||
margin: 0 0 5px 7px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC; |
|||
font-weight: normal; |
|||
color: rgb(141, 141, 141); |
|||
line-height: 17px; |
|||
overflow: hidden; |
|||
display: flex; |
|||
|
|||
.d-news-time-title{ |
|||
height: 20px ; |
|||
display:flex ; |
|||
align-items:center; |
|||
>img{ |
|||
margin-right:2px; |
|||
width: 12px; |
|||
vertical-align: bottom; |
|||
} |
|||
>span{ |
|||
vertical-align: bottom; |
|||
} |
|||
} |
|||
.d-news-time-item{ |
|||
font-size: 13px; |
|||
width: 60%; |
|||
color: rgb(141, 141, 141); |
|||
> span { |
|||
vertical-align: bottom; |
|||
} |
|||
} |
|||
} |
|||
.d-news-adress { |
|||
margin: 0 0 7px 7px; |
|||
height: 20px; |
|||
font-size: 12px; |
|||
font-family: PingFang SC; |
|||
font-weight: normal; |
|||
color: rgb(141, 141, 141); |
|||
line-height: 20px; |
|||
overflow: hidden; |
|||
display:flex ; |
|||
align-items:center; |
|||
> img { |
|||
display: inline-block; |
|||
margin-right: 2px; |
|||
width: 12px; |
|||
vertical-align: bottom; |
|||
} |
|||
> span { |
|||
display: inline-block; |
|||
height: 100%; |
|||
max-width: 80%; |
|||
vertical-align: bottom; |
|||
} |
|||
} |
|||
.d-news-state { |
|||
margin: 0 0 7px 7px; |
|||
height: 20px; |
|||
font-size: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: normal; |
|||
color: rgb(141, 141, 141); |
|||
line-height: 20px; |
|||
overflow: hidden; |
|||
.d-news-state-limit{ |
|||
font-family: PingFang SC; |
|||
padding:3px 10px; |
|||
font-weight: 500; |
|||
background-color: rgb(170, 169, 169); |
|||
color: rgb(58, 58, 58); |
|||
border-radius: 90px; |
|||
} |
|||
.d-news-state-act{ |
|||
margin-left:10px; |
|||
font-family: PingFang SC; |
|||
padding:3px 10px; |
|||
font-weight: 500; |
|||
background-color: rgb(255, 195, 195); |
|||
color: rgb(255, 38, 38); |
|||
border-radius: 90px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 更多功能1 |
|||
.mw-cpt-cnt_menus { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
|
|||
.d-cpt-wrap { |
|||
width: 355px; |
|||
margin: 0 auto; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
background: rgba(255, 255, 255, 1); |
|||
|
|||
.list { |
|||
padding: 15px 0 5px; |
|||
overflow: hidden; |
|||
.item { |
|||
position: relative; |
|||
float: left; |
|||
margin: 0 24px; |
|||
width: 40px; |
|||
|
|||
> img { |
|||
display: block; |
|||
width: 40px; |
|||
height: 40px; |
|||
margin-bottom: 1px; |
|||
} |
|||
|
|||
p { |
|||
width: 100px; |
|||
margin-left: -30px; |
|||
line-height: 15px; |
|||
font-size: 13px; |
|||
text-align: center; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// 更多功能2 |
|||
.mw-cpt-cnt_function2 { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
|
|||
.d-cpt-wrap { |
|||
border-radius: 10px; |
|||
// overflow-x: scroll; |
|||
overflow: hidden; |
|||
margin: 0 13px; |
|||
padding:0 0 13px 0; |
|||
background-color: white; |
|||
|
|||
.link { |
|||
width: 100%; |
|||
position: relative; |
|||
|
|||
.link-item{ |
|||
display: inline; |
|||
position: relative; |
|||
|
|||
> img { |
|||
width:45%; |
|||
// width: 308px; |
|||
margin: 8px; |
|||
// height: 160px; |
|||
border-radius: 10px; |
|||
} |
|||
span { |
|||
position: absolute; |
|||
top: -10px; |
|||
left: 20px; |
|||
color: #fff; |
|||
font-size: 15px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.dots { |
|||
position: absolute; |
|||
bottom: 10px; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.dot { |
|||
margin: 0 5px; |
|||
width: 20px; |
|||
height: 4px; |
|||
border-radius: 6px; |
|||
background-color: #ddd; |
|||
transition: all ease $ad1; |
|||
|
|||
&.z-on { |
|||
background-color: $c1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
// 积分银行积分排行 |
|||
.mw-cpt-score_rank { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
|
|||
.d-cpt-wrap { |
|||
width: 100%; |
|||
// overflow-x: scroll; |
|||
overflow: hidden; |
|||
.d-cpt-title { |
|||
position: relative; |
|||
margin: 10px 10px 0 10px; |
|||
padding: 7px 10px 13px; |
|||
font-size: 17px; |
|||
line-height: 15px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: rgba(51, 51, 51, 1); |
|||
border-bottom: 1px solid #e7eeee; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 7px; |
|||
left: 0; |
|||
width: 3px; |
|||
height: 15px; |
|||
background: rgba(230, 0, 0, 1); |
|||
border-radius: 3px; |
|||
} |
|||
} |
|||
|
|||
.rank_title{ |
|||
margin:10px 20px; |
|||
display: flex; |
|||
.rank_title_total{ |
|||
margin-right:20px; |
|||
width:33%; |
|||
font-size: 15px; |
|||
text-align: center; |
|||
font-family: PingFang SC; |
|||
padding:3px 10px; |
|||
font-weight: 500; |
|||
background-color: rgba(239, 60, 61, 1); |
|||
color: rgb(255, 255, 255); |
|||
border-radius: 90px; |
|||
} |
|||
.rank_title_week{ |
|||
width:33%; |
|||
margin-right:20px; |
|||
font-size: 15px; |
|||
text-align: center; |
|||
font-family: PingFang SC; |
|||
padding:3px 10px; |
|||
font-weight: 500; |
|||
background-color: rgb(255, 255, 255); |
|||
color: rgb(0, 0, 0); |
|||
border-radius: 90px; |
|||
border-color: rgb(139, 139, 139); |
|||
border-width: 1px; |
|||
border-style: solid; |
|||
} |
|||
.rank_title_month{ |
|||
width:33%; |
|||
font-size: 15px; |
|||
text-align: center; |
|||
font-family: PingFang SC; |
|||
padding:3px 10px; |
|||
font-weight: 500; |
|||
background-color: rgb(255, 255, 255); |
|||
color: rgb(0, 0, 0); |
|||
border-radius: 90px; |
|||
border-color: rgb(139, 139, 139); |
|||
border-width: 1px; |
|||
border-style: solid; |
|||
} |
|||
} |
|||
|
|||
.list { |
|||
margin:10px 15px; |
|||
.item { |
|||
margin:8px 0; |
|||
padding:8px 0; |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
display:flex; |
|||
height: 40px ; |
|||
align-items:center; |
|||
.logo { |
|||
width:10%; |
|||
height: 21px; |
|||
line-height: 21px; |
|||
text-align: center; |
|||
>img{ |
|||
width: 25px; |
|||
} |
|||
>span{ |
|||
font-size: 14px; |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
.name { |
|||
width:70%; |
|||
z-index: 10; |
|||
vertical-align: bottom; |
|||
} |
|||
.score { |
|||
width:20%; |
|||
z-index: 20; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//楼院小组-推荐小组 |
|||
.mw-cpt-cnt_groups { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
|
|||
.d-cpt-wrap { |
|||
width: 100%; |
|||
// overflow-x: scroll; |
|||
overflow: hidden; |
|||
|
|||
.list { |
|||
width: 1000px; |
|||
overflow: hidden; |
|||
.item { |
|||
position: relative; |
|||
float: left; |
|||
border-radius: 10px; |
|||
background-color: #ffffff; |
|||
margin-left: 10px; |
|||
width: 150px; |
|||
box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26); |
|||
|
|||
.d-group-no { |
|||
position: absolute; |
|||
left: 10px; |
|||
top: 0; |
|||
width: 25px; |
|||
height: 21px; |
|||
line-height: 21px; |
|||
text-align: center; |
|||
|
|||
img { |
|||
position: absolute; |
|||
z-index: 10; |
|||
display: block; |
|||
left: 0; |
|||
top: 0; |
|||
width: 25px; |
|||
} |
|||
span { |
|||
position: relative; |
|||
z-index: 20; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
.d-group-avatar { |
|||
position: relative; |
|||
margin: 30px auto 5px; |
|||
width: 60px; |
|||
height: 60px; |
|||
padding: 4px; |
|||
overflow: hidden; |
|||
border-radius: 100%; |
|||
box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26); |
|||
|
|||
img { |
|||
position: absolute; |
|||
display: block; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
width: 52px; |
|||
height: 52px; |
|||
border-radius: 100%; |
|||
} |
|||
} |
|||
.d-group-name { |
|||
@include toe; |
|||
width: 120px; |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
font-size: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
line-height: 21px; |
|||
} |
|||
.d-group-info { |
|||
@include toe; |
|||
width: 140px; |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
font-size: 13px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(102, 102, 102, 1); |
|||
line-height: 21px; |
|||
} |
|||
.d-group-btn { |
|||
margin: 10px auto 20px; |
|||
width: 65px; |
|||
height: 25px; |
|||
line-height: 25px; |
|||
background: rgba(255, 76, 82, 1); |
|||
border-radius: 25px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
@ -0,0 +1,118 @@ |
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
@import "@/assets/scss/c/anime.scss"; |
|||
|
|||
// 更多功能1 |
|||
.mw-cpt-cnt_menus { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
|
|||
.d-cpt-wrap { |
|||
width: 355px; |
|||
margin: 0 auto; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
background: rgba(255, 255, 255, 1); |
|||
|
|||
.list { |
|||
padding: 15px 0 5px; |
|||
overflow: hidden; |
|||
.item { |
|||
position: relative; |
|||
float: left; |
|||
margin: 0 24px; |
|||
width: 40px; |
|||
|
|||
> img { |
|||
display: block; |
|||
width: 40px; |
|||
height: 40px; |
|||
margin-bottom: 1px; |
|||
} |
|||
|
|||
p { |
|||
width: 100px; |
|||
margin-left: -30px; |
|||
line-height: 15px; |
|||
font-size: 13px; |
|||
text-align: center; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// 更多功能2 |
|||
.mw-cpt-cnt_function2 { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
|
|||
.d-cpt-wrap { |
|||
border-radius: 10px; |
|||
// overflow-x: scroll; |
|||
overflow: hidden; |
|||
margin: 0 13px; |
|||
padding:0 0 13px 0; |
|||
background-color: white; |
|||
|
|||
.link { |
|||
width: 100%; |
|||
position: relative; |
|||
|
|||
.link-item{ |
|||
display: inline; |
|||
position: relative; |
|||
|
|||
> img { |
|||
width:45%; |
|||
// width: 308px; |
|||
margin: 8px; |
|||
// height: 160px; |
|||
border-radius: 10px; |
|||
} |
|||
span { |
|||
position: absolute; |
|||
top: -10px; |
|||
left: 20px; |
|||
color: #fff; |
|||
font-size: 15px; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.dots { |
|||
position: absolute; |
|||
bottom: 10px; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.dot { |
|||
margin: 0 5px; |
|||
width: 20px; |
|||
height: 4px; |
|||
border-radius: 6px; |
|||
background-color: #ddd; |
|||
transition: all ease $ad1; |
|||
|
|||
&.z-on { |
|||
background-color: $c1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,74 @@ |
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
@import "@/assets/scss/c/anime.scss"; |
|||
|
|||
.page_header { |
|||
position: relative; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
padding-left: 10px; |
|||
background-color: #E3271C; |
|||
|
|||
.img_icon { |
|||
position: relative; |
|||
top: -4px; |
|||
margin-right: 4px; |
|||
height: 20px; |
|||
} |
|||
.img_arrow{ |
|||
position: relative; |
|||
top: -2px; |
|||
margin-left: 5px; |
|||
height: 13px; |
|||
|
|||
} |
|||
|
|||
span { |
|||
font-size: 17px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.right{ |
|||
position:absolute; |
|||
right:10px; |
|||
top: 10px; |
|||
display: flex; |
|||
|
|||
.score_title{ |
|||
line-height: 22px; |
|||
margin-right:3px; |
|||
font-size: 10px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
|
|||
} |
|||
|
|||
.span_score_score{ |
|||
line-height: 22px; |
|||
font-size: 18px; |
|||
font-family: Impact; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.span_slicer{ |
|||
height: 15px; |
|||
line-height: 22px; |
|||
margin-left:7px; |
|||
} |
|||
|
|||
.span_mine{ |
|||
line-height: 22px; |
|||
margin-left:7px; |
|||
font-size: 15px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
@ -0,0 +1,603 @@ |
|||
<template> |
|||
<div class="mw-cpt a-fade-in" |
|||
:ref="item.tempOnlyId" |
|||
:title="item.componentName" |
|||
:class="{'z-focused': isFocused}" |
|||
@click="focusCpt"> |
|||
<!-- 最顶部标题组件 --> |
|||
<div class="mw-cpt-top_title" |
|||
v-if="item.componentFrontId==='resi-titleList-home-gridNameTitle'"> |
|||
<div class="d-cpt-wrap"> |
|||
<img class="d-cpt-ico" |
|||
v-if="item.demoData.ico" |
|||
:src="item.demoData.ico"> |
|||
<img class="d-cpt-ico" |
|||
v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/dang.png"> |
|||
<span>{{ item.demoData.title }}</span> |
|||
<img class="d-cpt-avatar" |
|||
v-if="item.demoData.avatar" |
|||
:src="item.demoData.avatar"> |
|||
<img class="d-cpt-avatar" |
|||
v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png"> |
|||
</div> |
|||
</div> |
|||
<!-- 轮播图组件 --> |
|||
<div class="mw-cpt-swiper" |
|||
v-else-if="item.componentFrontId==='resi-topList-voice-hotNewsSwiper'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-subwrap"> |
|||
<img v-if="item.demoData.pic" |
|||
:src="item.demoData.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/swiper-bg.png"> |
|||
<div> |
|||
<span>{{ item.demoData.title }}</span> |
|||
<i></i> |
|||
<i></i> |
|||
<i></i> |
|||
<i class="z-on"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 新消息组件 --> |
|||
<div class="mw-cpt-new_msg" |
|||
v-else-if="item.componentFrontId==='resi-floatingList-mine-newMessageButton'"> |
|||
<div class="d-cpt-wrap"> |
|||
<img v-if="item.demoData.ico" |
|||
:src="item.demoData.ico"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/msg.png"> |
|||
<span>{{ item.demoData.text }}</span> |
|||
</div> |
|||
</div> |
|||
<!-- 党建声音组件 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-voice-newsList'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">党建声音</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.pic" |
|||
:src="subitem.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-info"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 特色文章组件 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-voice-newsList2'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">党建声音</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.pic" |
|||
:src="subitem.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-info"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 热点议题组件 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-hall-hotSubjectList'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">热点议题</div> |
|||
<div class="list"> |
|||
<div class="item2" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-content">{{ subitem.content || '最热议题内容' }}</div> |
|||
<div class="d-news-info"> |
|||
<img v-if="subitem.avatar" |
|||
:src="subitem.avatar"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 最新议题组件 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-hall-latestIssueList'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">最新议题</div> |
|||
<div class="list"> |
|||
<div class="item2" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-content">{{ subitem.content || '最新议题内容' }}</div> |
|||
<div class="d-news-info"> |
|||
<img v-if="subitem.avatar" |
|||
:src="subitem.avatar"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 结案项目组件 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-hall-closedProjectList'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">结案项目</div> |
|||
<div class="list"> |
|||
<div class="item3" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-content">{{ subitem.content }}</div> |
|||
<div class="d-news-info"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 更多功能组件 --> |
|||
<div class="mw-cpt-cnt_menus" |
|||
v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.ico" |
|||
:src="subitem.ico"> |
|||
<img v-else-if="subindex==0" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/menu-1.png"> |
|||
<img v-else-if="subindex==1" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/menu-2.png"> |
|||
<img v-else-if="subindex==2" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/menu-3.png"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/menu-4.png"> |
|||
<p>{{ subitem.text }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 更多功能2栏组件 --> |
|||
<div class="mw-cpt-cnt_function2" |
|||
v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'"> |
|||
<div class="d-cpt-wrap"> |
|||
|
|||
<div class="link"> |
|||
<div class="link-item"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg" |
|||
mode="aspectFill" /> |
|||
<span>{{'建议直通车'}}</span> |
|||
</div> |
|||
<div class="link-item"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg" |
|||
mode="aspectFill" /> |
|||
<span>{{'建议直通车'}}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="dots"> |
|||
<div class="dot z-on"></div> |
|||
<div class="dot"></div> |
|||
</div> |
|||
|
|||
<!-- <div class="dots"> |
|||
<i></i> |
|||
<i></i> |
|||
<i></i> |
|||
<i class="z-on"></i> |
|||
|
|||
</div> --> |
|||
|
|||
</div> |
|||
</div> |
|||
<!-- 群组件 --> |
|||
<div class="mw-cpt-cnt_groups" |
|||
v-else-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<div class="d-group-no"> |
|||
<img v-if="subitem.ico" |
|||
:src="subitem.ico"> |
|||
<img v-else-if="subindex === 0" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/qi.png"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/qi2.png"> |
|||
<span>{{ subitem.no }}</span> |
|||
</div> |
|||
<div class="d-group-avatar"> |
|||
<img v-if="subitem.avatar" |
|||
:src="subitem.avatar"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/avatar.jpg"> |
|||
</div> |
|||
<div class="d-group-name">{{ subitem.title }}</div> |
|||
<div class="d-group-info"> |
|||
<span>{{ subitem.info1 }}</span> |
|||
</div> |
|||
<div class="d-group-info"> |
|||
<span>{{ subitem.info2 }}</span> |
|||
<span>{{ subitem.info3 }}</span> |
|||
</div> |
|||
<div class="d-group-btn">加入</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 爱心互助banner组件 --> |
|||
<div class="mw-cpt-banner" |
|||
v-else-if="item.componentFrontId==='resi-functionList-heart-banner'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-subwrap"> |
|||
<img v-if="item.demoData.pic" |
|||
:src="item.demoData.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/heart-banner.png"> |
|||
<div class="d-title"> |
|||
<img class="left-log" |
|||
src="@/assets/img/modules/wx-mini/index-set/heart-logo.png"> |
|||
<span class="s-title">{{ item.demoData.title }}</span> |
|||
|
|||
<div class="d-group-no"> |
|||
|
|||
<img src="@/assets/img/modules/wx-mini/index-set/heart-back.png"> |
|||
<span>{{'点击进入'}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 爱心互助最新活动组件 --> |
|||
<div class="mw-cpt-heart_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-heart-new'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">最新活动 |
|||
<div class="more">查看更多</div> |
|||
</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.pic" |
|||
:src="subitem.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-time"> |
|||
<div class="d-news-time-title"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>活动时间：</span> |
|||
</div> |
|||
<div class="d-news-time-item"> |
|||
<span>{{ subitem.time1 }}</span> |
|||
<span>{{ subitem.time2 }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="d-news-adress"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>活动地点：{{ subitem.adress }}</span> |
|||
|
|||
</div> |
|||
<div class="d-news-state"> |
|||
<span class="d-news-state-limit">活动名额 12人</span> |
|||
<span class="d-news-state-act">已报名 9人</span> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 爱心互助历史回顾组件 --> |
|||
<div class="mw-cpt-heart_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-heart-history'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">历史回顾 |
|||
<div class="more">查看更多</div> |
|||
</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.pic" |
|||
:src="subitem.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-time"> |
|||
<div class="d-news-time-title"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>活动时间：</span> |
|||
</div> |
|||
<div class="d-news-time-item"> |
|||
<span>{{ subitem.time1 }}</span> |
|||
<span>{{ subitem.time2 }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="d-news-adress"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>活动地点：{{ subitem.adress }}</span> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 积分银行积分排行组件 --> |
|||
<div class="mw-cpt-score_rank" |
|||
v-else-if="item.componentFrontId==='resi-functionList-score-rank'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">积分排行榜</div> |
|||
<div class="rank_title"> |
|||
<span class="rank_title_total">总排名</span> |
|||
<span class="rank_title_week">本周排名</span> |
|||
<span class="rank_title_month">本月排名</span> |
|||
</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<div class="logo"> |
|||
<img v-if="subitem.ico" |
|||
:src="subitem.ico"> |
|||
<img v-else-if="subindex === 0" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_1.png"> |
|||
<img v-else-if="subindex === 1" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_2.png"> |
|||
<img v-else-if="subindex === 2" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_3.png"> |
|||
|
|||
<span v-else>{{ subitem.subindex }}</span> |
|||
</div> |
|||
|
|||
<div class="name">{{ subitem.name }}</div> |
|||
<div class="score">{{ subitem.score }}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 党员积分排行组件 --> |
|||
<div class="mw-cpt-party" |
|||
v-else-if="item.componentFrontId==='resi-functionList-top-party'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">党员积分排行榜</div> |
|||
<div class="m-box"> |
|||
<div class="rank_title"> |
|||
<p class="rank_title_left">身边党员</p> |
|||
<div class="red_line"></div> |
|||
<p class="rank_title_right">社区党员</p> |
|||
</div> |
|||
<div class="rank_img_score"> |
|||
<div class="list"> |
|||
<!--:key,列表循环的唯一标识符 --> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list1"> |
|||
<div class="d-group-logo"> |
|||
<div v-if="subindex === 0" |
|||
class="logo1"></div> |
|||
<div v-else-if="subindex === 1" |
|||
class="logo2"></div> |
|||
<div v-else-if="subindex === 2" |
|||
class="logo3"></div> |
|||
</div> |
|||
|
|||
<div class="d-group-rank"> |
|||
<span v-if="subindex===0" |
|||
class="rank_1">2</span> |
|||
<span v-if="subindex===1" |
|||
class="rank_2">1</span> |
|||
<span v-if="subindex===2" |
|||
class="rank_3">3</span> |
|||
|
|||
</div> |
|||
|
|||
<div class="d-group-imgback"> |
|||
<div v-if="subindex === 0" |
|||
class="back_1"></div> |
|||
<div v-else-if="subindex === 1" |
|||
class="back_2"></div> |
|||
<div v-else-if="subindex === 2" |
|||
class="back_3"></div> |
|||
</div> |
|||
<div class="d-group-img"> |
|||
<img v-if="subindex === 0" |
|||
class="img1" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"> |
|||
<img v-if="subindex === 1" |
|||
class="img2" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"> |
|||
<img v-if="subindex === 2" |
|||
class="img3" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"> |
|||
</div> |
|||
|
|||
<div class="d-group-score"> |
|||
<span v-if="subindex===0" |
|||
class="score_1">{{subitem.title1}}</span> |
|||
<span v-if="subindex===1" |
|||
class="score_2">{{subitem.title2}}</span> |
|||
<span v-if="subindex===2" |
|||
class="score_3">{{subitem.title3}}</span> |
|||
</div> |
|||
|
|||
<div class="d-group-name"> |
|||
|
|||
<span v-if="subindex===0" |
|||
class="name_1">{{subitem.info1}}</span> |
|||
<span v-if="subindex===1" |
|||
class="name_2">{{subitem.info2}}</span> |
|||
<span v-if="subindex===2" |
|||
class="name_3">{{subitem.info3}}</span> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--更多-标题--> |
|||
<div class="list-more"> |
|||
<ul class="list1"> |
|||
<li class="list_1">排名</li> |
|||
<li class="list_1">头像</li> |
|||
<li class="list_1">姓名</li> |
|||
<li class="list_2">当月积分</li> |
|||
|
|||
</ul> |
|||
</div> |
|||
|
|||
<!--更多排名--> |
|||
<div class="rank_more_score"> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem,subindex) in item.demoData.list2"> |
|||
<div class="d-group-rank"> |
|||
<span>{{subitem.rank}}</span> |
|||
</div> |
|||
<div class="d-group-img"> |
|||
<img v-if="subindex===1" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg" |
|||
class="list3_img1"> |
|||
<img v-else-if="subindex===2" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg" |
|||
class="list3_img1"> |
|||
<img v-else-if="subindex===3" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg" |
|||
class="list3_img1"> |
|||
<img v-else-if="subindex===4" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg" |
|||
class="list3_img1"> |
|||
</div> |
|||
<div class="d-group-name"> |
|||
<span>{{subitem.name}}</span> |
|||
</div> |
|||
<div class="d-group-score"> |
|||
<span>{{subitem.score}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="line"></div> |
|||
<span class="list6">查看更多</span> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 占位组件 --> |
|||
<div class="mw-cpt-placeholder" |
|||
v-else> |
|||
<div class="d-cpt-wrap"> |
|||
{{ item.componentName }} |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 操作区 --> |
|||
<div class="d-cpt-operate a-scale-in" |
|||
z |
|||
:class="{'z-small': item.region!=='functionList'}" |
|||
v-show="isFocused" |
|||
@click.stop> |
|||
<div class="d-cpt-btn" |
|||
v-show="item.region==='functionList'" |
|||
@click="changeCptDisplayOrder('up')"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/up.png"> |
|||
<p>上移</p> |
|||
</div> |
|||
<div class="d-cpt-btn" |
|||
@click="delCpt"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/del.png"> |
|||
<p>删除</p> |
|||
</div> |
|||
<div class="d-cpt-btn" |
|||
v-show="item.region==='functionList'" |
|||
@click="changeCptDisplayOrder('down')"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/down.png"> |
|||
<p>下移</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
|
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return {} |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
delCpt () { |
|||
this.$emit('del', this.item) |
|||
}, |
|||
async changeCptDisplayOrder (direction) { |
|||
this.$emit('sort', this.item, direction) |
|||
await nextTick(200) |
|||
const { item: { tempOnlyId } } = this |
|||
this.$refs[tempOnlyId].scrollIntoViewIfNeeded(false) |
|||
}, |
|||
focusCpt () { |
|||
this.$emit('focus', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<!-- |
|||
|
|||
|
|||
{"list1":[{"ico":"","no":"2","avatar":"","title":"776","info1":"某某某","shi":"1"},{"ico":"","no":"1","avatar":"","title":"886","info1":"某某某","shi":"2"},{"ico":"","no":"3","avatar":"","title":"666","info1":"某某某","shi":"3"}], |
|||
"list2":[{rank":"4","img":"1","name":"某某某","score":"656"},{"rank":"5","img":"1","name":"某某某","score":"456"},{"rank":"6","img":"1","name":"某某某","score":"656"},{"rank":"7","img":"1","name":"某某某","score":"656"},{"rank":"8","img":"1","name":"某某某","score":"656"}]} |
|||
|
|||
|
|||
--> |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<div class="mw-cpt a-fade-in" |
|||
:ref="item.tempOnlyId" |
|||
:class="{'z-focused': isFocused}" |
|||
@click="focusCpt"> |
|||
|
|||
<!-- 群组件 --> |
|||
<div v-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'" |
|||
class="group"> |
|||
<div class="list"> |
|||
<!-- <div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> --> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in list"> |
|||
|
|||
<div class="row1"> |
|||
<div class="left"> |
|||
<div class="avatar"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/page/avatar.jpg"> |
|||
</div> |
|||
<div class="no">NO.{{subitem.no}}</div> |
|||
</div> |
|||
|
|||
<div class="right"> |
|||
<div class="groupName">{{subitem.title}}</div> |
|||
<div class="info"> |
|||
<span>{{subitem.info2}}</span> |
|||
<span class="span_info2">{{subitem.info3}}</span> |
|||
</div> |
|||
<div v-if="subitem.type && subitem.type!==''" |
|||
class="type">{{subitem.type}}</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row2"> |
|||
<div class="operation"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/add-red.png"> |
|||
<span> 加入</span> |
|||
</div> |
|||
<div class="operation"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/search-red.png"> |
|||
<span> 参观</span> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="d-group-no"> |
|||
<img v-if="subitem.ico" |
|||
:src="subitem.ico"> |
|||
<img v-if="subindex === 0" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/qi.png"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/qi2.png"> |
|||
<span>{{ subitem.no }}</span> |
|||
</div> |
|||
<div class="d-group-avatar"> |
|||
<img v-if="subitem.avatar" |
|||
:src="subitem.avatar"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/avatar.jpg"> |
|||
</div> |
|||
<div class="d-group-name">{{ subitem.title }}</div> |
|||
<div class="d-group-info"> |
|||
<span>{{ subitem.info1 }}</span> |
|||
</div> |
|||
<div class="d-group-info"> |
|||
<span>{{ subitem.info2 }}</span> |
|||
<span>{{ subitem.info3 }}</span> |
|||
</div> |
|||
<div class="d-group-btn">加入</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return { |
|||
"list": |
|||
[ |
|||
{ |
|||
"ico": "", |
|||
"no": "1", |
|||
"avatar": "", |
|||
"title": "群名称", |
|||
"info1": "山东路45号-张三", |
|||
"info2": "共240人", |
|||
"info3": "党员11人", |
|||
"type": "支部" |
|||
}, |
|||
{ |
|||
"ico": "", |
|||
"no": "2", "avatar": "", |
|||
"title": "群名称", |
|||
"info1": "山东路45号-张三", |
|||
"info2": "共240人", |
|||
"info3": "党员11人", |
|||
"type": "" |
|||
}, |
|||
{ |
|||
"ico": "", |
|||
"no": "3", |
|||
"avatar": "", |
|||
"title": "群名称", |
|||
"info1": "山东路45号-张三", |
|||
"info2": "共240人", |
|||
"info3": "党员11人", |
|||
"type": "" |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
components: { |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
|
|||
focusCpt () { |
|||
this.$emit('focusCpt', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/modules/wx-mini/group.scss"></style> |
|||
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<div class="mw-cpt a-fade-in" |
|||
:ref="item.tempOnlyId" |
|||
:title="item.componentName" |
|||
:class="{'z-focused': isFocused}" |
|||
@click="focusCpt"> |
|||
|
|||
<!-- 爱心互助banner组件 --> |
|||
<div class="mw-cpt-banner" |
|||
v-if="item.componentFrontId==='resi-functionList-heart-banner'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-subwrap"> |
|||
<img v-if="item.demoData.pic" |
|||
:src="item.demoData.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/heart-banner.png"> |
|||
<div class="d-title"> |
|||
<img class="left-log" |
|||
src="@/assets/img/modules/wx-mini/index-set/heart-logo.png"> |
|||
<span class="s-title">{{ item.demoData.title }}</span> |
|||
|
|||
<div class="d-group-no"> |
|||
|
|||
<img src="@/assets/img/modules/wx-mini/index-set/heart-back.png"> |
|||
<span>{{'点击进入'}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 爱心互助最新活动组件 --> |
|||
<div class="mw-cpt-heart_news" |
|||
v-if="item.componentFrontId==='resi-functionList-heart-new'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">最新活动 |
|||
<div class="more">查看更多</div> |
|||
</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.pic" |
|||
:src="subitem.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-time"> |
|||
<div class="d-news-time-title"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>活动时间：</span> |
|||
</div> |
|||
<div class="d-news-time-item"> |
|||
<span>{{ subitem.time1 }}</span> |
|||
<span>{{ subitem.time2 }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="d-news-adress"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>活动地点：{{ subitem.adress }}</span> |
|||
|
|||
</div> |
|||
<div class="d-news-state"> |
|||
<span class="d-news-state-limit">活动名额 12人</span> |
|||
<span class="d-news-state-act">已报名 9人</span> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 爱心互助历史回顾组件 --> |
|||
<div class="mw-cpt-heart_news" |
|||
v-if="item.componentFrontId==='resi-functionList-heart-history'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">历史回顾 |
|||
<div class="more">查看更多</div> |
|||
</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.pic" |
|||
:src="subitem.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-time"> |
|||
<div class="d-news-time-title"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>活动时间：</span> |
|||
</div> |
|||
<div class="d-news-time-item"> |
|||
<span>{{ subitem.time1 }}</span> |
|||
<span>{{ subitem.time2 }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="d-news-adress"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>活动地点：{{ subitem.adress }}</span> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
|
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return {} |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
|
|||
focusCpt () { |
|||
this.$emit('focusCpt', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<div class="mw-cpt a-fade-in" |
|||
:ref="item.tempOnlyId" |
|||
:class="{'z-focused': isFocused}" |
|||
@click="focusCpt"> |
|||
|
|||
<!-- 最新议题组件 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-if="item.componentFrontId==='resi-functionList-hall-latestIssueList'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">最新议题</div> |
|||
<div class="list"> |
|||
<div class="item2" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-content">{{ subitem.content || '最新议题内容' }}</div> |
|||
<div class="d-news-info"> |
|||
<img v-if="subitem.avatar" |
|||
:src="subitem.avatar"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 结案项目组件 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-hall-closedProjectList'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">结案项目</div> |
|||
<div class="list"> |
|||
<div class="item3" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-content">{{ subitem.content }}</div> |
|||
<div class="d-news-info"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return {} |
|||
}, |
|||
components: { |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
|
|||
focusCpt () { |
|||
this.$emit('focusCpt', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style> |
|||
@ -0,0 +1,89 @@ |
|||
<template> |
|||
<div class="mw-cpt a-fade-in" |
|||
:ref="item.tempOnlyId" |
|||
:class="{'z-focused': isFocused}" |
|||
@click="focusCpt"> |
|||
|
|||
<!-- 更多功能组件 --> |
|||
<div class="mw-cpt-cnt_menus" |
|||
v-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.ico" |
|||
:src="subitem.ico"> |
|||
<img v-if="subindex==0" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/menu-1.png"> |
|||
<img v-if="subindex==1" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/menu-2.png"> |
|||
<img v-if="subindex==2" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/menu-3.png"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/menu-4.png"> |
|||
<p>{{ subitem.text }}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 更多功能2栏组件 --> |
|||
<div class="mw-cpt-cnt_function2" |
|||
v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'"> |
|||
<div class="d-cpt-wrap"> |
|||
|
|||
<div class="link"> |
|||
<div class="link-item"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg" |
|||
mode="aspectFill" /> |
|||
<span>{{'建议直通车'}}</span> |
|||
</div> |
|||
<div class="link-item"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg" |
|||
mode="aspectFill" /> |
|||
<span>{{'建议直通车'}}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="dots"> |
|||
<div class="dot z-on"></div> |
|||
<div class="dot"></div> |
|||
</div> |
|||
|
|||
<!-- <div class="dots"> |
|||
<i></i> |
|||
<i></i> |
|||
<i></i> |
|||
<i class="z-on"></i> |
|||
|
|||
</div> --> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return {} |
|||
}, |
|||
components: { |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
|
|||
focusCpt () { |
|||
this.$emit('focusCpt', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/modules/wx-mini/more.scss"></style> |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<div class="mw-cpt a-fade-in" |
|||
:ref="item.tempOnlyId" |
|||
:title="item.componentName" |
|||
:class="{'z-focused': isFocused}" |
|||
@click="focusCpt"> |
|||
|
|||
<!-- 最顶部标题组件 --> |
|||
<div v-if="item.componentFrontId==='resi-titleList-home-gridNameTitle'" |
|||
class="page_header"> |
|||
<img class="img_icon" |
|||
v-if="item.demoData.ico" |
|||
:src="item.demoData.ico"> |
|||
<img class="img_icon" |
|||
v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/dang.png"> |
|||
<span>{{ item.demoData.title }}</span> |
|||
<img class="img_arrow" |
|||
src="@/assets/img/modules/wx-mini/index-set/arrow-right.png"> |
|||
<div class="right"> |
|||
<div class="score_title">积分</div> |
|||
<span class="span_score_score">999</span> |
|||
<span class="span_slicer">|</span> |
|||
<span class="span_mine">我的</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return {} |
|||
}, |
|||
components: { |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
|
|||
focusCpt () { |
|||
this.$emit('focusCpt', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/modules/wx-mini/page-header.scss"></style> |
|||
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<div class="mw-cpt a-fade-in" |
|||
:ref="item.tempOnlyId" |
|||
:class="{'z-focused': isFocused}" |
|||
@click="focusCpt"> |
|||
|
|||
<!-- 积分银行-积分排行组件 --> |
|||
<div class="mw-cpt-score_rank" |
|||
v-if="item.componentFrontId==='resi-functionList-score-rank'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">积分排行榜</div> |
|||
<div class="rank_title"> |
|||
<span class="rank_title_total">总排名</span> |
|||
<span class="rank_title_week">本周排名</span> |
|||
<span class="rank_title_month">本月排名</span> |
|||
</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<div class="logo"> |
|||
<img v-if="subitem.ico" |
|||
:src="subitem.ico"> |
|||
<img v-if="subindex === 0" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_1.png"> |
|||
<img v-if="subindex === 1" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_2.png"> |
|||
<img v-if="subindex === 2" |
|||
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_3.png"> |
|||
|
|||
<span v-else>{{ subitem.subindex }}</span> |
|||
</div> |
|||
|
|||
<div class="name">{{ subitem.name }}</div> |
|||
<div class="score">{{ subitem.score }}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 党员积分排行组件 --> |
|||
<div class="mw-cpt-party" |
|||
v-else-if="item.componentFrontId==='resi-functionList-top-party'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">党员积分排行榜</div> |
|||
<div class="m-box"> |
|||
<div class="rank_title"> |
|||
<p class="rank_title_left">身边党员</p> |
|||
<div class="red_line"></div> |
|||
<p class="rank_title_right">社区党员</p> |
|||
</div> |
|||
<div class="rank_img_score"> |
|||
<div class="list"> |
|||
<!--:key,列表循环的唯一标识符 --> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list1"> |
|||
<div class="d-group-logo"> |
|||
<div v-if="subindex === 0" |
|||
class="logo1"></div> |
|||
<div v-if="subindex === 1" |
|||
class="logo2"></div> |
|||
<div v-if="subindex === 2" |
|||
class="logo3"></div> |
|||
</div> |
|||
|
|||
<div class="d-group-rank"> |
|||
<span v-if="subindex===0" |
|||
class="rank_1">2</span> |
|||
<span v-if="subindex===1" |
|||
class="rank_2">1</span> |
|||
<span v-if="subindex===2" |
|||
class="rank_3">3</span> |
|||
|
|||
</div> |
|||
|
|||
<div class="d-group-imgback"> |
|||
<div v-if="subindex === 0" |
|||
class="back_1"></div> |
|||
<div v-if="subindex === 1" |
|||
class="back_2"></div> |
|||
<div v-if="subindex === 2" |
|||
class="back_3"></div> |
|||
</div> |
|||
<div class="d-group-img"> |
|||
<img v-if="subindex === 0" |
|||
class="img1" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"> |
|||
<img v-if="subindex === 1" |
|||
class="img2" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"> |
|||
<img v-if="subindex === 2" |
|||
class="img3" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"> |
|||
</div> |
|||
|
|||
<div class="d-group-score"> |
|||
<span v-if="subindex===0" |
|||
class="score_1">{{subitem.title1}}</span> |
|||
<span v-if="subindex===1" |
|||
class="score_2">{{subitem.title2}}</span> |
|||
<span v-if="subindex===2" |
|||
class="score_3">{{subitem.title3}}</span> |
|||
</div> |
|||
|
|||
<div class="d-group-name"> |
|||
|
|||
<span v-if="subindex===0" |
|||
class="name_1">{{subitem.info1}}</span> |
|||
<span v-if="subindex===1" |
|||
class="name_2">{{subitem.info2}}</span> |
|||
<span v-if="subindex===2" |
|||
class="name_3">{{subitem.info3}}</span> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--更多-标题--> |
|||
<div class="list-more"> |
|||
<ul class="list1"> |
|||
<li class="list_1">排名</li> |
|||
<li class="list_1">头像</li> |
|||
<li class="list_1">姓名</li> |
|||
<li class="list_2">当月积分</li> |
|||
|
|||
</ul> |
|||
</div> |
|||
|
|||
<!--更多排名--> |
|||
<div class="rank_more_score"> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem,subindex) in item.demoData.list2"> |
|||
<div class="d-group-rank"> |
|||
<span>{{subitem.rank}}</span> |
|||
</div> |
|||
<div class="d-group-img"> |
|||
<img v-if="subindex===1" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg" |
|||
class="list3_img1"> |
|||
<img v-if="subindex===2" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg" |
|||
class="list3_img1"> |
|||
<img v-if="subindex===3" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg" |
|||
class="list3_img1"> |
|||
<img v-if="subindex===4" |
|||
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg" |
|||
class="list3_img1"> |
|||
</div> |
|||
<div class="d-group-name"> |
|||
<span>{{subitem.name}}</span> |
|||
</div> |
|||
<div class="d-group-score"> |
|||
<span>{{subitem.score}}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="line"></div> |
|||
<span class="list6">查看更多</span> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return {} |
|||
}, |
|||
components: { |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
|
|||
focusCpt () { |
|||
this.$emit('focusCpt', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style> |
|||
@ -0,0 +1,99 @@ |
|||
<template> |
|||
<div class="mw-cpt a-fade-in" |
|||
:ref="item.tempOnlyId" |
|||
:title="item.componentName" |
|||
:class="{'z-focused': isFocused}" |
|||
@click="focusCpt"> |
|||
|
|||
<!-- 党建声音-轮播图组件 --> |
|||
<div class="mw-cpt-swiper" |
|||
v-if="item.componentFrontId==='resi-topList-voice-hotNewsSwiper'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-subwrap"> |
|||
<img v-if="item.demoData.pic" |
|||
:src="item.demoData.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/swiper-bg.png"> |
|||
<div> |
|||
<span>{{ item.demoData.title }}</span> |
|||
<i></i> |
|||
<i></i> |
|||
<i></i> |
|||
<i class="z-on"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 党建声音-最新发布 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-voice-newsList'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">党建声音</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.pic" |
|||
:src="subitem.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-info"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 党建声音-特色文章组件 --> |
|||
<div class="mw-cpt-cnt_news" |
|||
v-else-if="item.componentFrontId==='resi-functionList-voice-newsList2'"> |
|||
<div class="d-cpt-wrap"> |
|||
<div class="d-cpt-title">党建声音</div> |
|||
<div class="list"> |
|||
<div class="item" |
|||
:key="subindex" |
|||
v-for="(subitem, subindex) in item.demoData.list"> |
|||
<img v-if="subitem.pic" |
|||
:src="subitem.pic"> |
|||
<img v-else |
|||
src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png"> |
|||
<div class="d-news-title">{{ subitem.title }}</div> |
|||
<div class="d-news-info"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png"> |
|||
<span>来源：{{ subitem.author }}</span> |
|||
<span class="f-fr">{{ subitem.date }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return {} |
|||
}, |
|||
components: { |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
|
|||
focusCpt () { |
|||
this.$emit('focusCpt', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue