Skip to content

121.更换登录页

大家好~我是米洛！
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程，希望大家多多支持。
欢迎关注我的公众号米洛的测开日记，一起交流学习!

回顾

上一节我们修复了接口文档的问题，这一节我们来改造下登录页。

现在的登录页

怎么说呢，比较难看，再加上上下还有空隙，所以在忍受了许久以后我打算对它下手了。

说句实话，这块内容涉及到比较多css的东西，为了节约时间，我白嫖了github上的一些登录模板。

先来看下最终的模板:

不能说很好看，但起码比之前更扁平化了一些，之前花里胡哨的，我还是更喜欢简约点的。

下面是原作者的git地址: https://github.com/zeroojs/landing-ux

开始改造

  • 修改BasicLayout.jsx
import {DefaultFooter, getMenuData, getPageTitle} from '@ant-design/pro-layout';
import {connect, FormattedMessage, Link, useIntl} from 'umi';
import React from 'react';
import login from '../assets/login.svg';
import logo from '../assets/logo.svg';
import './index.css';
import styles from './UserLayout.less';

const UserLayout = (props) => {
  const {
    route = {
      routes: [],
    },
  } = props;
  const {routes = []} = route;
  const {
    children,
    location = {
      pathname: '',
    },
  } = props;
  const {formatMessage} = useIntl();
  const {breadcrumb} = getMenuData(routes);
  const title = getPageTitle({
    pathname: location.pathname,
    formatMessage,
    breadcrumb,
    ...props,
  });
  return (

    <div className="container">
      <div className="form-warp">
        <div>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo}/>
                <span className={styles.title}>pity</span>
              </Link>
            </div>
            <div className={styles.desc}>
              <FormattedMessage
                id="pages.layouts.userLayout.title"
                defaultMessage="pity是一款开源且自由的接口自动化平台"
              />
            </div>
          </div>
        </div>
        {children}
        <DefaultFooter copyright={
          <span>{new Date().getFullYear()} woody个人出品 <a
            href="https://beian.miit.gov.cn">鄂ICP备20001602号</a></span>} links={false} style={{
          background: '#ffffff'
        }}/>
      </div>
      <div className="desc-warp">
        <div className="desc-warp-item sign-up-desc">
          <div className="content">
          </div>
          <img className="image" src={login} alt=""/>
        </div>
      </div>
    </div>
  );
};

export default connect(({settings}) => ({...settings}))(UserLayout);

我们把原先的结构调整一下，与github的模式一致，保留的地方是children（也就是我们的登录表单）。

  • 新增index.css

写好html页面以后，我们还需要引入css，这儿我做了一些改动，我去掉了注册/登录页面的切换:

.container {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

* {
  font-size: 13px;
}

.container::before {
  content: " ";
  position: absolute;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background-image: linear-gradient(-45deg, #6266f5 0%, #04befe 100%);
  transition: 1.8s ease-in-out;
  z-index: 6;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
}

.container.sign-up-mode::before {
  transform: translate(100%, -50%);
}

.form-warp {
  width: 50%;
  position: absolute;
  z-index: 5;
  left: 75%;
  top: 43%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr;
  transition: 1s 0.7s ease-in-out;
}

.container.sign-up-mode .form-warp {
  left: 25%;
}


.desc-warp {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.desc-warp-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  padding: 3rem 17% 2rem 12%;
  z-index: 6;
}

/* 事件穿透 BEGIN */
.sign-in-desc {
  pointer-events: none;
}

.sign-up-mode .sign-in-desc {
  pointer-events: all;
}

.sign-up-mode .sign-up-desc {
  pointer-events: none;
}

/* 事件穿透 END */
.content {
  width: 100%;
  transition: transform 0.9s ease-in-out;
  transition-delay: .6s;
}

.sign-in-desc .image,
.sign-in-desc .content {
  transform: translateX(800px);
}

.sign-up-mode .sign-in-desc .image,
.sign-up-mode .sign-in-desc .content {
  transform: translateX(0);
}

.sign-up-mode .sign-up-desc .image,
.sign-up-mode .sign-up-desc .content {
  transform: translateX(-800px);
}


.image {
  width: 100%;
  display: block;
  transition: transform 0.9s ease-in-out;
  transition-delay: .5s;
}

/* 响应式 */
@media screen and (max-width: 870px) {
  .container::before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 68%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }

  .container.sign-up-mode::before {
    transform: translate(-50%, 100%);
    bottom: 32%;
    right: initial;
  }

  .form-warp {
    width: 100%;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .container.sign-up-mode .form-warp {
    top: 25%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  /*.image {*/
  /*  width: 200px;*/
  /*  transition: transform 0.9s ease-in-out;*/
  /*  transition-delay: 0.7s;*/
  /*}*/

  .desc-warp {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .desc-warp-item {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 8%;
    grid-column: 1 / 2;
  }

  .sign-in-desc {
    grid-row: 3 / 4;
  }

  .sign-in-desc .image,
  .sign-in-desc .content {
    transform: translateY(800px);
  }

  .sign-up-mode .sign-in-desc .image,
  .sign-up-mode .sign-in-desc .content {
    transform: translateY(0);
  }

  .sign-up-mode .sign-up-desc .image,
  .sign-up-mode .sign-up-desc .content {
    transform: translateY(-800px);
  }
}

@media screen and (max-width: 570px) {
  .container::before {
    bottom: 42%;
    left: 50%;
  }

  img {
    display: none;
  }
}

css很长，是响应式的，因为我这块属实辣鸡，所以也只好白嫖下别人的了（已给博主投币支持）。当然还有一些地方没有优化好，比如响应式不是很生效，不过总体来看的话，已经比之前效果好很多了。

提交按钮加border-radius

来看看区别:

  • 之前半屏

  • 现在半屏

说到底还是自己前端太弱了，css这玩意真的是一门大大的学问，以后有机会一定要学习更多这方面的知识！