Tue Jun 13 01:30:00 UTC 2023 inscode

src/components/test.vue

+<template>
+    <div>
+      <!-- 背景云层 -->
+      <div id="header">
+        <div id="clouds">
+          <div class="cloud-1" data-speed="35000"></div>
+          <div class="cloud-2" data-speed="45000" data-delay="15000"></div>
+          <div class="cloud-3" data-speed="40000"></div>
+          <div class="cloud-4" data-speed="38000" data-delay="20000"></div>
+        </div>
+      </div><!-- / #header -->
+  
+      <div id="content">
+        <div class="container">
+          <!-- 登录模块 -->
+          <form id="login-form" @submit.prevent="login">
+            <div id="login_header"><i class="icon-home"></i>智能小区服务管理系统</div>
+  
+            <div id="login_content">
+              <div class="form-group">
+                <input v-model="username" type="text" maxlength="18" placeholder="用户名" @click="showTooltip('填写您的身份证号')" @blur="hideTooltip">
+                <div class="tooltip" :style="{display: showUsernameTooltip ? 'block' : 'none'}">{{ usernameTooltip }}</div>
+              </div>
+  
+              <div class="form-group">
+                <input v-model="password" type="password" maxlength="16" placeholder="密码" @click="showTooltip('填写您的密码')" @blur="hideTooltip">
+                <div class="tooltip" :style="{display: showPasswordTooltip ? 'block' : 'none'}">{{ passwordTooltip }}</div>
+              </div>
+  
+              <div class="form-group">
+                <div class="option" @click="toggleOptionList">
+                  <div class="option_result">{{ userType }}</div>
+                  <div class="option_arrow" :class="{ active: showOptionList }"><b class="arrow"></b></div>
+                  <ul class="option_list" :style="{display: showOptionList ? 'block' : 'none'}">
+                    <li @click="selectUserType('住户')">住户</li>
+                    <li @click="selectUserType('管理员')">管理员</li>
+                    <li @click="selectUserType('运营商')">运营商</li>
+                  </ul>
+                </div>
+                <div class="tooltip" :style="{display: showTypeTooltip ? 'block' : 'none'}">{{ typeTooltip }}</div>
+              </div>
+            </div><!-- / #login_content -->
+  
+            <div id="login_footer">
+              <button id="login_btn" type="submit">{{ loginButtonContent }}</button>
+            </div><!-- / #login_footer -->
+  
+            <div><a @click.prevent="showRegisterForm">新用户注册</a></div>
+          </form><!-- / #login-form -->
+  
+          <!-- 注册模块 -->
+          <form id="register-form" @submit.prevent="register" style="display: none;">
+            <div id="register_header"><i class="icon-home"></i>新用户注册</div>
+  
+            <div id="register_content">
+              <div class="form-group">
+                <input v-model="realname" type="text" maxlength="4" placeholder="真实姓名" @click="showTooltip('填写您的真实中文姓名')" @blur="hideTooltip">
+                <div class="tooltip" :style="{display: showRealnameTooltip ? 'block' : 'none'}">{{ realnameTooltip }}</div>
+              </div>
+  
+              <div class="form-group">
+                <input v-model="id" type="text" maxlength="18" placeholder="身份证号" @click="showTooltip('填写您的真实身份证号码')" @blur="hideTooltip">
+                <div class="tooltip" :style="{display: showIdTooltip ? 'block' : 'none'}">{{ idTooltip }}</div>
+              </div>
+  
+              <div class="form-group">
+                <input v-model="registerPassword" type="password" maxlength="16" placeholder="密码" @click="showTooltip('填写6~16个字母或者数字')" @blur="hideTooltip">
+                <div class="tooltip" :style="{display: showRegisterPasswordTooltip ? 'block' : 'none'}">{{ registerPasswordTooltip }}</div>
+              </div>
+            </div><!-- / #register_content -->
+  
+            <div id="register_footer">
+              <button id="register_btn" type="submit">{{ registerButtonContent }}</button>
+            </div><!-- / #register_footer -->
+  
+            <div><a @click.prevent="showLoginForm">返回登录</a></div>
+          </form><!-- / #register-form -->
+        </div><!-- / .container -->
+      </div><!-- / #content-->
+  
+      <div id="footer">
+        <div class="container"></div><!-- / .container -->
+      </div><!-- / #footer -->
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        username: '',
+        password: '',
+        userType: '用户类型',
+        showOptionList: false,
+        realname: '',
+        id: '',
+        registerPassword: '',
+        showUsernameTooltip: false,
+        showPasswordTooltip: false,
+        showTypeTooltip: false,
+        showRealnameTooltip: false,
+        showIdTooltip: false,
+        showRegisterPasswordTooltip: false,
+        usernameTooltip: '',
+        passwordTooltip: '',
+        typeTooltip: '',
+        realnameTooltip: '',
+        idTooltip: '',
+        registerPasswordTooltip: '',
+        loginButtonContent: '登录',
+        registerButtonContent: '注册',
+      };
+    },
+    methods: {
+      toggleOptionList() {
+        this.showOptionList = !this.showOptionList;
+        this.showTypeTooltip = false;
+      },
+      selectUserType(type) {
+        this.userType = type;
+        this.showOptionList = false;
+      },
+      showTooltip(text) {
+        const label = event.target.placeholder;
+        if (label === '用户名') {
+          this.showUsernameTooltip = true;
+          this.usernameTooltip = text;
+        } else if (label === '密码') {
+          this.showPasswordTooltip = true;
+          this.passwordTooltip = text;
+        } else if (label === '真实姓名') {
+          this.showRealnameTooltip = true;
+          this.realnameTooltip = text;
+        } else if (label === '身份证号') {
+          this.showIdTooltip = true;
+          this.idTooltip = text;
+        } else if (label === '密码') {
+          this.showRegisterPasswordTooltip = true;
+          this.registerPasswordTooltip = text;
+        } else {
+          this.showTypeTooltip = true;
+          this.typeTooltip = text;
+        }
+      },
+      hideTooltip() {
+        const label = event.target.placeholder;
+        if (label === '用户名') {
+          this.showUsernameTooltip = false;
+        } else if (label === '密码') {
+          this.showPasswordTooltip = false;
+        } else if (label === '真实姓名') {
+          this.showRealnameTooltip = false;
+        } else if (label === '身份证号') {
+          this.showIdTooltip = false;
+        } else if (label === '密码') {
+          this.showRegisterPasswordTooltip = false;
+        } else {
+          this.showTypeTooltip = false;
+        }
+      },
+      showRegisterForm() {
+        this.$refs.loginForm.style.display = 'none';
+        this.$refs.registerForm.style.display = 'block';
+      },
+      showLoginForm() {
+        this.$refs.loginForm.style.display = 'block';
+        this.$refs.registerForm.style.display = 'none';
+      },
+      login() {
+        this.loginButtonContent = '登录中...';
+        setTimeout(() => {
+          this.loginButtonContent = '登录';
+        }, 5000);
+      },
+      register() {
+        this.registerButtonContent = '注册中...';
+        setTimeout(() => {
+          this.registerButtonContent = '注册';
+        }, 5000);
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* #Tooltip Styles
+  ================================= */
+  
+  .tooltip {
+    position: absolute;
+    top: 50%;
+    left: 20%;
+    transform: translate(-20%, -50%);
+    background-color: #333;
+    color: #fff;
+    padding: 5px 10px;
+    font-size: 14px;
+    border-radius: 4px;
+  }
+  
+  /* #Option Styles
+  ================================= */
+  
+  .option {
+    position: relative;
+  }
+  
+  .option_result {
+    display: inline-block;
+    padding: 10px;
+    font-weight: bold;
+    border: 1px solid #ccc;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .option_arrow {
+    position: absolute;
+    top: 50%;
+    margin-top: -8px;
+    right: 10px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid #eee;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    cursor: pointer;
+  }
+  
+  .option_arrow.active {
+    border-top: 8px solid #fff;
+  }
+  
+  .option_list {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 4px; padding: 10px; z-index: 100; cursor: pointer; } .option_list li:hover { background-color: #f5f5f5; }
+  
+  /* Other Styles ================================= */ .container { width: 960px; margin: 0 auto; }
+  
+  .form-group { position: relative; margin-bottom: 20px; }
+  
+  .form-group input { display: block; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-size: 14px; outline: none; }
+  
+  #login_btn, #register_btn { display: block; height: 40px; width: 120px; background-color: #333; color: #fff; border: none; -webkit-border-radius: 4px; border-radius: 4px; margin-top: 20px; cursor: pointer; }
+  
+  #login_btn:hover, #register_btn:hover { background-color: #222; }
+  
+  #login_footer .ing, #register_footer .ing { display: inline-block; margin-right: 10px; width: 20px; height: 20px; border: 2px solid #333; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; -webkit-border-radius: 50%; border-radius: 50%; }
+  
+  @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
+  
+  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+  
+  #login_footer .ing.hide, #register_footer .ing.hide { display: none; }
+  
+  .arrow { position: absolute; width: 0; height: 0; border-top: 7px solid #666; border-left: 7px solid transparent; border-right: 7px solid transparent; top: 50%; margin-top: -4px; left: 50%; margin-left: -4px; }
+  
+  .active .arrow { border-top: 7px solid #fff; }
+  
+  </style>
\ No newline at end of file