|
|
@@ -17,7 +17,11 @@
|
|
|
<input class="editRight newInput" type="text" placeholder="请输入密码" />
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
+ <div class="btnSubmit" >
|
|
|
+ <img class="btnImg" src="../assets/exeLogin/btn.webp" />
|
|
|
+ <div class="btnTxt" >登陆</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
@@ -141,7 +145,7 @@ onMounted(() => {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
-$proportion : 0.8;
|
|
|
+$proportion : 0.7;
|
|
|
|
|
|
.newInput {
|
|
|
/* 移除默认外观 */
|
|
|
@@ -194,11 +198,11 @@ $proportion : 0.8;
|
|
|
|
|
|
.main {
|
|
|
position: fixed;
|
|
|
- width: 137.14rem;
|
|
|
- height: 81.14rem;
|
|
|
+ width: 137.14rem * $proportion;
|
|
|
+ height: 81.14rem * $proportion;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- margin: -40.57rem 0px 0px -68.57rem;
|
|
|
+ margin: -40.57rem * $proportion 0px 0px -68.57rem * $proportion;
|
|
|
|
|
|
background-image: url("../assets/exeLogin/bg.webp");
|
|
|
-webkit-background-size: 100% 100%;
|
|
|
@@ -209,11 +213,11 @@ $proportion : 0.8;
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
- top: 2.25rem;
|
|
|
+ top: 2.25rem * $proportion;
|
|
|
left: 0px;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
- font-size: 4rem;
|
|
|
+ font-size: 4rem * $proportion;
|
|
|
font-weight: 700;
|
|
|
color: #f0fffe;
|
|
|
}
|
|
|
@@ -221,14 +225,14 @@ $proportion : 0.8;
|
|
|
.left {
|
|
|
position: absolute;
|
|
|
width: 46;
|
|
|
- top: 15.85rem;
|
|
|
- left: 19.85rem;
|
|
|
+ top: 15.85rem * $proportion;
|
|
|
+ left: 19.85rem * $proportion;
|
|
|
|
|
|
.title2 {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
font-weight: 500;
|
|
|
- font-size: 5.35rem;
|
|
|
+ font-size: 5.35rem * $proportion;
|
|
|
color: #F0F5FD;
|
|
|
}
|
|
|
|
|
|
@@ -236,9 +240,9 @@ $proportion : 0.8;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
font-weight: 400;
|
|
|
- font-size: 3.57rem;
|
|
|
+ font-size: 3.57rem * $proportion;
|
|
|
color: #F0F5FD;
|
|
|
- margin: 2.64rem 0px 2.64rem 0px;
|
|
|
+ margin: 2.64rem * $proportion 0px 2.64rem * $proportion 0px;
|
|
|
|
|
|
/* 设置渐变背景，从左到右 */
|
|
|
background: linear-gradient(to right, #6A9EFF, #4ecdc4, #7DDBFA);
|
|
|
@@ -256,9 +260,9 @@ $proportion : 0.8;
|
|
|
.edit {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
- height: 5.71rem;
|
|
|
+ height: 5.71rem * $proportion;
|
|
|
border: 1px solid #71CBF2;
|
|
|
- margin: 3.92rem 0px 3.92rem 0px;
|
|
|
+ margin: 3.92rem * $proportion 0px 3.92rem * $proportion 0px;
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
.editLeft, .editRight {
|
|
|
@@ -266,21 +270,57 @@ $proportion : 0.8;
|
|
|
}
|
|
|
|
|
|
.editLeft {
|
|
|
- width: 2.78rem;
|
|
|
- left: 2.14rem;
|
|
|
- top: 1.57rem;
|
|
|
+ width: 2.78rem * $proportion;
|
|
|
+ left: 2.14rem * $proportion;
|
|
|
+ top: 1.57rem * $proportion;
|
|
|
}
|
|
|
|
|
|
.editRight {
|
|
|
- left: 6.71rem;
|
|
|
+ left: 6.71rem * $proportion;
|
|
|
top: 0px;
|
|
|
bottom: 0px;
|
|
|
right: 0px;
|
|
|
font-weight: 400;
|
|
|
- font-size: 2.5rem;
|
|
|
+ font-size: 2.5rem * $proportion;
|
|
|
color: #49608C;
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnSubmit {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 6.21rem * $proportion;
|
|
|
+ cursor:pointer;
|
|
|
+
|
|
|
+ .btnImg {
|
|
|
+ position: absolute;
|
|
|
+ top: -166%;
|
|
|
+ left: -40%;
|
|
|
+ width: 180%;
|
|
|
+ // 穿透点击
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnTxt {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 3.14rem * $proportion;
|
|
|
+ color: #FFFFFF;
|
|
|
+ letter-spacing: 7px;
|
|
|
+ text-shadow: 0px 3px 7px rgba(39,63,121,0.25);
|
|
|
+
|
|
|
+ line-height: 6.21rem * $proportion;
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
