|
|
|
@ -0,0 +1,210 @@ |
|
|
|
<!DOCTYPE html> |
|
|
|
<html> |
|
|
|
<head> |
|
|
|
<script src="//unpkg.com/vue@2/dist/vue.js"></script> |
|
|
|
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script> |
|
|
|
<link rel="stylesheet" href="//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css"> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<title>sk</title> |
|
|
|
<style> |
|
|
|
body { |
|
|
|
/* 背景 */ |
|
|
|
/* 背景（深蓝色） */ |
|
|
|
background-color: #142053; |
|
|
|
|
|
|
|
/* 图1（白色纹路）叠加在中央 */ |
|
|
|
background-image: url('../skimage/sk2.png'); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
background-size: 100%; /* 控制纹路大小 */ |
|
|
|
|
|
|
|
/* 确保背景占满屏幕 */ |
|
|
|
height: 100vh; |
|
|
|
margin: 0; |
|
|
|
h1{color:aliceblue;} |
|
|
|
pre{color:aliceblue;} |
|
|
|
} |
|
|
|
/* 基础样式 */ |
|
|
|
form { |
|
|
|
display: block; |
|
|
|
box-sizing: border-box; |
|
|
|
width: 200px; |
|
|
|
height: 157.71px; |
|
|
|
padding: 0px; |
|
|
|
margin: 0 ; |
|
|
|
background: #1b2a6b; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* 外层边框容器 */ |
|
|
|
.outer-container{ |
|
|
|
|
|
|
|
width:600px; |
|
|
|
height:250px; |
|
|
|
background-color:#1b2a6b; |
|
|
|
position: absolute; |
|
|
|
top: 50%; /* 顶部定位到50% */ |
|
|
|
left: 50%; /* 左侧定位到50% */ |
|
|
|
transform: translate(-50%, -50%); /* 自身宽高的一半偏移 */ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; /* 内容靠右对齐 */ |
|
|
|
} |
|
|
|
/* 边框容器叠加图片 */ |
|
|
|
.overlay-image{ |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: -50px; |
|
|
|
left: -70px; |
|
|
|
width: 400px; |
|
|
|
height: 299px; |
|
|
|
background-image: url('../skimage/sk3.png'); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
z-index: 1; |
|
|
|
|
|
|
|
} |
|
|
|
/* 内层边框容器 */ |
|
|
|
.inner-container { |
|
|
|
display: flex; |
|
|
|
width: 250px; |
|
|
|
height: 250px; |
|
|
|
border: 2px solid #1b2a6b; /* 浅蓝色边框 */ |
|
|
|
background-color: #1b2a6b; /* 半透明白色 */ |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
z-index: 2; |
|
|
|
padding: 25px; |
|
|
|
} |
|
|
|
/* 登录选项 */ |
|
|
|
.from-item{ |
|
|
|
position: relative; |
|
|
|
width: 200px; |
|
|
|
height: 30px; |
|
|
|
margin: 0 auto; |
|
|
|
margin-top: 18px; |
|
|
|
-webkit-box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
/* 用户名 */ |
|
|
|
.lg-username{ |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
width: 100%; |
|
|
|
border-radius: 2px; |
|
|
|
border: solid 2px rgba(244, 239, 239, 0.911); |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
/* 图标字体基础样式 */ |
|
|
|
.iconfont { |
|
|
|
display: inline-block; |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.input{ |
|
|
|
width: 330px; |
|
|
|
height: 56px; |
|
|
|
font-size: 16px; |
|
|
|
background: none; |
|
|
|
border: none; |
|
|
|
color: #fff; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* 基础样式 */ |
|
|
|
.input-with-icon { |
|
|
|
position: relative; |
|
|
|
width: 200px; |
|
|
|
height: 30px; |
|
|
|
border: 2px solid #1b2a6b; |
|
|
|
border-radius: 4px; |
|
|
|
background: rgba(255,255,255,0.1); |
|
|
|
} |
|
|
|
|
|
|
|
/* 图标样式 */ |
|
|
|
.input-with-icon .icon { |
|
|
|
position: absolute; |
|
|
|
left: 8px; |
|
|
|
top: 50%; |
|
|
|
transform: translateY(-50%); |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
color: #1b2a6b; |
|
|
|
font-size: 16px; |
|
|
|
text-align: center; |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 输入框样式 */ |
|
|
|
.input-with-icon input { |
|
|
|
width: calc(100% - 40px); |
|
|
|
height: 100%; |
|
|
|
padding-left: 35px; |
|
|
|
background: transparent; |
|
|
|
border: none; |
|
|
|
color: #1b2a6b; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* 聚焦效果 */ |
|
|
|
.input-with-icon input:focus { |
|
|
|
border-color: #00a8ff; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
</head> |
|
|
|
<body> |
|
|
|
|
|
|
|
<div class="outer-container"> |
|
|
|
<div class="overlay-image"></div> |
|
|
|
<div class="inner-container"> |
|
|
|
<form action=""> |
|
|
|
<div class="from-item"> |
|
|
|
<div class="lg-username"> |
|
|
|
<div class="input-with-icon"> |
|
|
|
<i class="el-icon-user icon"></i> |
|
|
|
<input type="text" placeholder="请输入用户名"> |
|
|
|
</div> |
|
|
|
<!-- 自定义带图标输入框 --> |
|
|
|
<!-- <div class="custom-input-wrapper"> |
|
|
|
<i class="el-icon-user custom-icon"></i> |
|
|
|
<input |
|
|
|
v-model="username" |
|
|
|
class="custom-input" |
|
|
|
placeholder="用户名" |
|
|
|
type="text"> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="from-item"></div> |
|
|
|
<div class="from-item"></div> |
|
|
|
</form> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h1>智慧控电管理平台</h1> |
|
|
|
<pre> |
|
|
|
<strong>--------业主端2.3.1</strong> |
|
|
|
</pre> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
new Vue({ |
|
|
|
el: '#app', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
username: '', |
|
|
|
password: '' |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
<div></div> |
|
|
|
</html> |
