新增粉丝团
This commit is contained in:
dragon
266
view/molistar/modules/fans_club/css/fans_rank.css
Normal file
266
view/molistar/modules/fans_club/css/fans_rank.css
Normal file
@@ -0,0 +1,266 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'din';
|
||||
src: url("../../../common/fonts/DINCond-Medium.ttf");
|
||||
src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
|
||||
}
|
||||
|
||||
body {
|
||||
width: 10rem;
|
||||
height: 100vh;
|
||||
background: #FEF3FC url("../images/bg.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
height: 1.17333rem;
|
||||
margin: 0.29333rem 0;
|
||||
padding: 0 0.24rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top .back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 0.66667rem;
|
||||
height: 0.66667rem;
|
||||
}
|
||||
|
||||
.top .back img {
|
||||
width: 0.21333rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
|
||||
.top .title {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.active_num {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 1.44rem;
|
||||
left: 0.4rem;
|
||||
z-index: 999;
|
||||
font-size: 0.26667rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.max {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 2.02667rem;
|
||||
z-index: 999;
|
||||
width: 9.2rem;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
border: 0.02667rem solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
padding: 0rem 0.26667rem 1.73333rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.max::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
backdrop-filter: blur(0.26667rem);
|
||||
-webkit-backdrop-filter: blur(0.26667rem);
|
||||
}
|
||||
|
||||
.max li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.53333rem;
|
||||
}
|
||||
|
||||
.max li:first-child {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.max li:last-child {
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
|
||||
.max li .index {
|
||||
width: 0.8rem;
|
||||
text-align: center;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.max li .avatar {
|
||||
width: 1.17333rem;
|
||||
height: 1.17333rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.4rem;
|
||||
margin-right: 0.26667rem;
|
||||
}
|
||||
|
||||
.max li .info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 1.17333rem;
|
||||
}
|
||||
|
||||
.max li .info .nick {
|
||||
font-size: 0.37333rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.max li .info .icon {
|
||||
width: 1.33333rem;
|
||||
height: 0.37333rem;
|
||||
margin-top: 0.10667rem;
|
||||
}
|
||||
|
||||
.max li .num {
|
||||
text-align: right;
|
||||
font-size: 0.32rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.max li .num p {
|
||||
font-family: 'din';
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #F5587B;
|
||||
margin-top: 0.05333rem;
|
||||
}
|
||||
|
||||
.mine {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
height: 1.70667rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.mine .mine_avatar {
|
||||
width: 1.06667rem;
|
||||
height: 1.06667rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.53333rem;
|
||||
margin-right: 0.26667rem;
|
||||
}
|
||||
|
||||
.mine .mine_nick {
|
||||
flex: 1;
|
||||
font-size: 0.37333rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mine .mine_status .join_btn {
|
||||
display: none;
|
||||
width: 2.34667rem;
|
||||
height: 0.61333rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.mine .mine_status .mine_num {
|
||||
display: none;
|
||||
text-align: right;
|
||||
font-size: 0.32rem;
|
||||
color: #999999;
|
||||
margin-right: 0.69333rem;
|
||||
}
|
||||
|
||||
.mine .mine_status .mine_num p {
|
||||
font-family: 'din';
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #F5587B;
|
||||
margin-top: 0.05333rem;
|
||||
}
|
||||
|
||||
.no-record-wrap {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
width: 9.2rem;
|
||||
border: 0.02667rem solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
margin: 2.02667rem auto 0;
|
||||
}
|
||||
|
||||
.no-record-wrap::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
backdrop-filter: blur(0.26667rem);
|
||||
-webkit-backdrop-filter: blur(0.26667rem);
|
||||
}
|
||||
|
||||
.no-record-wrap .no-record-contain {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -56%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-record-wrap .no-record-contain img {
|
||||
width: 5.33333rem;
|
||||
height: 4.74667rem;
|
||||
}
|
||||
|
||||
.no-record-wrap .no-record-contain p {
|
||||
color: #666;
|
||||
font-size: 0.34667rem;
|
||||
margin-top: 0.26667rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
261
view/molistar/modules/fans_club/css/fans_rank.scss
Normal file
261
view/molistar/modules/fans_club/css/fans_rank.scss
Normal file
@@ -0,0 +1,261 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-medium';
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'din';
|
||||
src: url('../../../common/fonts/DINCond-Medium.ttf');
|
||||
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
|
||||
url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
|
||||
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
body{
|
||||
// font-family: 'pingfang-medium';
|
||||
width: px2rem(750, );
|
||||
// height: px2rem(832, );
|
||||
height: 100vh;
|
||||
background: #FEF3FC url('../images/bg.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.top{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: px2rem(750, );
|
||||
height: px2rem(88, );
|
||||
margin: px2rem(22, ) 0;
|
||||
padding: 0 px2rem(18, );
|
||||
box-sizing: border-box;
|
||||
.back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: px2rem(50, );
|
||||
height: px2rem(50, );
|
||||
img{
|
||||
width: px2rem(16, );
|
||||
height: px2rem(24, );
|
||||
}
|
||||
}
|
||||
.title{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(32, );
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.active_num{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: px2rem(108, );
|
||||
left: px2rem(30, );
|
||||
z-index: 999;
|
||||
font-size: px2rem(20, );
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.max{
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(152, );
|
||||
z-index: 999;
|
||||
width: px2rem(690, );
|
||||
// height: 100%;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
border: px2rem(2, ) solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
padding: px2rem(0, ) px2rem(20, ) px2rem(130, );
|
||||
box-sizing: border-box;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
backdrop-filter: blur(px2rem(20));
|
||||
-webkit-backdrop-filter: blur(px2rem(20));
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: px2rem(40, );
|
||||
&:first-child{
|
||||
margin-top: px2rem(30, );
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: px2rem(180, );
|
||||
}
|
||||
.index{
|
||||
width: px2rem(60, );
|
||||
text-align: center;
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(32, );
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
.avatar{
|
||||
width: px2rem(88, );
|
||||
height: px2rem(88, );
|
||||
border-radius: 50%;
|
||||
margin-left: px2rem(30, );
|
||||
margin-right: px2rem(20, );
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: px2rem(88, );
|
||||
.nick{
|
||||
font-size: px2rem(28, );
|
||||
color: #333;
|
||||
}
|
||||
.icon{
|
||||
width: px2rem(100, );
|
||||
height: px2rem(28, );
|
||||
margin-top: px2rem(8, );
|
||||
}
|
||||
}
|
||||
.num{
|
||||
text-align: right;
|
||||
font-size: px2rem(24, );
|
||||
color: #999999;
|
||||
p{
|
||||
font-family: 'din';
|
||||
font-size: px2rem(32, );
|
||||
font-weight: bold;
|
||||
color: #F5587B;
|
||||
margin-top: px2rem(4, );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mine{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: px2rem(750, );
|
||||
height: px2rem(128, );
|
||||
background-color: #fff;
|
||||
.mine_avatar{
|
||||
width: px2rem(80, );
|
||||
height: px2rem(80, );
|
||||
border-radius: 50%;
|
||||
margin-left: px2rem(40, );
|
||||
margin-right: px2rem(20, );
|
||||
}
|
||||
.mine_nick{
|
||||
flex: 1;
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(28, );
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.mine_status{
|
||||
.join_btn{
|
||||
display: none;
|
||||
width: px2rem(176, );
|
||||
height: px2rem(46, );
|
||||
margin-right: px2rem(30, );
|
||||
}
|
||||
.mine_num{
|
||||
display: none;
|
||||
text-align: right;
|
||||
font-size: px2rem(24, );
|
||||
color: #999999;
|
||||
margin-right: px2rem(52, );
|
||||
p{
|
||||
font-family: 'din';
|
||||
font-size: px2rem(32, );
|
||||
font-weight: bold;
|
||||
color: #F5587B;
|
||||
margin-top: px2rem(4, );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-record-wrap{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
width: px2rem(690, );
|
||||
border: px2rem(2, ) solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
margin: px2rem(152, ) auto 0;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
backdrop-filter: blur(px2rem(20));
|
||||
-webkit-backdrop-filter: blur(px2rem(20));
|
||||
}
|
||||
.no-record-contain{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -56%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img{
|
||||
width: px2rem(400);
|
||||
height: px2rem(356);
|
||||
}
|
||||
p{
|
||||
color: #666;
|
||||
font-size: px2rem(26);
|
||||
margin-top: px2rem(20, );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
202
view/molistar/modules/fans_club/css/myfans.css
Normal file
202
view/molistar/modules/fans_club/css/myfans.css
Normal file
@@ -0,0 +1,202 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'din';
|
||||
src: url("../../../common/fonts/DINCond-Medium.ttf");
|
||||
src: url("../../../common/fonts/DINCond-Medium.ttf") format("woff"), url("../../../common/fonts/DINCond-Medium.ttf") format("truetype"), url("../../../common/fonts/DINCond-Medium.ttf") format("svg");
|
||||
}
|
||||
|
||||
body {
|
||||
width: 10rem;
|
||||
height: 100vh;
|
||||
background: #FEF3FC url("../images/bg.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
height: 1.17333rem;
|
||||
margin: 0.29333rem 0;
|
||||
padding: 0 0.24rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top .back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 0.66667rem;
|
||||
height: 0.66667rem;
|
||||
}
|
||||
|
||||
.top .back img {
|
||||
width: 0.21333rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
|
||||
.top .title {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.max {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 1.73333rem;
|
||||
z-index: 999;
|
||||
width: 9.2rem;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
border: 0.02667rem solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
padding: 0rem 0.26667rem 1.73333rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.max::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
backdrop-filter: blur(0.26667rem);
|
||||
-webkit-backdrop-filter: blur(0.26667rem);
|
||||
}
|
||||
|
||||
.max li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.53333rem;
|
||||
}
|
||||
|
||||
.max li:first-child {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.max li .index {
|
||||
width: 0.8rem;
|
||||
text-align: center;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.max li .avatar {
|
||||
width: 1.17333rem;
|
||||
height: 1.17333rem;
|
||||
border-radius: 50%;
|
||||
margin-left: 0.4rem;
|
||||
margin-right: 0.26667rem;
|
||||
}
|
||||
|
||||
.max li .info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 1.17333rem;
|
||||
}
|
||||
|
||||
.max li .info .nick {
|
||||
font-size: 0.37333rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.max li .info .icon {
|
||||
width: 1.33333rem;
|
||||
height: 0.37333rem;
|
||||
margin-top: 0.10667rem;
|
||||
}
|
||||
|
||||
.max li .num {
|
||||
text-align: right;
|
||||
font-size: 0.32rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.max li .num p {
|
||||
font-family: 'din';
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #F5587B;
|
||||
margin-top: 0.05333rem;
|
||||
}
|
||||
|
||||
.no-record-wrap {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
width: 9.2rem;
|
||||
border: 0.02667rem solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
margin: 2.02667rem auto 0;
|
||||
}
|
||||
|
||||
.no-record-wrap::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
backdrop-filter: blur(0.26667rem);
|
||||
-webkit-backdrop-filter: blur(0.26667rem);
|
||||
}
|
||||
|
||||
.no-record-wrap .no-record-contain {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -56%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-record-wrap .no-record-contain img {
|
||||
width: 5.33333rem;
|
||||
height: 4.74667rem;
|
||||
}
|
||||
|
||||
.no-record-wrap .no-record-contain p {
|
||||
color: #666;
|
||||
font-size: 0.34667rem;
|
||||
margin-top: 0.26667rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
200
view/molistar/modules/fans_club/css/myfans.scss
Normal file
200
view/molistar/modules/fans_club/css/myfans.scss
Normal file
@@ -0,0 +1,200 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-medium';
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'din';
|
||||
src: url('../../../common/fonts/DINCond-Medium.ttf');
|
||||
src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
|
||||
url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
|
||||
url('../../../common/fonts/DINCond-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
body{
|
||||
// font-family: 'pingfang-medium';
|
||||
width: px2rem(750, );
|
||||
// height: px2rem(832, );
|
||||
height: 100vh;
|
||||
background: #FEF3FC url('../images/bg.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.top{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: px2rem(750, );
|
||||
height: px2rem(88, );
|
||||
margin: px2rem(22, ) 0;
|
||||
padding: 0 px2rem(18, );
|
||||
box-sizing: border-box;
|
||||
.back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: px2rem(50, );
|
||||
height: px2rem(50, );
|
||||
img{
|
||||
width: px2rem(16, );
|
||||
height: px2rem(24, );
|
||||
}
|
||||
}
|
||||
.title{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(32, );
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.max{
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(130, );
|
||||
z-index: 999;
|
||||
width: px2rem(690, );
|
||||
// height: 100%;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
border: px2rem(2, ) solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
padding: px2rem(0, ) px2rem(20, ) px2rem(130, );
|
||||
box-sizing: border-box;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
backdrop-filter: blur(px2rem(20));
|
||||
-webkit-backdrop-filter: blur(px2rem(20));
|
||||
}
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: px2rem(40, );
|
||||
&:first-child{
|
||||
margin-top: px2rem(30, );
|
||||
}
|
||||
.index{
|
||||
width: px2rem(60, );
|
||||
text-align: center;
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(32, );
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
.avatar{
|
||||
width: px2rem(88, );
|
||||
height: px2rem(88, );
|
||||
border-radius: 50%;
|
||||
margin-left: px2rem(30, );
|
||||
margin-right: px2rem(20, );
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: px2rem(88, );
|
||||
.nick{
|
||||
font-size: px2rem(28, );
|
||||
color: #333;
|
||||
}
|
||||
.icon{
|
||||
width: px2rem(100, );
|
||||
height: px2rem(28, );
|
||||
margin-top: px2rem(8, );
|
||||
}
|
||||
}
|
||||
.num{
|
||||
text-align: right;
|
||||
font-size: px2rem(24, );
|
||||
color: #999999;
|
||||
p{
|
||||
font-family: 'din';
|
||||
font-size: px2rem(32, );
|
||||
font-weight: bold;
|
||||
color: #F5587B;
|
||||
margin-top: px2rem(4, );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-record-wrap{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
display: none;
|
||||
width: px2rem(690, );
|
||||
border: px2rem(2, ) solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
margin: px2rem(152, ) auto 0;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
backdrop-filter: blur(px2rem(20));
|
||||
-webkit-backdrop-filter: blur(px2rem(20));
|
||||
}
|
||||
.no-record-contain{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -56%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img{
|
||||
width: px2rem(400);
|
||||
height: px2rem(356);
|
||||
}
|
||||
p{
|
||||
color: #666;
|
||||
font-size: px2rem(26);
|
||||
margin-top: px2rem(20, );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
136
view/molistar/modules/fans_club/css/nameplate.css
Normal file
136
view/molistar/modules/fans_club/css/nameplate.css
Normal file
@@ -0,0 +1,136 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #D2DAFB;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
height: 1.17333rem;
|
||||
padding-top: 1.17333rem;
|
||||
}
|
||||
|
||||
.top .back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 0.66667rem;
|
||||
height: 0.66667rem;
|
||||
margin-left: 0.26667rem;
|
||||
}
|
||||
|
||||
.top .back img {
|
||||
width: 0.21333rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
|
||||
.top .title {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.max .record {
|
||||
position: fixed;
|
||||
top: 4.53333rem;
|
||||
right: 0;
|
||||
width: 0.61333rem;
|
||||
height: 2.10667rem;
|
||||
}
|
||||
|
||||
.max .record img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .header {
|
||||
width: 10rem;
|
||||
height: 7.33333rem;
|
||||
}
|
||||
|
||||
.max .header img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .desc {
|
||||
width: 9.2rem;
|
||||
height: 3.30667rem;
|
||||
margin: -0.8rem auto 0.53333rem;
|
||||
}
|
||||
|
||||
.max .desc img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 9.2rem;
|
||||
height: 9.30667rem;
|
||||
background: url("../images/main.png") no-repeat 0 0/100% 100%;
|
||||
margin: 0 auto 0.66667rem;
|
||||
}
|
||||
|
||||
.max .main .nameplate {
|
||||
width: 4rem;
|
||||
height: 1.14667rem;
|
||||
margin-top: 2.53333rem;
|
||||
}
|
||||
|
||||
.max .main .nameplate img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max .main .ipt {
|
||||
font-size: 0.37333rem;
|
||||
color: #873931;
|
||||
margin-top: 1.41333rem;
|
||||
}
|
||||
|
||||
.max .main .ipt span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.max .main .ipt input {
|
||||
width: 4.93333rem;
|
||||
height: 0.77333rem;
|
||||
border: 0.05333rem solid #D6DEFF;
|
||||
border-radius: 0.21333rem;
|
||||
outline: none;
|
||||
caret-color: #873931;
|
||||
color: #999;
|
||||
padding: 0 0.13333rem;
|
||||
box-sizing: border-box;
|
||||
margin-left: 0.13333rem;
|
||||
}
|
||||
|
||||
.max .main .apply_btn {
|
||||
width: 4.93333rem;
|
||||
height: 1.33333rem;
|
||||
margin: 1.2rem auto 0;
|
||||
}
|
||||
|
||||
.max .main .apply_btn img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
131
view/molistar/modules/fans_club/css/nameplate.scss
Normal file
131
view/molistar/modules/fans_club/css/nameplate.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
|
||||
body{
|
||||
background-color: #D2DAFB;
|
||||
}
|
||||
|
||||
.top{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: px2rem(750, );
|
||||
height: px2rem(88, );
|
||||
padding-top: px2rem(88, );
|
||||
// box-sizing: border-box;
|
||||
.back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: px2rem(50, );
|
||||
height: px2rem(50, );
|
||||
margin-left: px2rem(20, );
|
||||
img{
|
||||
width: px2rem(16, );
|
||||
height: px2rem(24, );
|
||||
}
|
||||
}
|
||||
.title{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(36, );
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.max{
|
||||
.record{
|
||||
position: fixed;
|
||||
top: px2rem(340, );
|
||||
right: 0;
|
||||
width: px2rem(46, );
|
||||
height: px2rem(158, );
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.header{
|
||||
width: px2rem(750, );
|
||||
height: px2rem(550, );
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.desc{
|
||||
width: px2rem(690, );
|
||||
height: px2rem(248, );
|
||||
margin: px2rem(-60, ) auto px2rem(40, );
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: px2rem(690, );
|
||||
height: px2rem(698, );
|
||||
background: url('../images/main.png') no-repeat 0 0/100% 100%;
|
||||
margin: 0 auto px2rem(50, );
|
||||
.nameplate{
|
||||
width: px2rem(300, );
|
||||
height: px2rem(86, );
|
||||
margin-top: px2rem(190, );
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.ipt{
|
||||
font-size: px2rem(28, );
|
||||
color: #873931;
|
||||
margin-top: px2rem(106, );
|
||||
span{
|
||||
font-weight: bold;
|
||||
}
|
||||
input{
|
||||
width: px2rem(370, );
|
||||
height: px2rem(58, );
|
||||
border: px2rem(4, ) solid #D6DEFF;
|
||||
border-radius: px2rem(16, );
|
||||
outline: none;
|
||||
caret-color: #873931;
|
||||
color: #999;
|
||||
padding: 0 px2rem(10, );
|
||||
box-sizing: border-box;
|
||||
margin-left: px2rem(10, );
|
||||
}
|
||||
}
|
||||
.apply_btn{
|
||||
width: px2rem(370, );
|
||||
height: px2rem(100, );
|
||||
margin: px2rem(90, ) auto 0;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
142
view/molistar/modules/fans_club/css/record.css
Normal file
142
view/molistar/modules/fans_club/css/record.css
Normal file
@@ -0,0 +1,142 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||
}
|
||||
|
||||
.top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
height: 1.17333rem;
|
||||
padding-top: 1.17333rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.top .back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 0.66667rem;
|
||||
height: 0.66667rem;
|
||||
margin-left: 0.26667rem;
|
||||
}
|
||||
|
||||
.top .back img {
|
||||
width: 0.21333rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
|
||||
.top .title {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
font-size: 0.48rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.max {
|
||||
display: none;
|
||||
padding: 0 0.4rem;
|
||||
margin-top: 2.34667rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.max li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.42667rem;
|
||||
}
|
||||
|
||||
.max li:first-child {
|
||||
margin-top: 0.18667rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-style {
|
||||
width: 1.70667rem;
|
||||
height: 1.49333rem;
|
||||
background-color: #F4F4F4;
|
||||
border-radius: 0.21333rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.max li .nameplate-style img {
|
||||
width: 1.49333rem;
|
||||
height: 0.42667rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.10667rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap .nameplate-desc {
|
||||
font-size: 0.37333rem;
|
||||
color: #333333;
|
||||
margin-bottom: 0.13333rem;
|
||||
}
|
||||
|
||||
.max li .nameplate-desc-wrap p span {
|
||||
font-size: 0.26667rem;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.max li .isPass {
|
||||
width: 2.66667rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.max li .isPass p {
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.max li .isPass p.not-pass {
|
||||
color: #FB486A;
|
||||
}
|
||||
|
||||
.max li .isPass p.in-review {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.max li .isPass .result {
|
||||
font-size: 0.26667rem;
|
||||
color: #CCCCCC;
|
||||
margin-top: 0.10667rem;
|
||||
}
|
||||
|
||||
.no-record-wrap {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.no-record-wrap img {
|
||||
width: 4.98667rem;
|
||||
height: 5.2rem;
|
||||
margin-bottom: -1.33333rem;
|
||||
}
|
||||
|
||||
.no-record-wrap span {
|
||||
color: #666;
|
||||
font-size: 0.42667rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
137
view/molistar/modules/fans_club/css/record.scss
Normal file
137
view/molistar/modules/fans_club/css/record.scss
Normal file
@@ -0,0 +1,137 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
|
||||
.top{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: px2rem(750, );
|
||||
height: px2rem(88, );
|
||||
padding-top: px2rem(88, );
|
||||
// box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
.back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: px2rem(50, );
|
||||
height: px2rem(50, );
|
||||
margin-left: px2rem(20, );
|
||||
img{
|
||||
width: px2rem(16, );
|
||||
height: px2rem(24, );
|
||||
}
|
||||
}
|
||||
.title{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(36, );
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.max{
|
||||
display: none;
|
||||
// font-family: 'pingfang-bold';
|
||||
padding: 0 px2rem(30);
|
||||
margin-top: px2rem(176, );
|
||||
overflow-y: auto;
|
||||
li{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: px2rem(32, );
|
||||
&:first-child{
|
||||
margin-top: px2rem(14, );
|
||||
}
|
||||
.nameplate-style{
|
||||
width: px2rem(128);
|
||||
height: px2rem(112);
|
||||
background-color: #F4F4F4;
|
||||
border-radius: px2rem(16);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img{
|
||||
width: px2rem(112);
|
||||
height: px2rem(32);
|
||||
}
|
||||
}
|
||||
.nameplate-desc-wrap{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: px2rem(8);
|
||||
.nameplate-desc{
|
||||
font-size: px2rem(28);
|
||||
color: #333333;
|
||||
margin-bottom: px2rem(10);
|
||||
}
|
||||
p{
|
||||
span{
|
||||
font-size: px2rem(20);
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
.isPass{
|
||||
width: px2rem(200);
|
||||
text-align: right;
|
||||
p{
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(30);
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
&.not-pass{
|
||||
color: #FB486A;
|
||||
}
|
||||
&.in-review{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.result{
|
||||
font-size: px2rem(20);
|
||||
color: #CCCCCC;
|
||||
margin-top: px2rem(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-record-wrap{
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
img{
|
||||
width: px2rem(374);
|
||||
height: px2rem(390);
|
||||
margin-bottom: px2rem(-100);
|
||||
}
|
||||
span{
|
||||
color: #666;
|
||||
font-size: px2rem(32);
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
101
view/molistar/modules/fans_club/css/rule.css
Normal file
101
view/molistar/modules/fans_club/css/rule.css
Normal file
@@ -0,0 +1,101 @@
|
||||
@font-face {
|
||||
font-family: 'pingfang-bold';
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf");
|
||||
src: url("../../../common/fonts/PingFang Bold.ttf") format("woff"), url("../../../common/fonts/PingFang Bold.ttf") format("truetype"), url("../../../common/fonts/PingFang Bold.ttf") format("svg");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'pingfang-medium';
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf");
|
||||
src: url("../../../common/fonts/PingFang-Medium.ttf") format("woff"), url("../../../common/fonts/PingFang-Medium.ttf") format("truetype"), url("../../../common/fonts/PingFang-Medium.ttf") format("svg");
|
||||
}
|
||||
|
||||
body {
|
||||
width: 10rem;
|
||||
height: 100vh;
|
||||
background: #FEF3FC url("../images/bg.png") no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 10rem;
|
||||
height: 1.17333rem;
|
||||
margin: 0.29333rem 0;
|
||||
padding: 0 0.24rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top .back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 0.66667rem;
|
||||
height: 0.66667rem;
|
||||
}
|
||||
|
||||
.top .back img {
|
||||
width: 0.21333rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
|
||||
.top .title {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
font-size: 0.42667rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.rule {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 1.73333rem;
|
||||
z-index: 999;
|
||||
width: 9.2rem;
|
||||
height: 100vh;
|
||||
border: 0.02667rem solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
padding: 0.32rem 0.26667rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rule::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: 0.21333rem 0.21333rem 0 0;
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(0.26667rem);
|
||||
-webkit-backdrop-filter: blur(0.26667rem);
|
||||
}
|
||||
|
||||
.rule .item {
|
||||
margin-bottom: 0.32rem;
|
||||
}
|
||||
|
||||
.rule .item .qusetion {
|
||||
font-size: 0.32rem;
|
||||
font-weight: bold;
|
||||
color: #FE3478;
|
||||
margin-bottom: 0.21333rem;
|
||||
}
|
||||
|
||||
.rule .item .answer {
|
||||
font-size: 0.26667rem;
|
||||
color: #333333;
|
||||
line-height: 0.37333rem;
|
||||
}
|
||||
105
view/molistar/modules/fans_club/css/rule.scss
Normal file
105
view/molistar/modules/fans_club/css/rule.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-bold';
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf');
|
||||
src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'pingfang-medium';
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf');
|
||||
src: url('../../../common/fonts/PingFang-Medium.ttf') format('woff'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('truetype'),
|
||||
url('../../../common/fonts/PingFang-Medium.ttf') format('svg');
|
||||
}
|
||||
|
||||
body{
|
||||
// font-family: 'pingfang-bold';
|
||||
width: px2rem(750, );
|
||||
height: 100vh;
|
||||
background: #FEF3FC url('../images/bg.png') no-repeat 0 0/100% 100%;
|
||||
}
|
||||
|
||||
.top{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: px2rem(750, );
|
||||
height: px2rem(88, );
|
||||
margin: px2rem(22, ) 0;
|
||||
padding: 0 px2rem(18, );
|
||||
box-sizing: border-box;
|
||||
.back{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: px2rem(50, );
|
||||
height: px2rem(50, );
|
||||
img{
|
||||
width: px2rem(16, );
|
||||
height: px2rem(24, );
|
||||
}
|
||||
}
|
||||
.title{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 999;
|
||||
// font-family: 'pingfang-bold';
|
||||
font-size: px2rem(32, );
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.rule{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: px2rem(130, );
|
||||
z-index: 999;
|
||||
width: px2rem(690, );
|
||||
height: 100vh;
|
||||
border: px2rem(2, ) solid #fff;
|
||||
border-bottom: none;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
padding: px2rem(24, ) px2rem(20, ) 0;
|
||||
box-sizing: border-box;
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: px2rem(16, ) px2rem(16, ) 0 0;
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(px2rem(20));
|
||||
-webkit-backdrop-filter: blur(px2rem(20));
|
||||
}
|
||||
.item{
|
||||
margin-bottom: px2rem(24, );
|
||||
.qusetion{
|
||||
font-size: px2rem(24, );
|
||||
font-weight: bold;
|
||||
color: #FE3478;
|
||||
margin-bottom: px2rem(16, );
|
||||
}
|
||||
.answer{
|
||||
// font-family: 'pingfang-medium';
|
||||
font-size: px2rem(20, );
|
||||
color: #333333;
|
||||
line-height: px2rem(28, );
|
||||
}
|
||||
}
|
||||
}
|
||||
49
view/molistar/modules/fans_club/fans_rank.html
Normal file
49
view/molistar/modules/fans_club/fans_rank.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
|
||||
<title>粉丝榜</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/fans_rank.css?v=1.1">
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top">
|
||||
<div class="back"><img src="./images/back.png" alt=""></div>
|
||||
<div class="title">粉丝榜</div>
|
||||
</div>
|
||||
<div class="active_num"><span>0</span>人活跃，已隐藏不活跃粉丝</div>
|
||||
<ul class="max"></ul>
|
||||
<div class="mine">
|
||||
<img src="./images/logo.png" alt="" class="mine_avatar">
|
||||
<p class="mine_nick"></p>
|
||||
<div class="mine_status">
|
||||
<img src="./images/join_btn.png" alt="" class="join_btn">
|
||||
<div class="mine_num">
|
||||
亲密值
|
||||
<p>0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-record-wrap">
|
||||
<div class="no-record-contain">
|
||||
<img src="./images/empty.png" alt="">
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="./js/fans_rank.js?v=1.1"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
view/molistar/modules/fans_club/images/apply-btn.png
Normal file
BIN
view/molistar/modules/fans_club/images/apply-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
view/molistar/modules/fans_club/images/back.png
Normal file
BIN
view/molistar/modules/fans_club/images/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 340 B |
BIN
view/molistar/modules/fans_club/images/bg.png
Normal file
BIN
view/molistar/modules/fans_club/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
view/molistar/modules/fans_club/images/default.png
Normal file
BIN
view/molistar/modules/fans_club/images/default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
view/molistar/modules/fans_club/images/desc.png
Normal file
BIN
view/molistar/modules/fans_club/images/desc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
view/molistar/modules/fans_club/images/empty.png
Normal file
BIN
view/molistar/modules/fans_club/images/empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
view/molistar/modules/fans_club/images/header.png
Normal file
BIN
view/molistar/modules/fans_club/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
view/molistar/modules/fans_club/images/join_btn.png
Normal file
BIN
view/molistar/modules/fans_club/images/join_btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
view/molistar/modules/fans_club/images/logo.png
Normal file
BIN
view/molistar/modules/fans_club/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
view/molistar/modules/fans_club/images/main.png
Normal file
BIN
view/molistar/modules/fans_club/images/main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
view/molistar/modules/fans_club/images/record-icon.png
Normal file
BIN
view/molistar/modules/fans_club/images/record-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
169
view/molistar/modules/fans_club/js/fans_rank.js
Normal file
169
view/molistar/modules/fans_club/js/fans_rank.js
Normal file
@@ -0,0 +1,169 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
let query = getQueryString()
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
|
||||
|
||||
// 页面全屏
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
|
||||
let fansList = []
|
||||
let userInfo = {}
|
||||
|
||||
let pageNum = 1
|
||||
let pageSize = 25
|
||||
let canNext
|
||||
let isLock = true
|
||||
const getFansList = () => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/anchorFansTeam/getFansMemberRankVo',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
pageNum,
|
||||
pageSize,
|
||||
teamUid: query.roomUid
|
||||
},
|
||||
success(res){
|
||||
hideLoading(layerIndex);
|
||||
if (res.code === 200) {
|
||||
fansList.push(...res.data.memberVos)
|
||||
|
||||
if (!fansList.length) {
|
||||
// $('.no-record-wrap').css('display', 'flex')
|
||||
$('.no-record-wrap').show()
|
||||
} else {
|
||||
$('.active_num span').html(res.data.activeNum)
|
||||
$('.active_num').show()
|
||||
$('.max').show()
|
||||
}
|
||||
|
||||
userInfo = res.data.currentUserMemberVo
|
||||
renderUserInfo(res.data.isJoin)
|
||||
|
||||
if (res.data.memberVos.length === pageSize) {
|
||||
// 能够继续请求下一页
|
||||
canNext = true
|
||||
} else {
|
||||
canNext = false
|
||||
}
|
||||
|
||||
renderFansList()
|
||||
isLock = true
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(){
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染列表
|
||||
const renderFansList = () => {
|
||||
let str = ''
|
||||
fansList.map((item, index) => {
|
||||
if(item.exper > 10000) {
|
||||
item.exper = ( Math.floor(item.exper/1000) ) / 10 + 'W'
|
||||
}
|
||||
str += `
|
||||
<li>
|
||||
<p class="index">${index+1}</p>
|
||||
<img src="${item.avatar}" alt="" class="avatar">
|
||||
<div class="info">
|
||||
<p class="nick">${item.nick.length > 8 ? item.nick.slice(0, 8)+'...' : item.nick}</p>
|
||||
<img src="${item.nameplateImage}" alt="" class="icon">
|
||||
</div>
|
||||
<div class="num">
|
||||
亲密值
|
||||
<p>${item.exper}</p>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.max').html(str)
|
||||
}
|
||||
// 渲染底部用户信息
|
||||
const renderUserInfo = (isJoin) => {
|
||||
$('.mine_avatar').attr('src', userInfo.avatar)
|
||||
|
||||
if(userInfo.nick.length > 8) {
|
||||
userInfo.nick = userInfo.nick.slice(0, 8) + '...'
|
||||
}
|
||||
$('.mine_nick').html(userInfo.nick)
|
||||
|
||||
if(isJoin) {
|
||||
if(userInfo.exper > 10000) {
|
||||
userInfo.exper = ( Math.floor(userInfo.exper/1000) ) / 10 + 'W'
|
||||
}
|
||||
$('.mine_num p').html(userInfo.exper)
|
||||
$('.mine_num').show()
|
||||
}else {
|
||||
$('.join_btn').show()
|
||||
}
|
||||
}
|
||||
|
||||
$(function() {
|
||||
getInfoFromClient()
|
||||
setTimeout(() => {
|
||||
getFansList()
|
||||
}, 50)
|
||||
|
||||
$('.no-record-wrap').height($(window).height()-$('.top').outerHeight(true) - $('.mine').height())
|
||||
|
||||
$('.back, .join_btn').click(() => {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.closeWebView()
|
||||
} else {
|
||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||||
}
|
||||
})
|
||||
|
||||
// 监听滚动
|
||||
$('ul').scroll(function(){
|
||||
let scrollTop = $(this).scrollTop()
|
||||
let scrollHeight = $('ul')[0].scrollHeight
|
||||
let ulHeight = $(this).innerHeight()
|
||||
if(scrollTop + ulHeight + 100 >= scrollHeight){
|
||||
if(isLock){
|
||||
// 请求下一页
|
||||
if(canNext){
|
||||
pageNum++
|
||||
getFansList()
|
||||
isLock = false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
139
view/molistar/modules/fans_club/js/myfans.js
Normal file
139
view/molistar/modules/fans_club/js/myfans.js
Normal file
@@ -0,0 +1,139 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
|
||||
// 页面全屏
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
|
||||
// 返回
|
||||
$('.back').click(() => {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.closeWebView()
|
||||
} else {
|
||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||||
}
|
||||
})
|
||||
|
||||
// 封装layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
|
||||
let fansList = []
|
||||
let pageNum = 1
|
||||
let pageSize = 20
|
||||
let canNext
|
||||
let isLock = true
|
||||
const getFansList = () => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/anchorFansTeam/getFansMemberVoList',
|
||||
data: {
|
||||
uid: pubInfo.uid,
|
||||
pageNum,
|
||||
pageSize
|
||||
},
|
||||
success(res){
|
||||
hideLoading(layerIndex);
|
||||
if (res.code === 200) {
|
||||
fansList.push(...res.data)
|
||||
if (!fansList.length) {
|
||||
// $('.no-record-wrap').css('display', 'flex')
|
||||
$('.no-record-wrap').show()
|
||||
} else {
|
||||
$('.max').show()
|
||||
}
|
||||
|
||||
if (res.data.length === pageSize) {
|
||||
// 能够继续请求下一页
|
||||
canNext = true
|
||||
} else {
|
||||
canNext = false
|
||||
}
|
||||
|
||||
renderFansList()
|
||||
isLock = true
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error(){
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const renderFansList = () => {
|
||||
let str = ''
|
||||
fansList.map((item, index) => {
|
||||
if(item.exper > 10000) {
|
||||
item.exper = ( Math.floor(item.exper/1000) ) / 10 + 'W'
|
||||
}
|
||||
str += `
|
||||
<li>
|
||||
<p class="index">${index+1}</p>
|
||||
<img src="${item.avatar}" alt="" class="avatar">
|
||||
<div class="info">
|
||||
<p class="nick">${item.nick.length > 8 ? item.nick.slice(0, 8)+'...' : item.nick}</p>
|
||||
<img src="${item.nameplateImage}" alt="" class="icon">
|
||||
</div>
|
||||
<div class="num">
|
||||
亲密值
|
||||
<p>${item.exper}</p>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.max').html(str)
|
||||
}
|
||||
|
||||
$(function() {
|
||||
getInfoFromClient()
|
||||
setTimeout(() => {
|
||||
getFansList()
|
||||
}, 50)
|
||||
|
||||
$('.no-record-wrap').height($(window).height()-$('.top').outerHeight(true))
|
||||
|
||||
// 监听滚动
|
||||
$('ul').scroll(function(){
|
||||
let scrollTop = $(this).scrollTop()
|
||||
let scrollHeight = $('ul')[0].scrollHeight
|
||||
let ulHeight = $(this).innerHeight()
|
||||
if(scrollTop + ulHeight + 100 >= scrollHeight){
|
||||
if(isLock){
|
||||
// 请求下一页
|
||||
if(canNext){
|
||||
pageNum++
|
||||
getFansList()
|
||||
isLock = false
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
143
view/molistar/modules/fans_club/js/nameplate.js
Normal file
143
view/molistar/modules/fans_club/js/nameplate.js
Normal file
@@ -0,0 +1,143 @@
|
||||
let urlPrefix = getUrlPrefix()
|
||||
let browser = checkVersion()
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
|
||||
|
||||
// 封裝layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success (e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
|
||||
// 獲取可申請銘牌
|
||||
let nameplateList = []
|
||||
const getUserNameplateInfo = () => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/anchorFansTeam/getApplyPrivilegeFansMpVoList',
|
||||
data: {
|
||||
uid: pubInfo.uid
|
||||
},
|
||||
success (res) {
|
||||
hideLoading(layerIndex);
|
||||
if (res.code === 200) {
|
||||
nameplateList = res.data
|
||||
renderNameplateInfo()
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error () {
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 渲染銘牌
|
||||
const renderNameplateInfo = () => {
|
||||
let str = ''
|
||||
nameplateList.map((item) => {
|
||||
str += `
|
||||
<img src="${item.icon}" alt="" data-privilegeId=${item.privilegeId}>
|
||||
`
|
||||
})
|
||||
$('.nameplate').html(str)
|
||||
}
|
||||
|
||||
// 發送申請
|
||||
const sendApply = (mpTx, privilegeId) => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/anchorFansTeam/applyFansTeamMp',
|
||||
data: {
|
||||
mpTx,
|
||||
privilegeId
|
||||
},
|
||||
success (res) {
|
||||
hideLoading(layerIndex);
|
||||
if (res.code === 200) {
|
||||
toastMsg('申請成功')
|
||||
$('input').val('')
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error () {
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
setTimeout(() => {
|
||||
// 頁面全屏
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
|
||||
// 返回
|
||||
$('.back').click(() => {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.closeWebView()
|
||||
} else {
|
||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||||
}
|
||||
})
|
||||
getUserNameplateInfo()
|
||||
}, 150)
|
||||
|
||||
// $('input').focus(() => {
|
||||
// setTimeout(() => {
|
||||
// $('body').css('height', '200vh')
|
||||
// $(window).scrollTop($('body').height()/4)
|
||||
// console.log($(window).scrollTop());
|
||||
// }, 30);
|
||||
// // setTimeout(() => {
|
||||
// // }, 500);
|
||||
// })
|
||||
// $('input').blur(() => {
|
||||
// setTimeout(() => {
|
||||
// $('body').css('height', '100vh')
|
||||
// $(window).scrollTop(0)
|
||||
// console.log($(window).scrollTop());
|
||||
// }, 30);
|
||||
// })
|
||||
|
||||
|
||||
// 點擊申請
|
||||
$('.apply_btn').click(() => {
|
||||
if ($('input').val().length != 4) {
|
||||
return toastMsg('請添加4個字的銘牌文字')
|
||||
}
|
||||
sendApply($('input').val(), $('.nameplate img').eq(0).data('privilegeid'))
|
||||
})
|
||||
|
||||
// 點擊申請記錄按鈕
|
||||
$('.record').on('click', function () {
|
||||
window.location.href = './record.html'
|
||||
})
|
||||
})
|
||||
101
view/molistar/modules/fans_club/js/record.js
Normal file
101
view/molistar/modules/fans_club/js/record.js
Normal file
@@ -0,0 +1,101 @@
|
||||
let urlPrefix = getUrlPrefix();
|
||||
let browser = checkVersion()
|
||||
if (EnvCheck() === 'test') new VConsole
|
||||
|
||||
// 封裝layer消息提醒框
|
||||
let layerIndex
|
||||
const showLoading = (content = '加載中...') => {
|
||||
layer.open({
|
||||
type: 2,
|
||||
shadeClose: false,
|
||||
content,
|
||||
success(e) {
|
||||
layerIndex = $(e).attr('index')
|
||||
}
|
||||
})
|
||||
}
|
||||
const hideLoading = (index) => {
|
||||
layer.close(index)
|
||||
}
|
||||
const toastMsg = (content = '操作完成', time = 2) => {
|
||||
layer.open({
|
||||
content,
|
||||
time,
|
||||
skin: 'msg'
|
||||
})
|
||||
}
|
||||
|
||||
let recordList = []
|
||||
// 獲取用戶申請記錄
|
||||
const getUserApplyRecord = () => {
|
||||
showLoading()
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/anchorFansTeam/getApplyRecordList',
|
||||
data: {
|
||||
uid: pubInfo.uid
|
||||
},
|
||||
success(res) {
|
||||
hideLoading(layerIndex)
|
||||
if (res.code === 200) {
|
||||
if (!res.data.length) {
|
||||
$('.no-record-wrap').css('display', 'flex')
|
||||
} else {
|
||||
$('.max').show()
|
||||
}
|
||||
recordList = res.data
|
||||
renderRecord()
|
||||
} else {
|
||||
toastMsg(res.message)
|
||||
}
|
||||
},
|
||||
error() {
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 渲染申請記錄
|
||||
const renderRecord = () => {
|
||||
let str = '';
|
||||
recordList.map(item => {
|
||||
str += `
|
||||
<li>
|
||||
<div class="nameplate-style"><img src="${item.icon}" alt=""></div>
|
||||
<div class="nameplate-desc-wrap">
|
||||
<span class="nameplate-desc">文字：${item.mpTx}</span>
|
||||
<p>
|
||||
<span>${dateFormat(item.createTime, "yyyy-MM-dd")}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="isPass">
|
||||
<p class='${item.auditType === 1 ? 'not-pass' : (item.auditType === 0 ? 'in-review' : '')}'>${item.auditType === 0 ? '待審核' : (item.auditType === 1 ? '未通過' : '已通過')}</p>
|
||||
${item.remark ?
|
||||
(item.remark.length > 8 ? `<p class="result">${item.remark.slice(0, 8) + '...'}</p>` : `<p class="result">${item.remark}</p>`) :
|
||||
''
|
||||
}
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
$('.max').html(str)
|
||||
}
|
||||
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
setTimeout(() => {
|
||||
getUserApplyRecord()
|
||||
}, 50)
|
||||
|
||||
// 頁面全屏
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
|
||||
// 返回
|
||||
$('.back').click(() => {
|
||||
window.history.go(-1)
|
||||
})
|
||||
})
|
||||
17
view/molistar/modules/fans_club/js/rule.js
Normal file
17
view/molistar/modules/fans_club/js/rule.js
Normal file
@@ -0,0 +1,17 @@
|
||||
let browser = checkVersion()
|
||||
|
||||
// 页面全屏
|
||||
if (browser.android) {
|
||||
window.androidJsObj.initShowNav(false)
|
||||
} else {
|
||||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||||
}
|
||||
|
||||
// 返回
|
||||
$('.back').click(() => {
|
||||
if (browser.android) {
|
||||
window.androidJsObj.closeWebView()
|
||||
} else {
|
||||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||||
}
|
||||
})
|
||||
37
view/molistar/modules/fans_club/myfans.html
Normal file
37
view/molistar/modules/fans_club/myfans.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
|
||||
<title>我的粉丝团</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/myfans.css?v=1.1">
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top">
|
||||
<div class="back"><img src="./images/back.png" alt=""></div>
|
||||
<div class="title">我的粉丝团</div>
|
||||
</div>
|
||||
<ul class="max"></ul>
|
||||
<div class="no-record-wrap">
|
||||
<div class="no-record-contain">
|
||||
<img src="./images/empty.png" alt="">
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="./js/myfans.js?v=1.1"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
52
view/molistar/modules/fans_club/nameplate.html
Normal file
52
view/molistar/modules/fans_club/nameplate.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
|
||||
<title>申請粉絲銘牌</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/nameplate.css">
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top">
|
||||
<div class="back"><img src="./images/back.png" alt=""></div>
|
||||
<div class="title"></div>
|
||||
</div>
|
||||
<div class="max">
|
||||
<div class="record">
|
||||
<img src="./images/record-icon.png" alt="">
|
||||
</div>
|
||||
<div class="header">
|
||||
<img src="./images/header.png" alt="">
|
||||
</div>
|
||||
<div class="desc">
|
||||
<img src="./images/desc.png" alt="">
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="nameplate"></div>
|
||||
<div class="ipt">
|
||||
<span>銘牌文案</span>
|
||||
<input type="text" maxlength="4" id="ipt">
|
||||
</div>
|
||||
<div class="apply_btn">
|
||||
<img src="./images/apply-btn.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="./js/nameplate.js?v=1.0"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
35
view/molistar/modules/fans_club/record.html
Normal file
35
view/molistar/modules/fans_club/record.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
|
||||
<title>申请记录</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/record.css?1.1">
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top">
|
||||
<div class="back"><img src="./images/back.png" alt=""></div>
|
||||
<div class="title">申请记录</div>
|
||||
</div>
|
||||
<ul class="max"></ul>
|
||||
<div class="no-record-wrap">
|
||||
<img src="./images/default.png" alt="">
|
||||
<span>暂无申请记录</span>
|
||||
</div>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="./js/record.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
57
view/molistar/modules/fans_club/rule.html
Normal file
57
view/molistar/modules/fans_club/rule.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
|
||||
<title>粉丝团规则</title>
|
||||
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="./css/rule.css?v=1.1">
|
||||
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top">
|
||||
<div class="back"><img src="./images/back.png" alt=""></div>
|
||||
<div class="title">粉丝团规则</div>
|
||||
</div>
|
||||
<div class="rule">
|
||||
<div class="item">
|
||||
<p class="qusetion">什么是粉丝团？</p>
|
||||
<p class="answer">
|
||||
粉丝团是主播和粉丝自己的团体，是互相之间最直接的纽带。每个主播的粉丝在粉丝团中做任务、互动、提高亲密度，体会在团体中获得的归属感和快乐。
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="qusetion">如何拥有粉丝团？</p>
|
||||
<p class="answer">
|
||||
成为个人主播即可拥有粉丝团，每个主播有且只有一个粉丝团。
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="qusetion">如何加入粉丝团？</p>
|
||||
<p class="answer">
|
||||
任何人都可以加入粉丝团，主播也可以加入其他主播的粉丝团，在个人主播房间内，点击粉丝团入口，花费10鉆送出入团礼物即可加入TA的粉丝团，开启粉丝团任务，还可以增加亲密度哦。加入主播粉丝团后会自动关注主播。
|
||||
</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="qusetion">粉丝团有什么特权？</p>
|
||||
<p class="answer">
|
||||
加入主播粉丝团后，即可每天获得10个粉丝专属礼物和主播的专属粉丝铭牌（加入即获得普通粉丝铭牌，若当天完成所有粉丝任务，则解锁活跃粉丝铭牌，若七天内无亲密值增长，粉丝铭牌则会变黯淡，首周不计入统计~）加入粉丝团后可解锁粉丝任务，提高与主播的亲密度，有机会登上主播的粉丝榜哦~
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="./js/rule.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -31,11 +31,12 @@
|
||||
<script src="../../common/local/langHandler.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
getInfoFromClient()
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
let env = EnvCheck();
|
||||
if (env == 'test') {
|
||||
new VConsole();
|
||||
}
|
||||
getInfoFromClient()
|
||||
setTimeout(() => {
|
||||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||||
translateFun();
|
||||
@@ -46,7 +47,7 @@
|
||||
const langReplace = window.lang.replace;
|
||||
const localLang = window.lang;
|
||||
$('#introduction_title').html(langReplace(localLang.demoModule.introduction_title));
|
||||
$('#introduction_title_img').attr('src',langReplace(localLang.demoModule.introduction_title_img));
|
||||
$('#introduction_title_img').attr('src', langReplace(localLang.demoModule.introduction_title_img));
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user