Skip to content

J
jinfa-admin
Commit 9a9253ad authored by GuanHua's avatar GuanHua
Browse files
Options

feat:登录页面图片

parent 9bbae439
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 50 deletions
src/components/ImageBox/index.less 0 → 100644
View file @ 9a9253ad
.image_box {
&_img {
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
&.column {
.image_box_img {
background-size: auto 100%;
}
}
}
\ No newline at end of file
src/components/ImageBox/index.tsx 0 → 100644
View file @ 9a9253ad
import React from 'react'
import styles from './index.less'
import cx from 'classnames'
interface ImageBoxPropsType {
width?: number;
height?: number;
imgUrl: string;
className?: any;
direction?: "column" | "row"
}
const ImageBox: React.FC<ImageBoxPropsType> = (props) => {
const { width = 120, height = 80, imgUrl = "", className, direction = "row" } = props
return (
<div className={cx(styles.image_box, direction === 'column' ? styles.column : '')}>
<div className={cx(styles.image_box_img, className)} style={{ backgroundImage: `url(${imgUrl})`, width: `${width}px`, height: `${height}px` }}></div>
</div>
)
}
export default ImageBox
\ No newline at end of file
src/global/config/global.d.ts
View file @ 9a9253ad
......@@ -37,8 +37,8 @@ export interface PayInitializeConfig {
export interface PayPlatformPayConfig {
id: number;
payType: number;
way: string;
payType: number;
isPitchOn: number;
}
......
src/pages/user/login/index.tsx
View file @ 9a9253ad
import React, { Component } from 'react';
import { Button, Row, Col, Form, Input, message } from 'antd';
import { history } from 'umi';
import { Button, Row, Col, Form, Input, message, Carousel } from 'antd';
import { UserOutlined, LockOutlined, CloudFilled, SafetyOutlined } from '@ant-design/icons';
import request from '@/utils/request';
import './style.less';
import ImageBox from '@/components/ImageBox'
import logo from '@/asserts/logo_w.png'
import { PublicApi } from '@/services/api';
import { setAuth, setRouters } from '@/utils/auth';
......@@ -18,6 +18,7 @@ interface IndexState {
isLoading: boolean;
username: string;
password: string;
sceneList: any;
}
async function fakeAccountLogin(params: { password: string; username: string }) {
......@@ -40,6 +41,7 @@ class Index extends Component<{}, IndexState> {
isLoading: false,
username: '',
password: '',
sceneList: []
};
}
......@@ -93,8 +95,29 @@ class Index extends Component<{}, IndexState> {
});
}
componentDidMount() {
this.fetchUseScene()
}
fetchUseScene = () => {
let param = {
useScene: 1,
position: 2
}
//@ts-ignore
PublicApi.getManageContentImageFindAllByUseSceneAndPosition(param).then(res => {
if (res.code === 1000) {
this.setState({
sceneList: res.data
})
}
})
}
render() {
const { isOften, isLongTime, btnText, isBan, isLoading } = this.state
const { isOften, isLongTime, btnText, isBan, isLoading, sceneList } = this.state
return <div className="container-wrap">
<Row align="middle">
......@@ -107,9 +130,11 @@ class Index extends Component<{}, IndexState> {
<Col span={16}>
<Row className="login-box">
<Col span={12} className="myCol">
{/*<div className="ad-box">*/}
{/* <img src={leftImg} alt="数商云B2B业务中台运营平台"/>*/}
{/*</div>*/}
<Carousel autoplay>
{
sceneList && sceneList.map(item => <ImageBox direction={"column"} width={410} height={453} imgUrl={item.imageUrl} />)
}
</Carousel>
</Col>
<Col span={12} className="left-border">
<div className="login-form-box">
......
src/pages/user/login/style.less
View file @ 9a9253ad
.ant-pro-basicLayout-content{
.ant-pro-basicLayout-content {
margin: 0;
}
.container-wrap{
.container-wrap {
background: url("../../../asserts/image_bg.png") no-repeat center center;
background-size: cover;
min-height: 100vh;
.myCol{
background: url("../../../asserts/image_ad.png") no-repeat center center;
.myCol {
// background: url("../../../asserts/image_ad.png") no-repeat center center;
background-size: cover;
}
.left-text{
.left-text {
width: 320px;
margin: 0 auto;
text-align: left;
h1{
h1 {
color: #fff;
font-size:56px;
line-height:64px;
font-size: 56px;
line-height: 64px;
}
h3{
h3 {
color: #fff;
font-size:32px;
line-height:40px;
font-size: 32px;
line-height: 40px;
}
}
.login-box{
.login-box {
max-width: 820px;
background-color: #fff;
// background-color: #fff;
margin: 198px auto 0;
.ad-box{
.ad-box {
width: 100%;
text-align: center;
img{
img {
display: block;
width: 100%;
height: 100%;
}
}
.login-form-box{
h2{
.login-form-box {
background-color: #fff;
h2 {
line-height: 2;
font-weight: bold;
padding: 20px 0;
text-align: center;
border-bottom: 1px solid #eee;
}
.login-form-button{
.login-form-button {
width: 100%;
font-weight: bold;
}
.login-form{
.login-form {
margin: 90px 48px 0;
.verify-btn{
.verify-btn {
text-align: left;
width: 100%;
background-image: linear-gradient(180deg, #ffffff 0%,#f3f3f3 100%);
&:hover{
background-image: linear-gradient(180deg, #f3f3f3 0%,#ffffff 100%);
background-image: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
&:hover {
background-image: linear-gradient(180deg, #f3f3f3 0%, #ffffff 100%);
border-color: #d9d9d9;
color: #666;
.anticon{
animation:verifyMove 3s infinite;
-webkit-animation:verifyMove 3s infinite; /*Safari and Chrome*/
animation-direction:alternate;/*轮流反向播放动画。*/
animation-timing-function: ease-in-out; /*动画的速度曲线*/
.anticon {
animation: verifyMove 3s infinite;
-webkit-animation: verifyMove 3s infinite;
/*Safari and Chrome*/
animation-direction: alternate;
/*轮流反向播放动画。*/
animation-timing-function: ease-in-out;
/*动画的速度曲线*/
/* Safari 和 Chrome */
-webkit-animation:verifyMove 3s infinite;
-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-webkit-animation: verifyMove 3s infinite;
-webkit-animation-direction: alternate;
/*轮流反向播放动画。*/
-webkit-animation-timing-function: ease-in-out;
/*动画的速度曲线*/
}
}
}
.send-code{
.send-code {
font-size: 12px;
width: 100%;
&:focus {
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
border-color: #d9d9d9;
}
}
.login-logo{
.login-logo {
display: block;
width: 116px;
height: 40px;
......@@ -90,7 +113,8 @@
}
}
}
.footer{
.footer {
width: 100%;
position: fixed;
bottom: 30px;
......@@ -100,18 +124,22 @@
}
}
@keyframes verifyMove
{
0%{
transform: scale(1); /*开始为原始大小*/
@keyframes verifyMove {
0% {
transform: scale(1);
/*开始为原始大小*/
}
25%{
transform: scale(1.5); /*放大1.1倍*/
25% {
transform: scale(1.5);
/*放大1.1倍*/
}
50%{
50% {
transform: scale(1);
}
75%{
75% {
transform: scale(1.5);
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment