登录页添加背景文字

code/VideoAccess-VCMP/web/client/src/sections/auth/containers/login.jsx

@@ -8,99 +8,110 @@ import { IconLock, IconUser } from '@douyinfe/semi-icons';
 import '../style.less'
 
 const Login = props => {
-   const { dispatch, user, error, actions, apiRoot, isRequesting } = props
+    const { dispatch, user, error, actions, apiRoot, isRequesting } = props
-   const form = useRef();
+    const form = useRef();
 
-   useEffect(() => {
+    useEffect(() => {
-      if (error) {
+        if (error) {
-         Toast.error(error);
+            Toast.error(error);
-         form.current.setValue('password', '')
+            form.current.setValue('password', '')
-      }
+        }
-   }, [error])
+    }, [error])
 
-   useEffect(() => {
+    useEffect(() => {
-      if (user && user.authorized) {
+        if (user && user.authorized) {
-         const iotAuth = document.getElementById('iotAuth').contentWindow;
+            const iotAuth = document.getElementById('iotAuth').contentWindow;
-         iotAuth.postMessage({ action: 'login', user: user }, '*');
+            iotAuth.postMessage({ action: 'login', user: user }, '*');
-         dispatch(push('/equipmentWarehouse/nvr'));
+            dispatch(push('/equipmentWarehouse/nvr'));
-         localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
+            localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
-         localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
+            localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
-      }
+        }
-   }, [user])
+    }, [user])
 
-   return (
+    return (
-      <div style={{
+        <div style={{
-         // height: '100vh',
+            // height: '100vh',
-         // backgroundImage: "url('/assets/images/background/loginBackground.png')",
+            //  backgroundImage: "url('/assets/images/background/loginBackground.gif')",
-         // backgroundSize: 'cover',
+            // backgroundSize: 'cover',
-         // backgroundRepeat: 'no-repeat',
+            // backgroundRepeat: 'no-repeat',
-         // position: 'relative',
+            // position: 'relative',
-      }}>
+        }}>
-         <video
+            <video
-            autoPlay loop muted
+                autoPlay loop muted
-            style={{
+                style={{
-               width: "100%", objectFit: "cover", objectPosition: 'left top', height: 'calc(100vh - 4px)'
+                    width: "100%", objectFit: "cover", objectPosition: 'left top', height: 'calc(100vh - 4px)'
-            }}
+                }}
-            src="/assets/video/login_bg.mp4"
+                src="/assets/video/login_bg.mp4"
-            type="video/mp4"
+                type="video/mp4"
-         />
+            />
-         <div style={{
+            <img src='/assets/images/background/loginBackground.gif' style={{
-            width: 446,
+                width: "100%",
-            height: 348,
+                height: 'calc(100vh - 4px)',
-            padding: '45px 60px',
+                objectFit: "cover",
-            background: 'linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,.3))',
+                objectPosition: 'left top',
-            backdropFilter:"saturate(100%) contrast(100%) blur(17px)",
+                position: 'absolute',
-            position: 'absolute',
+                top: 0,
-            top: '33.89%',
+                left: 0,
-            right: '16.43%',
+                zIndex: "5"
-         }}>
+            }} />
-            <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
+            <div style={{
-               <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
+                width: 446,
+                height: 348,
+                padding: '45px 60px',
+                background: 'linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,.3))',
+                backdropFilter: "saturate(100%) contrast(100%) blur(17px)",
+                position: 'absolute',
+                top: '33.89%',
+                right: '16.43%',
+                zIndex: "6"
+            }}>
+                <div style={{ width: 113, height: 24, marginTop: 3, marginLeft: 5 }}>
+                    <img src="/assets/images/background/user_login.png" alt="" style={{ width: '100%', height: '100%' }} />
+                </div>
+                <Form
+                    onSubmit={values => {
+                        dispatch(login(values.username, values.password)).then(res => {
+                            const data = res.payload.user
+                            dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
+                        })
+                    }}
+                    getFormApi={formApi => form.current = formApi}
+                >
+                    <Form.Input
+                        className='inputbgc'
+                        field='username'
+                        noLabel={true}
+                        label='用户名'
+                        placeholder='请输入账号'
+                        prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
+                        style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
+                    />
+                    <Form.Input
+                        field='password'
+                        noLabel={true}
+                        mode="password"
+                        autoComplete=""
+                        placeholder='请输入密码'
+                        label='密码'
+                        prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
+                        style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
+                    />
+                    <Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
+                </Form>
             </div>
-            <Form
+        </div>
-               onSubmit={values => {
+    );
-                  dispatch(login(values.username, values.password)).then(res => {
-                     const data = res.payload.user
-                     dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token }))
-                  })
-               }}
-               getFormApi={formApi => form.current = formApi}
-            >
-               <Form.Input
-                  className='inputbgc'
-                  field='username'
-                  noLabel={true}
-                  label='用户名'
-                  placeholder='请输入账号'
-                  prefix={<IconUser style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
-                  style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40, marginTop: 26 }}
-               />
-               <Form.Input
-                  field='password'
-                  noLabel={true}
-                  mode="password"
-                  autoComplete=""
-                  placeholder='请输入密码'
-                  label='密码'
-                  prefix={<IconLock style={{ color: '#1859C1', marginRight: 14, marginLeft: 8 }} />}
-                  style={{ background: 'rgba(24, 89, 193, 0.08)', height: 40 }}
-               />
-               <Button htmlType='submit' block theme="solid" style={{ marginTop: 17, height: 40, backgroundColor: '#1859C1' }}>立即登录</Button>
-            </Form>
-         </div>
-      </div>
-   );
 }
 
 function mapStateToProps (state) {
-   const { auth, global } = state;
+    const { auth, global } = state;
-   return {
+    return {
-      user: auth.user,
+        user: auth.user,
-      error: auth.error,
+        error: auth.error,
-      actions: global.actions,
+        actions: global.actions,
-      apiRoot: global.apiRoot,
+        apiRoot: global.apiRoot,
-      isRequesting: auth.isRequesting
+        isRequesting: auth.isRequesting
-   }
+    }
 }
 
 export default connect(mapStateToProps)(Login);

code/VideoAccess-VCMP/web/client/src/sections/example/containers/example.jsx

@@ -14,6 +14,7 @@ const Example = (props) => {
 
     // websocket 使用测试
     useEffect(() => {
+        console.log(socket)
         if (socket) {
             socket.on('TEST', function (msg) {
                 console.info(msg);