zhangqi
/
yos_web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="blog/css/font-awesome.css">

  <title>班尼戈-德国班尼戈阀门【官网】</title>
  <link rel="icon" href="./favicon.ico" type="image/x-icon">  
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">  
</head>
<style>
*{
  margin: 0;
  padding: 0;
}
.container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width:100% ;
  background-image: url('./assets/loginbg.jpg');
  background-size: cover;
}
  /* From Uiverse.io by micaelgomestavares */ 
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #ffffff;
  padding: 30px;
  width: 390px;
  border-radius: 20px;
  border: 1px solid #f1f2f3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
}

::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.form button {
  align-self: flex-end;
}

.flex-column > label {
  color: #151717;
  font-weight: 600;
}
label{
  margin: 0;

}
.inputForm {
  position: relative;
  border: 1.5px solid #ecedec;
  border-radius: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  transition: 0.2s ease-in-out;
  margin-bottom: 10px;
}

.input {
  border-radius: 10px;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0 10px;
}

.verifyCode{
  position: absolute;
  right: 10px;
  cursor: pointer;
  color:#003399 ;
}
.input:focus {
  outline: none;
}

.inputForm:focus-within {
  border: 1.5px solid #2d79f3;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.flex-row > div > label {
  font-size: 14px;
  color: black;
  font-weight: 400;
}

.span {
  font-size: 14px;
  margin-left: 5px;
  color: #2d79f3;
  font-weight: 500;
  cursor: pointer;
}

.button-submit {
  margin: 20px auto 10px auto;
  background-color: #009966;
  border: none;
  color: white;
  font-size: 15px;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 200px;
  cursor: pointer;
}

.button-submit:hover {
  background-color: #003399;
}
.button-back{
  margin:0 auto 0px auto;
  color: #009966;
  color: white;
  font-size: 15px;
  font-weight: 500;
  border-radius: 5px 5px 5px 5px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 200px;
  cursor: pointer;
  border:1px solid #009966
}
.button-back a{
  color: #009966;
}
.p {
  text-align: center;
  color: black;
  font-size: 14px;
  margin: 5px 0;
}

.btn {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  gap: 10px;
  border: 1px solid #ededef;
  background-color: white;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.btn:hover {
  border: 1px solid #2d79f3;
  ;
}
.login-text{
  margin: 10px 0;
  text-align: center;
  color:#003399 ;
}
.flex-center{
  width: 300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-center img{
  width: 180px;
}
.flex-center p{
  font-size:1.8rem ;
  color:#003399 ;
  margin: 0;
} 
.tabs p{
  width: 50%;
  margin: 20px 0 15px 0;
  font-size: 14px;
  color:#BBBBBB;
  text-align: center;
}
.tabs p span{
  display: inline-block;
  padding:0 0 10px 0;
  cursor: pointer;

}
.active{
  color: #333 !important;
}
.active span{
  margin-top: 2px;
  border-bottom: 2px solid #009966;
}
input[type="checkbox"] {
    box-shadow: none; 
    width: 15px;
    height: 15px;
    background-color: #333;
    margin: 0;
}
input[type="checkbox"]:checked {
    accent-color: #009966;
}
.lang{
  display: flex;
  align-items: center;
  color:#333333
}
.lang:hover {
  color: #009966;
}
.remeber-account{
  color: #BBBBBB !important;
}
.right-top{
  position: absolute;
  right: 10px;
  top:10px
}
@media (max-width:640px) {
  .form{
    transform: scale(.9);
  }
}
</style>
<body>
  <div class="container" id="app">
    <div class="right-top">
      <div class="dropdown">
        <a style="color: #fff;" class="lang" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <svg style="width: 15px;height: 15px;" t="1727425180240" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1933" width="200" height="200"><path d="M233.92 230.25l61.76 61.76A255.872 255.872 0 0 0 170.667 512c0 139.2 111.125 252.459 249.493 255.915l6.507 0.085h96.469L457.6 702.464l60.33-60.33 25.366 25.365-0.064 0.085 166.741 166.72c-31.893 11.157-65.92 17.707-101.333 18.837l-0.192 0.171-0.17-0.15-5.462 0.129-5.483 0.042H426.667c-188.523 0-341.334-152.81-341.334-341.333 0-116.992 58.88-220.245 148.587-281.75z m363.413-59.583c188.523 0 341.334 152.81 341.334 341.333 0 116.992-58.88 220.245-148.587 281.75l-61.76-61.76A255.872 255.872 0 0 0 853.333 512c0-141.376-114.624-256-256-256h-96.469l65.515 65.515-60.331 60.33-118.016-118.037 0.064-0.043-74.07-74.069a340.288 340.288 0 0 1 101.334-18.837l0.15-0.192 0.213 0.17 5.44-0.128 5.504-0.042h170.666z" p-id="1934" fill="#ffffff"></path></svg>&nbsp;
          <span>{{lang}}</span>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li @click="langChange('ZH')"><a href="#">简体中文</a></li>
          <li @click="langChange('en')"><a href="#">English</a></li>
        </ul>
      </div>
    </div>
    <form class="form">
      <div>
        <p class="login-text" translate>水工业控制、液冷系统流体控制的可靠服务商</p>
        <div class="flex-center">
          <img src="./assets/logo@2x.png" alt="">
          <p translate>&nbsp;班尼戈</p>
        </div>
      </div>
      <div class="flex-center tabs">
          <!-- <p :class="loginType == 'account' ? 'active' : ''" @click="changeTabs('account')"><span translate>账号登录</span></p> -->
          <!-- <p :class="loginType == 'phone' ? 'active' : ''"  @click="changeTabs('phone')"><span translate>短信登录</span></p> -->
      </div>
      <div class="inputForm">
        <input type="text" class="input" id="phoneNumber" placeholder="账号">
      </div>
      <div class="inputForm">       
        <input v-show="loginType == 'account'" type="password" class="input" id="password" placeholder="密码">
        <input v-show="loginType == 'phone'" type="text" class="input" id="verifyCode" placeholder="验证码">
        <a v-show="loginType == 'phone'" class="verifyCode" onclick="tool.getVerifyCode()" id="getVerifyCode" translate>获取验证码</a>
      </div>
        
        <div class="flex-row">
          <!-- <div class="flex-row">
            <input type="checkbox">
            <label class="remeber-account" translate>记住账号</label>
          </div> -->
          <div class="dropdown">
            <a class="lang" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <svg style="display:inlie-block;height: 15px;width: 15px;" t="1727425180240" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1933" width="200" height="200"><path d="M233.92 230.25l61.76 61.76A255.872 255.872 0 0 0 170.667 512c0 139.2 111.125 252.459 249.493 255.915l6.507 0.085h96.469L457.6 702.464l60.33-60.33 25.366 25.365-0.064 0.085 166.741 166.72c-31.893 11.157-65.92 17.707-101.333 18.837l-0.192 0.171-0.17-0.15-5.462 0.129-5.483 0.042H426.667c-188.523 0-341.334-152.81-341.334-341.333 0-116.992 58.88-220.245 148.587-281.75z m363.413-59.583c188.523 0 341.334 152.81 341.334 341.333 0 116.992-58.88 220.245-148.587 281.75l-61.76-61.76A255.872 255.872 0 0 0 853.333 512c0-141.376-114.624-256-256-256h-96.469l65.515 65.515-60.331 60.33-118.016-118.037 0.064-0.043-74.07-74.069a340.288 340.288 0 0 1 101.334-18.837l0.15-0.192 0.213 0.17 5.44-0.128 5.504-0.042h170.666z" p-id="1934"></path></svg>&nbsp;
              <span>{{lang}}</span>
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li @click="langChange('ZH')"><a href="#">简体中文</a></li>
              <li @click="langChange('en')"><a href="#">English</a></li>
            </ul>
          </div>
        </div>
        <div v-show="loginType == 'phone'" class="button-submit" onclick="tool.login(true)" translate>登陆</div>
        <div v-show = "loginType == 'account'" class="button-submit" onclick="tool.accountLogin()" translate>登陆</div>
        <div class="button-back" onclick="tool.linkOf('./index.html')"><a translate>返回</a></div>
    </div>
    </form>
  </div>
</body>
</html>
<script src="blog/js/jquery.min.js"></script>

<script src="vue/axios.min.js"></script>
<script src="vue/api.js"></script>
<script src="js/md5.js"></script>

<script src="vue/vue.global.js"></script>
<script src="vue/formTool.js"></script>

<script src="blog/js/jquery.min.js"></script>
<script src="blog/js/bootstrap.min.js"></script>
<script>
const { createApp, ref ,onMounted,createVNode, render} = Vue

createApp({
  setup() {
    onMounted(()=>{
      let lg = localStorage.getItem('lang')
      switch (lg) {
        case 'ZH':
          lang.value = '简体中文'
          break;
        case 'en':
          lang.value = 'English'
          break;
        default:
          lang.value = '简体中文'
          break;
      }
    })
    const lang = ref('简体中文')
    const loginType = ref('account')
    const changeTabs = (type)=>{
      loginType.value = type
    }

    const langChange = (lg)=>{
      
      switch (lg) {
        case 'ZH':
          lang.value = '简体中文'
          break;
        case 'en':
          lang.value = 'English'
          break;
        default:
          break;
      }
      localStorage.setItem('lang',lg)
      window.location.reload()
    }
    return {
      loginType,
      changeTabs,
      langChange,
      lang
    }
  }
}).mount('#app')

</script>