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