#2025

4 months ago · dcb9f8c3be
6 changed files with 224 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/14
+++ b/14
@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>菜鸟教程(runoob.com)</title>
 </head>
 <body>
 <h1>我的第一个标题</h1>
 <p>我的第一个段落。</p>
 </body>
 </html>
--- a/skimage/sk1.png
+++ b/skimage/sk1.png
--- a/skimage/sk2.png
+++ b/skimage/sk2.png
--- a/skimage/sk3.png
+++ b/skimage/sk3.png
--- a/skimage/user_icon.png
+++ b/skimage/user_icon.png