From df0ac03c865b107f9830be69cf6a11510c173abd Mon Sep 17 00:00:00 2001
From: dragon <3013557874@qq.com>
Date: Thu, 26 Dec 2024 11:42:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=88=9B=E5=BB=BA=E5=85=AC?=
=?UTF-8?q?=E4=BC=9A=E8=8B=B1=E8=AF=AD=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../molistar/modules/guildAr/createGuild.html | 81 ++++
.../modules/guildAr/css/createGuild.css | 369 +++++++++++++++++
.../modules/guildAr/css/createGuild.scss | 375 ++++++++++++++++++
view/molistar/modules/guildAr/css/guild.css | 328 +++++++++------
view/molistar/modules/guildAr/css/guild.scss | 343 ++++++++++------
view/molistar/modules/guildAr/guild.html | 55 +--
view/molistar/modules/guildAr/images/A.png | Bin 0 -> 1379 bytes
view/molistar/modules/guildAr/images/B.png | Bin 0 -> 1503 bytes
view/molistar/modules/guildAr/images/S.png | Bin 0 -> 1376 bytes
view/molistar/modules/guildAr/images/SS.png | Bin 0 -> 1186 bytes
.../guildAr/images/createGuildNull.png | Bin 0 -> 2248 bytes
.../modules/guildAr/images/guildLiBg.png | Bin 0 -> 48951 bytes
.../modules/guildAr/js/createGuild.js | 237 +++++++++++
view/molistar/modules/guildAr/js/guild.js | 139 ++++++-
view/molistar/modules/guildAr/local/ar.js | 20 +
view/molistar/modules/guildAr/local/en.js | 22 +
view/molistar/modules/guildAr/local/zh.js | 21 +
17 files changed, 1690 insertions(+), 300 deletions(-)
create mode 100644 view/molistar/modules/guildAr/createGuild.html
create mode 100644 view/molistar/modules/guildAr/css/createGuild.css
create mode 100644 view/molistar/modules/guildAr/css/createGuild.scss
create mode 100644 view/molistar/modules/guildAr/images/A.png
create mode 100644 view/molistar/modules/guildAr/images/B.png
create mode 100644 view/molistar/modules/guildAr/images/S.png
create mode 100644 view/molistar/modules/guildAr/images/SS.png
create mode 100644 view/molistar/modules/guildAr/images/createGuildNull.png
create mode 100644 view/molistar/modules/guildAr/images/guildLiBg.png
create mode 100644 view/molistar/modules/guildAr/js/createGuild.js
diff --git a/view/molistar/modules/guildAr/createGuild.html b/view/molistar/modules/guildAr/createGuild.html
new file mode 100644
index 0000000..2b45db8
--- /dev/null
+++ b/view/molistar/modules/guildAr/createGuild.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+

+
+
+
+
+
+
+

+
*
+
+
+
*
+
+

+
+
+
+
+
+
+

+
+
+ Submit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/view/molistar/modules/guildAr/css/createGuild.css b/view/molistar/modules/guildAr/css/createGuild.css
new file mode 100644
index 0000000..72a3300
--- /dev/null
+++ b/view/molistar/modules/guildAr/css/createGuild.css
@@ -0,0 +1,369 @@
+html,
+body {
+ width: 100%;
+ height: 17.78667rem;
+ background: #FFFFFF;
+}
+
+.back {
+ width: 100%;
+ height: 2.38667rem;
+ line-height: 3.2rem;
+ position: fixed;
+ left: 0;
+ top: 0rem;
+ text-align: center;
+ color: #333333;
+ font-size: 0.45333rem;
+ font-weight: bold;
+ z-index: 10;
+ background: #fff;
+}
+
+.back img {
+ width: 0.58667rem;
+ height: 0.58667rem;
+ position: absolute;
+ left: 0.24rem;
+ top: 58%;
+}
+
+.myInfo {
+ width: 9.14667rem;
+ height: 2.13333rem;
+ background: #F7F7F7;
+ border-radius: 0.26667rem;
+ margin: 2.6rem auto 0.42667rem;
+ position: relative;
+}
+
+.myInfo .tx {
+ width: 1.6rem;
+ height: 1.6rem;
+ position: absolute;
+ left: 0.32rem;
+ top: 50%;
+ transform: translateY(-50%);
+ border-radius: 50%;
+}
+
+.myInfo p {
+ width: 4.5rem;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ color: #313131;
+ font-size: 0.42667rem;
+ font-weight: 500;
+ position: absolute;
+ top: 0.50667rem;
+ left: 2.18667rem;
+}
+
+.myInfo b {
+ color: #7B7B7D;
+ font-weight: 400;
+ position: absolute;
+ left: 2.18667rem;
+ top: 1.17333rem;
+ font-size: 0.34667rem;
+}
+
+.info {
+ width: 9.14667rem;
+ height: 11.6rem;
+ background: #F7F7F7;
+ border-radius: 0.26667rem;
+ margin: 0 auto 0.42667rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.info .agencyAvatar {
+ width: 3.01333rem;
+ height: 3.01333rem;
+ position: absolute;
+ top: 0.4rem;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.info .agencyAvatarInput {
+ width: 3.01333rem;
+ height: 3.01333rem;
+ position: absolute;
+ top: 0.4rem;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 2;
+}
+
+.info .p1 {
+ width: 100%;
+ top: 3.62667rem;
+ left: 50%;
+ transform: translateX(-50%);
+ color: #313131;
+ font-size: 0.32rem;
+ font-weight: 500;
+ position: absolute;
+ text-align: center;
+}
+
+.info .p1 b {
+ color: #FF2C2C;
+}
+
+.info .agencyName {
+ width: 100%;
+ height: 1.33333rem;
+ line-height: 1.33333rem;
+ border-bottom: 0.01333rem solid #D6D6D6;
+ margin-top: 4.34667rem;
+ box-sizing: border-box;
+ padding: 0 0.32rem;
+ display: flex;
+ justify-content: space-between;
+}
+
+.info .agencyName .left {
+ color: #313131;
+ font-size: 0.37333rem;
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+.info .agencyName .left b {
+ color: #FF2C2C;
+}
+
+.info .agencyName input {
+ background: none;
+ outline: none;
+ border: none;
+ text-align: right;
+ width: 5rem;
+}
+
+.info .agentContactInfo {
+ width: 100%;
+ height: 1.33333rem;
+ line-height: 1.33333rem;
+ border-bottom: 0.01333rem solid #D6D6D6;
+ margin-top: 0rem;
+ margin: 0 auto 0.4rem;
+ box-sizing: border-box;
+ padding: 0 0.32rem;
+ display: flex;
+ justify-content: space-between;
+}
+
+.info .agentContactInfo .left {
+ color: #313131;
+ font-size: 0.37333rem;
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+.info .agentContactInfo .left b {
+ color: #FF2C2C;
+}
+
+.info .agentContactInfo input {
+ background: none;
+ outline: none;
+ border: none;
+ text-align: right;
+ width: 5rem;
+}
+
+.info .agentIDCard {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 0.32rem;
+ color: #313131;
+ font-size: 0.37333rem;
+ font-weight: 500;
+ margin-bottom: 0.32rem;
+ white-space: nowrap;
+}
+
+.info .agentIDCard b {
+ color: #FF2C2C;
+}
+
+.info .agentIDCardImg {
+ width: 2.93333rem;
+ height: 2.93333rem;
+ display: inline-block;
+ margin: 0 0.32rem;
+}
+
+.info .agentIDCardImgInput {
+ width: 2.93333rem;
+ height: 2.93333rem;
+ display: inline-block;
+ left: 0.3rem;
+ z-index: 2;
+ position: absolute;
+}
+
+.inviterInfo {
+ width: 9.14667rem;
+ height: 5.92rem;
+ border-radius: 0.26667rem;
+ background: #F7F7F7;
+ margin: 0 auto 0.21333rem;
+}
+
+.inviterInfo .InviterId {
+ width: 100%;
+ height: 1.33333rem;
+ line-height: 1.33333rem;
+ border-bottom: 0.01333rem solid #D6D6D6;
+ margin-top: 0rem;
+ margin: 0 auto 0.4rem;
+ box-sizing: border-box;
+ padding: 0 0.32rem;
+ display: flex;
+ justify-content: space-between;
+}
+
+.inviterInfo .InviterId .left {
+ color: #313131;
+ font-size: 0.37333rem;
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+.inviterInfo .InviterId .left b {
+ color: #FF2C2C;
+}
+
+.inviterInfo .InviterId input {
+ background: none;
+ outline: none;
+ border: none;
+ text-align: right;
+ width: 5rem;
+}
+
+.inviterInfo .inviterPic {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 0.32rem;
+ color: #313131;
+ font-size: 0.37333rem;
+ font-weight: 500;
+ margin-bottom: 0.32rem;
+}
+
+.inviterInfo .inviterPicImg {
+ width: 2.93333rem;
+ height: 2.93333rem;
+ display: inline-block;
+ margin: 0 0.32rem;
+}
+
+.inviterInfo .inviterPicImgInput {
+ width: 2.93333rem;
+ height: 2.93333rem;
+ display: inline-block;
+ left: 0.8rem;
+ z-index: 2;
+ position: absolute;
+}
+
+.butBox {
+ width: 8.85333rem;
+ height: 1.22667rem;
+ line-height: 1.22667rem;
+ text-align: center;
+ color: #fff;
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+ margin: 0 auto 0;
+ border-radius: 1.22667rem;
+}
+
+.null {
+ height: 0.26667rem;
+}
+
+.submitSuccessfully {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ background: rgba(0, 0, 0, 0.5);
+ display: none;
+}
+
+.submitSuccessfully .submitSuccessfully_in {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 7.73333rem;
+ background: #fff;
+ border-radius: 0.42667rem;
+ padding: 0.37333rem 0.61333rem 0.48rem;
+}
+
+.submitSuccessfully .submitSuccessfully_in .title {
+ color: #313131;
+ font-size: 0.4rem;
+ font-weight: 500;
+ height: 0.56rem;
+ line-height: 0.56rem;
+ margin: 0rem auto 0.32rem;
+ text-align: center;
+}
+
+.submitSuccessfully .submitSuccessfully_in p {
+ width: 100%;
+ color: #313131;
+ font-size: 0.34667rem;
+ font-weight: 400;
+ line-height: 0.48rem;
+}
+
+.submitSuccessfully .submitSuccessfully_in .but {
+ width: 6.50667rem;
+ height: 0.96rem;
+ line-height: 0.96rem;
+ text-align: center;
+ border-radius: 0.96rem;
+ margin: 0.32rem auto 0;
+ color: #fff;
+ font-size: 0.37333rem;
+ font-weight: 500;
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+}
+
+.arabic .info .agentIDCardImgInput {
+ left: auto;
+ right: 0.3rem;
+}
+
+.arabic .inviterInfo .inviterPicImgInput {
+ left: auto;
+ right: 0.8rem;
+}
+
+.arabic .myInfo .tx {
+ left: auto;
+ right: 0.32rem;
+}
+
+.arabic .myInfo b {
+ left: auto;
+ right: 2.18667rem;
+}
+
+.arabic .info .agencyName input,
+.arabic .info .agentContactInfo input,
+.arabic .inviterInfo .InviterId input {
+ text-align: left;
+}
diff --git a/view/molistar/modules/guildAr/css/createGuild.scss b/view/molistar/modules/guildAr/css/createGuild.scss
new file mode 100644
index 0000000..867d519
--- /dev/null
+++ b/view/molistar/modules/guildAr/css/createGuild.scss
@@ -0,0 +1,375 @@
+@function px2rem($px) {
+ @return $px / 75+rem;
+}
+
+html,
+body {
+ width: 100%;
+ height: px2rem(1334);
+ background: #FFFFFF;
+
+}
+
+.back {
+ width: 100%;
+ height: px2rem(179);
+ line-height: px2rem(240);
+ position: fixed;
+ left: 0;
+ top: px2rem(0);
+ text-align: center;
+ color: #333333;
+ font-size: px2rem(34);
+ font-weight: bold;
+ z-index: 10;
+ background: #fff;
+ // background: url(../images/topBg.png) no-repeat top;
+ // background-size: 100% 7rem;
+
+ img {
+ width: px2rem(44);
+ height: px2rem(44);
+ position: absolute;
+ left: px2rem(18);
+ top: 58%;
+ }
+}
+
+.myInfo {
+ width: px2rem(686);
+ height: px2rem(160);
+ background: #F7F7F7;
+ border-radius: px2rem(20);
+ margin: 2.6rem auto px2rem(32);
+ position: relative;
+
+ .tx {
+ width: px2rem(120);
+ height: px2rem(120);
+ position: absolute;
+ left: px2rem(24);
+ top: 50%;
+ transform: translateY(-50%);
+ border-radius: 50%;
+ }
+
+ p {
+ width: 4.5rem;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ color: #313131;
+ font-size: px2rem(32);
+ font-weight: 500;
+ position: absolute;
+ top: px2rem(38);
+ left: px2rem(164);
+ }
+
+ b {
+ color: #7B7B7D;
+ font-weight: 400;
+ position: absolute;
+ left: px2rem(164);
+ top: px2rem(88);
+ font-size: px2rem(26);
+ }
+}
+
+.info {
+ width: px2rem(686);
+ height: px2rem(870);
+ background: #F7F7F7;
+ border-radius: px2rem(20);
+ margin: 0 auto px2rem(32);
+ position: relative;
+ overflow: hidden;
+
+ .agencyAvatar {
+ width: px2rem(226);
+ height: px2rem(226);
+ position: absolute;
+ top: px2rem(30);
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .agencyAvatarInput {
+ width: px2rem(226);
+ height: px2rem(226);
+ position: absolute;
+ top: px2rem(30);
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 2;
+ }
+
+ .p1 {
+ width: 100%;
+ top: px2rem(272);
+ left: 50%;
+ transform: translateX(-50%);
+ color: #313131;
+ font-size: px2rem(24);
+ font-weight: 500;
+ position: absolute;
+ text-align: center;
+
+ b {
+ color: #FF2C2C;
+ }
+ }
+
+ .agencyName {
+ width: 100%;
+ height: px2rem(100);
+ line-height: px2rem(100);
+ border-bottom: px2rem(1) solid #D6D6D6;
+ margin-top: px2rem(326);
+ box-sizing: border-box;
+ padding: 0 px2rem(24);
+ display: flex;
+ justify-content: space-between;
+
+ .left {
+ color: #313131;
+ font-size: px2rem(28);
+ font-weight: 500;
+ white-space: nowrap;
+ b {
+ color: #FF2C2C;
+ }
+ }
+
+ input {
+ background: none;
+ outline: none;
+ border: none;
+ text-align: right;
+ width: 5rem;
+ }
+ }
+
+ .agentContactInfo {
+ width: 100%;
+ height: px2rem(100);
+ line-height: px2rem(100);
+ border-bottom: px2rem(1) solid #D6D6D6;
+ margin-top: px2rem(0);
+ margin: 0 auto px2rem(30);
+ box-sizing: border-box;
+ padding: 0 px2rem(24);
+ display: flex;
+ justify-content: space-between;
+
+ .left {
+ color: #313131;
+ font-size: px2rem(28);
+ font-weight: 500;
+ white-space: nowrap;
+ b {
+ color: #FF2C2C;
+ }
+ }
+
+ input {
+ background: none;
+ outline: none;
+ border: none;
+ text-align: right;
+ width: 5rem;
+ }
+ }
+
+ .agentIDCard {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 px2rem(24);
+ color: #313131;
+ font-size: px2rem(28);
+ font-weight: 500;
+ margin-bottom: px2rem(24);
+ white-space: nowrap;
+ b {
+ color: #FF2C2C;
+ }
+ }
+
+ .agentIDCardImg {
+ width: px2rem(220);
+ height: px2rem(220);
+ display: inline-block;
+ margin: 0 px2rem(24);
+ }
+
+ .agentIDCardImgInput {
+ width: px2rem(220);
+ height: px2rem(220);
+ display: inline-block;
+ left: 0.3rem;
+ z-index: 2;
+ position: absolute;
+ }
+}
+
+.inviterInfo {
+ width: px2rem(686);
+ height: px2rem(444);
+ border-radius: px2rem(20);
+ background: #F7F7F7;
+ margin: 0 auto px2rem(16);
+
+ .InviterId {
+ width: 100%;
+ height: px2rem(100);
+ line-height: px2rem(100);
+ border-bottom: px2rem(1) solid #D6D6D6;
+ margin-top: px2rem(0);
+ margin: 0 auto px2rem(30);
+ box-sizing: border-box;
+ padding: 0 px2rem(24);
+ display: flex;
+ justify-content: space-between;
+
+ .left {
+ color: #313131;
+ font-size: px2rem(28);
+ font-weight: 500;
+ white-space: nowrap;
+ b {
+ color: #FF2C2C;
+ }
+ }
+
+ input {
+ background: none;
+ outline: none;
+ border: none;
+ text-align: right;
+ width: 5rem;
+ }
+ }
+
+ .inviterPic {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 px2rem(24);
+ color: #313131;
+ font-size: px2rem(28);
+ font-weight: 500;
+ margin-bottom: px2rem(24);
+ }
+
+ .inviterPicImg {
+ width: px2rem(220);
+ height: px2rem(220);
+ display: inline-block;
+ margin: 0 px2rem(24);
+ }
+
+ .inviterPicImgInput {
+ width: px2rem(220);
+ height: px2rem(220);
+ display: inline-block;
+ left: 0.8rem;
+ z-index: 2;
+ position: absolute;
+ }
+}
+
+.butBox {
+ width: px2rem(664);
+ height: px2rem(92);
+ line-height: px2rem(92);
+ text-align: center;
+ color: #fff;
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+ margin: 0 auto 0;
+ border-radius: px2rem(92);
+}
+
+.null {
+ height: px2rem(20);
+}
+
+.submitSuccessfully {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ background: rgba(0, 0, 0, .5);
+ display: none;
+
+ .submitSuccessfully_in {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: px2rem(580);
+ // height: px2rem(406);
+ background: #fff;
+ border-radius: px2rem(32);
+ padding: px2rem(28) px2rem(46) px2rem(36);
+
+ .title {
+ color: #313131;
+ font-size: px2rem(30);
+ font-weight: 500;
+ height: px2rem(42);
+ line-height: px2rem(42);
+ margin: px2rem(0) auto px2rem(24);
+ text-align: center;
+ }
+
+ p {
+ width: 100%;
+ color: #313131;
+ font-size: px2rem(26);
+ font-weight: 400;
+ line-height: px2rem(36);
+ }
+
+ .but {
+ width: px2rem(488);
+ height: px2rem(72);
+ line-height: px2rem(72);
+ text-align: center;
+ border-radius: px2rem(72);
+ margin: px2rem(24) auto 0;
+ color: #fff;
+ font-size: px2rem(28);
+ font-weight: 500;
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+ }
+ }
+}
+
+.arabic {
+ .info .agentIDCardImgInput {
+ left: auto;
+ right: 0.3rem;
+ }
+
+ .inviterInfo .inviterPicImgInput {
+ left: auto;
+ right: 0.8rem;
+ }
+
+ .myInfo .tx {
+ left: auto;
+ right: 0.32rem;
+ }
+
+ .myInfo b {
+ left: auto;
+ right: 2.18667rem;
+ }
+
+ .info .agencyName input,
+ .info .agentContactInfo input,
+ .inviterInfo .InviterId input {
+ text-align: left;
+ }
+}
diff --git a/view/molistar/modules/guildAr/css/guild.css b/view/molistar/modules/guildAr/css/guild.css
index 99e96b8..3fad843 100644
--- a/view/molistar/modules/guildAr/css/guild.css
+++ b/view/molistar/modules/guildAr/css/guild.css
@@ -2,7 +2,7 @@ html,
body {
width: 100%;
height: 17.78667rem;
- background: #F5F7F9;
+ background: #FFFFFF;
}
.back {
@@ -17,8 +17,7 @@ body {
font-size: 0.45333rem;
font-weight: bold;
z-index: 10;
- background: url(../images/topBg.png) no-repeat top;
- background-size: 100% 7rem;
+ background: #fff;
}
.back img {
@@ -30,16 +29,17 @@ body {
}
.top {
- width: 9.25333rem;
- height: 1.18667rem;
- line-height: 0.78667rem;
- background: #fff;
- border-radius: 0.26667rem 0.26667rem 0 0;
+ width: 9.2rem;
+ height: 0.90667rem;
+ line-height: 0.90667rem;
+ background: #F7F7F7;
+ border-radius: 0.90667rem;
margin: 2.5rem auto 0;
color: #333;
font-size: 0.42667rem;
box-sizing: border-box;
padding: 0 0.4rem;
+ position: relative;
}
.top .left {
@@ -48,21 +48,41 @@ body {
float: left;
}
+.top input {
+ width: 8.13333rem;
+ height: 0.90667rem;
+ background: none;
+ position: absolute;
+ left: 0.98667rem;
+ top: 0;
+ font-size: 0.37333rem;
+ border: none;
+ outline: none;
+ color: #313131;
+}
+
+.top input::placeholder {
+ color: #AFB1B3;
+}
+
.top img {
- float: right;
- display: block;
- width: 0.58667rem;
- height: 0.58667rem;
- margin-top: 0.33333rem;
+ position: absolute;
+ left: 0.32rem;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 0.53333rem;
+ height: 0.53333rem;
}
ul {
width: 9.25333rem;
height: 16.81333rem;
overflow-y: scroll;
- margin: 0 auto;
+ margin: 0.53333rem auto 0;
border-radius: 0 0 0.26667rem 0.26667rem;
background: #fff;
+ padding-top: 0.26667rem;
+ box-sizing: border-box;
}
ul::-webkit-scrollbar {
@@ -70,119 +90,122 @@ ul::-webkit-scrollbar {
}
ul li {
- width: 100%;
- height: 2.13333rem;
- overflow: hidden;
- box-sizing: border-box;
- padding: 0 0.26667rem 0 0.2rem;
+ width: 9.14667rem;
+ height: 2.24rem;
+ background: url(../images/guildLiBg.png) no-repeat;
+ background-size: 100% 100%;
+ margin-bottom: 0.66667rem;
position: relative;
-}
-
-ul li .num {
- color: #000000;
- font-size: 0.4rem;
- font-weight: bold;
- width: 1.01333rem;
- height: 1.01333rem;
- line-height: 1.01333rem;
- text-align: center;
- float: left;
- margin-top: 0.66667rem;
-}
-
-ul li .ts {
- width: 1.54667rem;
- height: 1.54667rem;
- position: absolute;
- z-index: 2;
- left: 1.09333rem;
- top: 0.49333rem;
+ overflow: visible;
}
ul li .tx {
- width: 1.4rem;
- height: 1.45rem;
+ width: 2.21333rem;
+ height: 2.21333rem;
+ border-radius: 0.21333rem;
+ border: 0.04rem solid #FFD65E;
position: absolute;
- left: 1.2rem;
- top: 0.46rem;
- border-radius: 0.1rem;
+ left: 0.26667rem;
+ top: -0.24rem;
}
-ul li .user {
- float: left;
- margin-left: 1.66667rem;
-}
-
-ul li .user p {
- width: 2.5rem;
+ul li p {
+ width: 4rem;
+ position: absolute;
+ top: 0.26667rem;
+ left: 2.8rem;
+ color: #FFDD7A;
+ font-size: 0.42667rem;
+ font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
- color: #515665;
- font-size: 0.32rem;
- margin-bottom: 0.38667rem;
- font-weight: bold;
- box-sizing: border-box;
- padding-top: 0.70667rem;
}
-ul li .user b {
- color: #A4ABB2;
+ul li span {
+ width: 4rem;
+ height: 0.42667rem;
+ line-height: 0.42667rem;
+ position: absolute;
+ top: 1.33333rem;
+ left: 2.8rem;
+}
+
+ul li span img {
+ display: inline-block;
+ width: 0.42667rem;
+ height: 0.42667rem;
+}
+
+ul li span b {
+ display: inline-block;
+ color: #FFDD7A;
font-size: 0.32rem;
- font-weight: 500;
+ font-weight: 400;
+}
+
+ul li strong {
+ position: absolute;
+ color: #FFDD7A;
+ font-weight: 400;
+ position: absolute;
+ left: 2.8rem;
+ top: 0.86667rem;
+}
+
+ul li .level {
+ width: 0.8rem;
+ height: 0.8rem;
+ position: absolute;
+ right: 0.69333rem;
+ top: 0.26667rem;
}
ul li .but {
- width: 1.54667rem;
- height: 0.56rem;
- line-height: 0.56rem;
- background: #7F95FF;
- border-radius: 0.56rem;
- float: right;
- margin-top: 0.76rem;
+ width: 1.6rem;
+ height: 0.69333rem;
+ line-height: 0.64rem;
text-align: center;
color: #fff;
- font-size: 0.26667rem;
+ font-size: 0.37333rem;
+ position: absolute;
+ right: 0.29333rem;
+ top: 1.22667rem;
+ border-radius: 0.69333rem;
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
}
-ul li:nth-child(odd) {
- background: rgba(50, 39, 79, 0.06);
+ul li .act {
+ top: 50%;
+ transform: translateY(-50%);
}
-ul li:nth-child(1) .num {
- background: url(../images/no1.png) no-repeat;
- background-size: 100% 100%;
+ul .null {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ background: none;
}
-ul li:nth-child(1) .ts {
- width: 1.78667rem;
- height: 1.78667rem;
- left: 1.05333rem;
- top: 0.18667rem;
+ul .null img {
+ width: 1.96rem;
+ height: 2.01333rem;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
}
-ul li:nth-child(2) .num {
- background: url(../images/no2.png) no-repeat;
- background-size: 100% 100%;
-}
-
-ul li:nth-child(2) .ts {
- width: 1.78667rem;
- height: 1.78667rem;
- left: 1.05333rem;
- top: 0.18667rem;
-}
-
-ul li:nth-child(3) .num {
- background: url(../images/no3.png) no-repeat;
- background-size: 100% 100%;
-}
-
-ul li:nth-child(3) .ts {
- width: 1.78667rem;
- height: 1.78667rem;
- left: 1.05333rem;
- top: 0.18667rem;
+ul .null span {
+ width: 100%;
+ left: 0;
+ top: 55%;
+ transform: translateY(-50%);
+ color: #A9A9A9;
+ font-size: 0.4rem;
+ font-weight: 400;
+ position: absolute;
+ text-align: center;
}
.pub {
@@ -241,28 +264,29 @@ ul li:nth-child(3) .ts {
color: #fff;
}
-.arabic ul li .num,
-.arabic ul li .user {
- float: right;
-}
-
-.arabic ul li .user {
- margin-left: 0;
- margin-right: 1.8rem;
-}
-
.arabic ul li .but {
- float: left;
+ right: auto;
+ left: 0.29333rem;
}
-.arabic ul li .ts {
- left: 0;
- right: 1.05333rem;
+.arabic ul li .level {
+ right: auto;
+ left: 0.69333rem;
}
.arabic ul li .tx {
- left: 0;
- right: 1.28rem;
+ right: 0.26667rem;
+ left: auto;
+}
+
+.arabic ul li p {
+ right: 2.8rem;
+ left: auto;
+}
+
+.arabic ul li span {
+ right: 2.8rem;
+ left: auto;
}
.arabic .top .left {
@@ -272,3 +296,73 @@ ul li:nth-child(3) .ts {
.arabic .top img {
float: left;
}
+
+.create {
+ position: fixed;
+ z-index: 2;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 0.88rem;
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+ width: 6.24rem;
+ height: 1.17333rem;
+ line-height: 1.17333rem;
+ text-align: center;
+ color: #fff;
+ font-size: 0.42667rem;
+ border-radius: 1.17333rem;
+}
+
+.submitSuccessfully {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ background: rgba(0, 0, 0, 0.5);
+ display: none;
+}
+
+.submitSuccessfully .submitSuccessfully_in {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 7.73333rem;
+ background: #fff;
+ border-radius: 0.42667rem;
+ padding: 0.37333rem 0.61333rem 0.48rem;
+}
+
+.submitSuccessfully .submitSuccessfully_in .title {
+ color: #313131;
+ font-size: 0.4rem;
+ font-weight: 500;
+ height: 0.56rem;
+ line-height: 0.56rem;
+ margin: 0rem auto 0.32rem;
+ text-align: center;
+}
+
+.submitSuccessfully .submitSuccessfully_in p {
+ width: 100%;
+ color: #313131;
+ font-size: 0.34667rem;
+ font-weight: 400;
+ line-height: 0.48rem;
+ text-align: center;
+}
+
+.submitSuccessfully .submitSuccessfully_in .but {
+ width: 6.50667rem;
+ height: 0.96rem;
+ line-height: 0.96rem;
+ text-align: center;
+ border-radius: 0.96rem;
+ margin: 0.32rem auto 0;
+ color: #fff;
+ font-size: 0.37333rem;
+ font-weight: 500;
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+}
diff --git a/view/molistar/modules/guildAr/css/guild.scss b/view/molistar/modules/guildAr/css/guild.scss
index 8ceed93..9ecd4e3 100644
--- a/view/molistar/modules/guildAr/css/guild.scss
+++ b/view/molistar/modules/guildAr/css/guild.scss
@@ -6,7 +6,7 @@ html,
body {
width: 100%;
height: px2rem(1334);
- background: #F5F7F9;
+ background: #FFFFFF;
}
@@ -22,8 +22,9 @@ body {
font-size: px2rem(34);
font-weight: bold;
z-index: 10;
- background: url(../images/topBg.png) no-repeat top;
- background-size: 100% 7rem;
+ background: #fff;
+ // background: url(../images/topBg.png) no-repeat top;
+ // background-size: 100% 7rem;
img {
width: px2rem(44);
@@ -35,16 +36,17 @@ body {
}
.top {
- width: px2rem(694);
- height: px2rem(89);
- line-height: px2rem(59);
- background: #fff;
- border-radius: px2rem(20) px2rem(20) 0 0;
+ width: px2rem(690);
+ height: px2rem(68);
+ line-height: px2rem(68);
+ background: #F7F7F7;
+ border-radius: px2rem(68);
margin: 2.5rem auto 0;
color: #333;
font-size: px2rem(32);
box-sizing: border-box;
padding: 0 px2rem(30);
+ position: relative;
.left {
height: px2rem(89);
@@ -52,12 +54,30 @@ body {
float: left;
}
+ input {
+ width: px2rem(610);
+ height: px2rem(68);
+ background: none;
+ position: absolute;
+ left: px2rem(74);
+ top: 0;
+ font-size: px2rem(28);
+ border: none;
+ outline: none;
+ color: #313131;
+
+ &::placeholder {
+ color: #AFB1B3;
+ }
+ }
+
img {
- float: right;
- display: block;
- width: px2rem(44);
- height: px2rem(44);
- margin-top: px2rem(25);
+ position: absolute;
+ left: px2rem(24);
+ top: 50%;
+ transform: translateY(-50%);
+ width: px2rem(40);
+ height: px2rem(40);
}
}
@@ -65,135 +85,131 @@ ul {
width: px2rem(694);
height: px2rem(1261);
overflow-y: scroll;
- margin: 0 auto;
+ margin: px2rem(40) auto 0;
border-radius: 0 0 px2rem(20) px2rem(20);
background: #fff;
+ padding-top: px2rem(20);
+ box-sizing: border-box;
&::-webkit-scrollbar {
display: none;
}
li {
- width: 100%;
- height: px2rem(160);
- overflow: hidden;
- box-sizing: border-box;
- padding: 0 px2rem(20) 0 px2rem(15);
+ width: px2rem(686);
+ height: px2rem(168);
+ background: url(../images/guildLiBg.png) no-repeat;
+ background-size: 100% 100%;
+ margin-bottom: px2rem(50);
position: relative;
-
- .num {
- color: #000000;
- font-size: px2rem(30);
- font-weight: bold;
- width: px2rem(76);
- height: px2rem(76);
- line-height: px2rem(76);
- text-align: center;
- float: left;
- margin-top: px2rem(50);
- }
-
- .ts {
- width: px2rem(116);
- height: px2rem(116);
- position: absolute;
- z-index: 2;
- left: px2rem(82);
- top: px2rem(37);
- }
+ overflow: visible;
.tx {
- width: 1.4rem;
- height: 1.45rem;
+ width: px2rem(166);
+ height: px2rem(166);
+ border-radius: px2rem(16);
+ border: px2rem(3) solid #FFD65E;
position: absolute;
- left: 1.2rem;
- top: 0.46rem;
- border-radius: 0.1rem;
+ left: px2rem(20);
+ top: px2rem(-18);
}
- .user {
- float: left;
- margin-left: px2rem(125);
+ p {
+ width: 4rem;
+ position: absolute;
+ top: px2rem(20);
+ left: px2rem(210);
+ color: #FFDD7A;
+ font-size: px2rem(32);
+ font-weight: 500;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
- p {
- width: 2.5rem;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- color: #515665;
- font-size: px2rem(24);
- margin-bottom: px2rem(29);
- font-weight: bold;
- box-sizing: border-box;
- padding-top: px2rem(53);
+ span {
+ width: 4rem;
+ height: px2rem(32);
+ line-height: px2rem(32);
+ position: absolute;
+ top: px2rem(100);
+ left: px2rem(210);
+
+ img {
+ display: inline-block;
+ width: px2rem(32);
+ height: px2rem(32);
}
b {
- color: #A4ABB2;
+ display: inline-block;
+ color: #FFDD7A;
font-size: px2rem(24);
- font-weight: 500;
+ font-weight: 400;
}
}
+ strong{
+ position: absolute;
+ color: #FFDD7A;
+ font-weight: 400;
+ position: absolute;
+ left: 2.8rem;
+ top: px2rem(65);
+ }
+ .level {
+ width: px2rem(60);
+ height: px2rem(60);
+ position: absolute;
+ right: px2rem(52);
+ top: px2rem(20);
+ }
.but {
- width: px2rem(116);
- height: px2rem(42);
- line-height: px2rem(42);
- background: #7F95FF;
- border-radius: px2rem(42);
- float: right;
- margin-top: px2rem(57);
+ width: px2rem(120);
+ height: px2rem(52);
+ line-height: px2rem(48);
text-align: center;
color: #fff;
- font-size: px2rem(20);
+ font-size: px2rem(28);
+ position: absolute;
+ right: px2rem(22);
+ top: px2rem(92);
+ border-radius: px2rem(52);
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
}
- &:nth-child(odd) {
- background: rgba(50, 39, 79, .06);
+ .act {
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+
+ .null {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ background: none;
+
+ img {
+ width: px2rem(147);
+ height: px2rem(151);
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
}
- &:nth-child(1) {
- .num {
- background: url(../images/no1.png) no-repeat;
- background-size: 100% 100%;
- }
-
- .ts {
- width: px2rem(134);
- height: px2rem(134);
- left: px2rem(79);
- top: px2rem(14);
- }
+ span {
+ width: 100%;
+ left: 0;
+ top: 55%;
+ transform: translateY(-50%);
+ color: #A9A9A9;
+ font-size: px2rem(30);
+ font-weight: 400;
+ position: absolute;
+ text-align: center;
}
-
- &:nth-child(2) {
- .num {
- background: url(../images/no2.png) no-repeat;
- background-size: 100% 100%;
- }
-
- .ts {
- width: px2rem(134);
- height: px2rem(134);
- left: px2rem(79);
- top: px2rem(14);
- }
- }
-
- &:nth-child(3) {
- .num {
- background: url(../images/no3.png) no-repeat;
- background-size: 100% 100%;
- }
-
- .ts {
- width: px2rem(134);
- height: px2rem(134);
- left: px2rem(79);
- top: px2rem(14);
- }
- }
-
}
}
@@ -254,29 +270,27 @@ ul {
}
.arabic {
-
- ul li .num,
- ul li .user {
- float: right;
- }
-
- ul li .user {
- margin-left: 0;
- margin-right: 1.8rem;
- }
-
ul li .but {
- float: left;
+ right: auto;
+ left: 0.29333rem;
}
- ul li .ts {
- left: 0;
- right: 1.05333rem;
+ ul li .level {
+ right: auto;
+ left: 0.69333rem;
}
ul li .tx {
- left: 0;
- right: 1.28rem;
+ right: 0.26667rem;
+ left: auto;
+ }
+ ul li p{
+ right: 2.8rem;
+ left: auto;
+ }
+ ul li span{
+ right: 2.8rem;
+ left: auto;
}
.top .left {
@@ -286,4 +300,75 @@ ul {
.top img {
float: left;
}
+}
+
+.create {
+ position: fixed;
+ z-index: 2;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: px2rem(66);
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+ width: px2rem(468);
+ height: px2rem(88);
+ line-height: px2rem(88);
+ text-align: center;
+ color: #fff;
+ font-size: px2rem(32);
+ border-radius: px2rem(88);
+}
+
+.submitSuccessfully {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 99;
+ background: rgba(0, 0, 0, .5);
+ display: none;
+
+ .submitSuccessfully_in {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: px2rem(580);
+ // height: px2rem(406);
+ background: #fff;
+ border-radius: px2rem(32);
+ padding: px2rem(28) px2rem(46) px2rem(36);
+
+ .title {
+ color: #313131;
+ font-size: px2rem(30);
+ font-weight: 500;
+ height: px2rem(42);
+ line-height: px2rem(42);
+ margin: px2rem(0) auto px2rem(24);
+ text-align: center;
+ }
+
+ p {
+ width: 100%;
+ color: #313131;
+ font-size: px2rem(26);
+ font-weight: 400;
+ line-height: px2rem(36);
+ text-align: center;
+ }
+
+ .but {
+ width: px2rem(488);
+ height: px2rem(72);
+ line-height: px2rem(72);
+ text-align: center;
+ border-radius: px2rem(72);
+ margin: px2rem(24) auto 0;
+ color: #fff;
+ font-size: px2rem(28);
+ font-weight: 500;
+ background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
+ }
+ }
}
\ No newline at end of file
diff --git a/view/molistar/modules/guildAr/guild.html b/view/molistar/modules/guildAr/guild.html
index 3472c4c..501124f 100644
--- a/view/molistar/modules/guildAr/guild.html
+++ b/view/molistar/modules/guildAr/guild.html
@@ -18,52 +18,21 @@
-
+
+
+
+
+