index.vue

<template>
  <div class="layout">
    <div class="global_nav">
      <div class="toolbar_nav container">
        <div class="item_nav">
          <a-icon type="star" /><span>收藏</span>
        </div>
      </div>
      <div class="header_s">

      </div>
      <div class="meau_nav ">
        <div class="nav_box container">
          <ul>
            <li class="active">主页</li>
            <li>通知公告</li>
            <li>下载</li>
          </ul>
        </div>
      </div>
      <div class="content container">
        <div class="head_lines">
          <div style="background: #f5f5f5;">
            <span href="" style="display:block;position: relative;height:40px">
              <img style=" position:absolute;top:11px;left:14px;" src="../../../static/images/tz.png">
              <a style="position:absolute;top: 9px;left:40px" href="/News/View/17e2b271-c362-4203-afc7-b00fc36c1b65" title="更新时间：2023-04-24" target="_blank">省卫生健康委关于做好住院医师 规范化培训招录工作的通知</a>
            </span>
          </div>
        </div>
        <div class="notice_nav">
          <div style="display:flex;">
            <div style="width:600px;height:280px;padding: 0px 4px 0px 4px;">
              <div class="card_box notice_box">
                <div class="card_title">
                </div>
              </div>
            </div>
            <div style="width:300px;padding: 0px 4px;">
              <div class="card_box login_box">
                <div class="card_title">
                </div>
                <div class="login_ct">
                  <a-form-model :model="formData" ref="formData" :rules="rules" class="login_fm">
                    <a-row>
                      <a-col :span="24">
                        <a-form-model-item ref="username" prop="username">
                          <a-icon type="user" />
                          <a-input placeholder="用户名" AUTOCOMPLETE="off" v-model="formData.username" :readOnly="readOnly" @click="() => {this.readOnly=false }" @check="() => {this.readOnly=false }" @blur="() => {$refs.username.onFieldBlur();this.readOnly=false }" style="width:200px;">
                          </a-input>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="24">
                        <a-form-model-item ref="password" prop="password">
                          <a-icon type="lock" />
                          <a-input-password placeholder="密码" v-model="formData.password" size="large" @keyup.enter="login" style="width:200px;">
                          </a-input-password>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="24">
                        <a-form-model-item prop="code">
                          <a-icon type="exclamation-circle" />
                          <a-input placeholder="验证码" v-model="formData.code" size="large" @keyup.enter="login" style="width:106px" />
                          <img style="cursor:pointer;" :src="codeUrl" @click="getCode">
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="24" style="line-height: 44px;margin-top:4px">
                        <a-button @click="login" type="primary" class="btn" block size="large" :loading="loading" @keyup.enter="login">登录</a-button>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </div>
                <div class="login-foot">
                  <a href="#" @click="clickRegister" style="margin-right: 32px;">注册</a>
                  <a href="#" @click="clickReset">忘记密码?</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="download_nav">
          <div style="display:flex;">
            <div style="width:450px;height:280px;padding: 0px 4px 0px 0px;">
              <div class="card_box download_box">
                <div class="card_title">
                </div>
              </div>
            </div>
            <div style="width:450px;padding: 0px 0px 0px 4px;">
              <div class="card_box q_box">
                <div class="card_title">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="global_foot">

      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: "web",
  components: {

  },
  data () {
    return {
      formData: { username: "", password: "", code: "", uuid: "" },
      rules: {
        username: { required: true, message: '*', trigger: 'blur' },
        password: { required: true, message: '*', trigger: 'blur' },
        code: { required: true, message: '*', trigger: 'blur' },
      },
      codeUrl: "",
      readOnly: true,
      loading: false
    }
  },
  props: {

  },
  created () {
    this.getCode()
  },
  methods: {
    login () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$api.base.login(isEmptyParams(this.formData)).then(({ data = {} }) => {
            if (data) {
              this.$message.success('登录成功！');
              setToken(data.access_token)
              this.$router.push({ path: '/home' })
            }
            else {
              this.getCode()
            }
            this.loading = false;
          }).catch((er) => {
            this.getCode()
            this.loading = false;
          })
        } else {
          return false
        }
      })
    },
    getCode () {
      this.$api.base.getCode().then(({ data = {} }) => {
        if (data) {
          this.formData.uuid = data.uuid
          this.codeUrl = data.img
        }
      }).catch(() => { })
    },
    clickRegister () {
      this.$router.push('/register')
    },
    clickReset () {
      this.$router.push('/reset')
    },
  },
}
</script>
<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-image: url(../../../static/images/htmlbg.jpg);
  font-size: 14px;
}
.container {
  width: 900px;
  margin: 0 auto;
}
.global_nav {
  position: relative;
  height: 30px;
  background-color: #fbfbfb;
  border-bottom: 1px solid #e8e8e8;
  .toolbar_nav {
    position: relative;
    height: 30px;
    .item_nav {
      position: absolute;
      top: 5px;
      right: 15px;
      cursor: pointer;
      .anticon {
        font-size: 14px;
        margin-right: 2px;
        color: rgb(155, 148, 57);
      }
      span {
        font-size: 14px;
      }
    }
  }
}
.header_s {
  height: 80px;
  background: #fff;
}
::v-deep .meau_nav {
  height: 40px;
  background: #56abe4;
  .nav_box {
    height: 40px;
  }
  .nav_box ul {
    margin: 0;
    padding: 0;
  }
  .nav_box ul li {
    width: 14.2%;
    display: inline-block;
    line-height: 40px;
    color: #fff;
    text-align: center;
  }
  .nav_box ul li:hover {
    background: #75cbff9c;
    color: #fff;
    cursor: pointer;
  }
  .active {
    background: #75cbff9c;
    color: #fff;
  }
}
.content {
  background: #fff;
  padding: 6px 2px;
  margin-top: 6px;
  .head_lines {
    padding: 0 4px;
    min-height: 40px;
    width: 100%;
    color: #000;
  }
  .notice_nav {
    width: 100%;
    margin: 6px 0px;
    .notice_box {
      border: 1px solid #e6ebf5;
    }
    .login_box {
      border: 1px solid #e6ebf5;
      /deep/.login_ct {
        padding: 16px 0px 0px 0px;
        .login_fm {
          .ant-row-flex,
          .ant-row {
            .ant-col {
              padding: 0px 5px;
              height: 45px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
              .ant-row .ant-col {
                border: 0;
              }
              .ant-form-item {
                padding: 0;
                border: 0;
                margin-bottom: 0px !important;
              }
            }
          }
          .ant-form-explain {
            margin-left: 6px;
            display: inline-block;
          }
          .ant-input {
            height: 32px !important;
            font-size: 14px !important;
          }
          .ant-input-lg {
            height: 32px !important;
            font-size: 14px !important;
          }
          .anticon {
            margin-right: 6px;
          }
          img {
            margin-left: 4px;
            width: 90px;
            height: 32px;
          }
          .ant-btn-primary {
            background-color: #56abe4;
            border-color: #56abe4;
          }
        }
      }
      .login-foot {
        padding: 0 20px;
        text-align: right;
      }
    }
  }
  .download_nav {
    margin: 0 4px;
    .download_box {
      border: 1px solid #e6ebf5;
    }
    .q_box {
      border: 1px solid #e6ebf5;
    }
  }
}
.global_foot {
  background: #fff;
  padding: 6px 2px;
  margin-top: 10px;
  height: calc(100vh - 790px);
  min-height: 100px;
  background: #dbdbdb;
  border-top: 1px solid #b4b2b7;
}
.card_box {
  border-radius: 8px;
  width: 100%;
  height: 100%;
}
.card_title {
  border-radius: 8px 8px 0 0;
  // background: #e9f8ff;
  background: linear-gradient(180deg, #eff2ff 0%, #dfe6ff 100%);
  width: 100%;
  height: 40px;
}
</style>