diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/add-red.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/add-red.png new file mode 100644 index 0000000..7ecc8d1 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/add-red.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/arrow-right.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/arrow-right.png new file mode 100644 index 0000000..c1ea628 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/arrow-right.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/search-red.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/search-red.png new file mode 100644 index 0000000..c1e1375 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/search-red.png differ diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/group.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/group.scss new file mode 100644 index 0000000..b32e79a --- /dev/null +++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/group.scss @@ -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); + } + } + } +} diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set copy 2.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set copy 2.scss new file mode 100644 index 0000000..b5eaad8 --- /dev/null +++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set copy 2.scss @@ -0,0 +1,1616 @@ +@import "@/assets/scss/c/config.scss"; +@import "@/assets/scss/c/function.scss"; +@import "@/assets/scss/c/anime.scss"; + +.m-wx_index { + .wrap { + margin-top: 10px; + } + .mw-cpt_type { + position: relative; + z-index: 10; + padding: 10px; + min-height: 250px; + border-radius: 4px; + background-color: #ffffff; + + .d-function { + margin: 5px 0 15px; + + .d-info { + @include cs; + line-height: 25px; + cursor: pointer; + .d-ico { + margin-right: 8px; + width: 15px; + } + .d-name { + font-weight: bold; + font-size: 13px; + } + .d-arrow { + float: right; + position: relative; + top: 8px; + right: 3px; + width: 9px; + transition: transform $ad1 ease-in-out; + &.z-unfold { + transform: rotate(180deg); + } + } + } + .d-list { + @include cs; + margin-top: 4px; + + .d-item { + margin: 5px 0; + line-height: 24px; + overflow: hidden; + .d-item-region { + margin-right: 4px; + font-size: 10px; + color: #aaaaaa; + } + .d-item-name { + font-size: 13px; + } + .d-item-btn { + float: right; + position: relative; + color: #aaaaaa; + font-size: 12px; + line-height: 24px; + cursor: pointer; + user-select: none; + overflow: hidden; + &:hover { + color: $c1; + } + &.z-disabled { + color: #cccccc; + cursor: default; + } + img { + position: relative; + top: 0px; + width: 8px; + margin-right: 3px; + } + } + } + } + } + } + + .mw-show { + padding-top: 40px; + &.z-preview { + position: fixed; + z-index: 100000; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow-y: scroll; + background-color: rgba(#000000, 0.6); + + .mw-show-close { + position: absolute; + top: 20px; + left: 0; + right: 0; + width: 600px; + margin: 0 auto; + text-align: center; + } + + .mw-phone { + margin: 50px auto; + min-height: 640px; + // box-shadow: 0 0 0 8px rgba(#000, 0.1); + .d-cpt-operate { + display: none; + } + + .mw-cpt { + cursor: default; + &.z-focused, + &:hover { + box-shadow: none; + } + } + } + } + + .mw-phone { + position: relative; + margin: 0 auto; + width: 375px; + height: 660px; + overflow: auto; + background-color: #ffffff; + background-color: #f7f6f9; + box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2); + + .mw-phone-topbar { + display: block; + width: 100%; + } + + .mw-phone-hint { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + text-align: center; + color: #aaaaaa; + width: 120px; + height: 30px; + line-height: 30px; + font-size: 12px; + transition: transform $ad2 ease-in-out; + + &.z-out-left { + transform: translateX(-230px); + } + + &.z-out-down { + transform: translateY(45px); + } + } + + .z-none { + &::before { + content: ""; + display: block; + position: absolute; + z-index: 10; + top: 0; + bottom: 0; + right: 0; + left: 0; + border: 1px dashed rgba(#000, 0.3); + pointer-events: none; + } + &.mw-phone-fixed { + &::before { + border-radius: 50px 0 0 50px; + } + } + } + + .mw-phone-fixed { + // @include bs1; + position: absolute; + z-index: 1000; + top: 420px; + right: 0; + height: 50px; + width: 136px; + // border-radius: 50px 0 0 50px; + // background-color: #ffffff; + } + .mw-phone-top { + position: relative; + height: 40px; + } + .mw-phone-ban { + position: relative; + min-height: 150px; + &.z-none { + &::before { + border-top: none; + border-bottom: none; + } + } + } + .mw-phone-cnt { + position: relative; + min-height: 350px; + padding-top: 1px; + padding-bottom: 10px; + } + + .mw-cpt { + position: relative; + cursor: pointer; + transition: box-shadow $ad1 ease-in-out; + &:hover { + box-shadow: 0 0 12px 3px rgba(#67c23a, 0.2); + } + + &.z-focused { + box-shadow: 0 0 12px 3px rgba(#67c23a, 0.5); + } + + .d-cpt-operate { + @include bs3; + position: absolute; + top: -1000px; + bottom: -1000px; + right: 0px; + width: 50px; + padding: 5px 0; + height: 200px; + margin: auto 0; + border-radius: 0 4px 4px 0; + border: 1px solid #bb5; + background-color: #ffffff; + text-align: center; + z-index: 1000; + &.z-small { + height: 71px; + } + + .d-cpt-btn { + margin-bottom: 2px; + padding: 8px 0 4px; + line-height: 16px; + + &:hover { + background-color: #f1f2f3; + } + + img { + height: 10px; + line-height: 10px; + } + p { + line-height: 10px; + font-size: 12px; + } + } + } + + .mw-cpt-placeholder { + position: relative; + line-height: 40px; + text-align: center; + font-size: 17px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(255, 76, 82, 1); + } + + .mw-cpt-top_title { + position: relative; + + .d-cpt-wrap { + height: 40px; + line-height: 40px; + padding-left: 10px; + background-color: #fff; + .d-cpt-ico { + position: relative; + top: -4px; + margin-right: 4px; + height: 20px; + } + .d-cpt-avatar { + position: relative; + float: right; + margin-right: 10px; + top: 5px; + width: 30px; + } + span { + font-size: 17px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(255, 76, 82, 1); + } + } + } + + .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); + } + } + } + } + } + } + + .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; + } + } + } + } + } + } + + .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); + } + } + } + } + } + } + } + } + + .mw-set { + padding: 15px 20px; + min-height: 300px; + border-radius: 4px; + background-color: #ffffff; + + .d-set-head { + @include cs; + line-height: 25px; + margin-bottom: 5px; + cursor: pointer; + + .d-title { + font-weight: bold; + font-size: 13px; + } + + .d-arrow { + float: right; + position: relative; + top: 8px; + right: 3px; + width: 9px; + transition: transform $ad1 ease-in-out; + &.z-unfold { + transform: rotate(180deg); + } + } + } + + textarea { + background-color: rgba(247, 247, 247, 1); + min-height: 100px !important; + font-size: 13px; + &:focus { + background-color: #ffffff; + } + } + + .d-config-hint { + margin-top: -10px; + font-size: 10px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(51, 51, 51, 1); + line-height: 18px; + img { + height: 14px; + margin-right: 4px; + } + } + + .d-operate { + padding: 20px 0; + text-align: right; + } + } +} + +.d-set-banners { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; + .upload-demos { + display: block; + width: 20px; + height: 20px; + color: #ccc; + text-align: center; + line-height: 18px; + border: 1px dashed #ccc; + overflow: hidden; + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; +} +} + +//党员积分排行榜 + +.mw-cpt-party{ + position: relative; + margin-top: 10px; + .d-cpt-wrap { + width: 100%; + 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.0); + border-radius: 3px; + } + } + + .rank_title{ + margin:0px 15px 0px; + display: flex; + padding:0px 0px; + .rank_title_left{ + margin-left: 25px; + margin-top: 10px; + width:30%; + font-size: 16px; + text-align: center; + font-family: PingFang-SC; + padding:0px 0px 0px 0px; + font-weight: 600; + color: rgb(0, 0, 0); + } + .red_line{ + height: 3px; + width: 30px; + background-color: red; + position: absolute; + margin-left: 56px; + margin-top: 33px; + border-radius:4px; + } + .rank_title_right{ + margin-left: 70px; + margin-top: 12px; + width:30%; + font-size: 14px; + text-align: center; + font-family: PingFang-SC; + padding:0px 0px 0px 0px; + font-weight: 500; + color: rgb(171, 171, 171); + } + } + + + .m-box{ + width: 328px; + height:100%; + //height: 480px; + background-color: white; + position: relative; + float: left; + border-radius: 10px; + margin: 0px 15px 0 15px; + padding-bottom: 7px; + box-shadow: 0px 3px 24px 0px rgba(211, 211, 211, 0.26); + .line{ + width: 310px; + border-bottom: 1px solid #e7eeee; + margin-left: 15px; + margin-top: 26px; + margin-bottom: 7px; + position: relative; + } + .list6{ + @include list; + width: 60px; + margin-left: 145px; + margin-top: 20px; + position: relative; + text-align: center; + font-size: 13px; + color: #b9b9b9; + margin-bottom:10px; + font-size: PingFang-SC; + } + .rank_img_score{ + margin:0px 0px ; + .title_list{ + display: flex; //弹性布局，所有的子元素自动成为容器成员 + >span{ + margin-left: 40px; + width:30%; + font-size: 15px; + text-align: center; + font-family: PingFang SC; + padding:5px 10px; + font-weight: 300; + color: rgb(0, 0, 0); + } + } + .list { + width: 327px; + height: 160px; + .item{ + position: relative; + float: left; + border-radius: 10px; + background-color: white; + margin-left: 0px; + margin-top: 15px; + width: 33.33%; + .d-group-logo { + position: absolute; + left: 8px; + top: 74px; + width: 10px; + height: 10px; + line-height: 22px; + text-align: center; + .logo1{ + @include img123; + background-color: #f14805; + left: 45px; + } + .logo2{ + @include img123; + background-color: #ff0606; + left: 36px; + } + .logo3{ + @include img123; + background-color: #ffa515; + left: 30px; + } + span { + position: absolute; + z-index: 10; + font-size: 16px; + font-style: italic; + color: white; + width:17px; + height: 17px; + margin-left: 50px; + position: absolute; + display: block; + } + } + .d-group-rank{ + position: absolute; + padding-top: 1px; + font-style: italic; + + .rank_1{ + @include shuzi_123; + margin-left: 58px; + } + .rank_2{ + @include shuzi_123; + margin-left: 48px; + } + .rank_3{ + margin-left: 43px; + @include shuzi_123; + } + } + .d-group-name{ + position: absolute; + font-family: PingFang-SC; + font-weight: 600; + .name_1{ + margin-left: 47px; + @include name_123; + } + .name_2{ + margin-left: 41px; + @include name_123; + } + .name_3{ + margin-left: 28px; + @include name_123; + } + } + .d-group-score{ + position: absolute; + font-family: PingFang-SC; + .score_1{ + margin-left: 50px; + @include jifen; + } + .score_2{ + margin-left: 42px; + @include jifen; + } + .score_3{ + margin-left: 36px; + @include jifen; + } + } + + .d-group-imgback{ + position: absolute; + margin-top: 0.5px; + .back_1{ + width:75px; + height: 75px; + left: 24px; + top: 9.5px; + @include img_123; + } + .back_2{ + @include img_123; + width:88px; + height: 88px; + left: 9px; + top: 0px; + } + .back_3{ + width:75px; + height: 75px; + left: 9px; + top: 9.5px; + @include img_123; + } + } + .d-group-img { + position: relative; + margin-top: 10px ; + width: 50px; + height: 50px; + margin-left: 0px; + .img1{ + @include img_small12; + left: 28px; + right: 0; + bottom: 0; + } + .img2{ + width: 79.5px; + height: 79.5px; + position: absolute; + display: block; + top: 19px; + left: 13.3px; + right: 0; + bottom: 0px; + margin: auto; + border-radius: 100%; + } + .img3{ + @include img_small12; + left: 13px; + right: 5; + bottom: 5; + } + } + } + } + } + + + + + + .list-more{ + .list1{ + @include list; + width: 400px; + padding-left: 10px; + margin-top: 4px; + position: absolute; + font-family: PingFang-SC; + + .list_1{ + float: left; + + width: 48px; + padding-right: 20px; + @include list_12; + } + .list_2{ + float: left; + padding-left: 40px; + margin-left: 74px; + width: 100px; + @include list_12; + } + } + + } + .rank_more_score{ + .list{ + .item{ + display: flex; + + + .d-group-rank{ + + padding:14px; + text-align: center; + font-style: italic; + padding-top: 30px; + padding-left: 15px; + + >span{ + font-family: PingFang-SC; + font-weight: 600; + position: absolute; + margin-top: 5px; + font-size: 16px; + } + } + .d-group-img{ + + + text-align: center; + padding-top: 25px; + padding-left: 22px; + + + >img{ + width: 28px; + height: 28px; + border-radius: 25px; + position: absolute; + margin-left: 5px; + margin-top: 5px; + + } + + } + .d-group-name{ + margin-left: 2px; + margin-top: 5px; + padding-top: 30px; + padding-left: 105px; + position: absolute; + font-family: PingFang-SC; + font-weight: 600; + } + .d-group-score{ + + + padding-top: 30px; + padding-left: 220px; + + >span{ + margin-top: 5px; + padding: 0px; + font-family: PingFang-SC; + position: absolute; + } + } + + } + } + } + + + + } + + } +} \ No newline at end of file diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss index 3d3fbb4..de87190 100644 --- a/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss +++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss @@ -277,35 +277,6 @@ color: rgba(255, 76, 82, 1); } - .mw-cpt-top_title { - position: relative; - - .d-cpt-wrap { - height: 40px; - line-height: 40px; - padding-left: 10px; - background-color: #fff; - .d-cpt-ico { - position: relative; - top: -4px; - margin-right: 4px; - height: 20px; - } - .d-cpt-avatar { - position: relative; - float: right; - margin-right: 10px; - top: 5px; - width: 30px; - } - span { - font-size: 17px; - font-family: PingFang SC; - font-weight: 500; - color: rgba(255, 76, 82, 1); - } - } - } .mw-cpt-swiper { position: relative; @@ -1040,116 +1011,6 @@ } } - .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); - } - } - } - } - } } } } diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/more copy.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/more copy.scss new file mode 100644 index 0000000..5b6317a --- /dev/null +++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/more copy.scss @@ -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); + } + } + } + } +} + + + + diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/more.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/more.scss new file mode 100644 index 0000000..efdaf5e --- /dev/null +++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/more.scss @@ -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; + } + } + } + + } +} + + \ No newline at end of file diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/page-header.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/page-header.scss new file mode 100644 index 0000000..069f118 --- /dev/null +++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/page-header.scss @@ -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; + } + } + +} + diff --git a/epmet-oper-web/src/components/wx-index/cpt-item copy 2.vue b/epmet-oper-web/src/components/wx-index/cpt-item copy 2.vue new file mode 100644 index 0000000..93ea869 --- /dev/null +++ b/epmet-oper-web/src/components/wx-index/cpt-item copy 2.vue @@ -0,0 +1,603 @@ + + + + diff --git a/epmet-oper-web/src/components/wx-index/cpt-item.vue b/epmet-oper-web/src/components/wx-index/cpt-item.vue index 93ea869..0059a1d 100644 --- a/epmet-oper-web/src/components/wx-index/cpt-item.vue +++ b/epmet-oper-web/src/components/wx-index/cpt-item.vue @@ -1,47 +1,13 @@