@titaui/pc 1.9.35 → 1.9.39

package/src/pages/appointment-demo/index.scss

@@ -0,0 +1,445 @@
+// .appointment-demo{
+//     z-index: 999;
+//     width: 100%;
+//     height: 100%;
+//     position: absolute;
+//     top: 0;
+//     left: 0;
+//     right: 0;
+//     bottom: 0;
+//     &-pc{
+//         z-index: 99999;
+//         width: 100%;
+//         height: 100%;
+//         background: rgba(0, 0, 0, 0.5);
+//         &-popup{
+//             width: 911px;
+//             height: 584px;
+//             background: #FFFFFF;
+//             border-radius: 8px;
+//             display: flex;
+//             position: absolute;
+//             left: 0;
+//             right: 0;
+//             top: 0;
+//             bottom: 0;
+//             margin: auto;
+//             &-close{
+//                 width: 14px;
+//                 height: 14px;
+//                 position: absolute;
+//                 top: 21px;
+//                 right: 35px;
+//                 cursor: pointer;
+//                 z-index: 3;
+//                 img{
+//                     width: 14px;
+//                     height: 14px;
+//                 }
+//             }
+//             &-bcg{
+//                 width: 606px;
+//                 height: 552px;
+//                 background: url('./image/demo-bcg.png') no-repeat;
+//                 background-size: 606px 552px;
+//                 position: absolute;
+//                 left: 0;
+//                 bottom: 0;
+//             }
+//             &-left{
+//                 margin: 36px 0 0 32px ;
+//                 &-title{
+//                     font-size: 26px;
+//                     font-weight: 600;
+//                     color: #141C28;
+//                     line-height: 40px;
+//                 }
+//                 &-subtitle{
+//                     font-size: 14px;
+//                     font-weight: 400;
+//                     color: #6F7886;
+//                     line-height: 22px;
+//                     margin-top: 4px;
+//                 }
+//             }
+//             &-right{
+//                 z-index: 2;
+//                 &-form{
+//                     width: 420px;
+//                     margin-left: 77px;
+//                     &-item{
+//                         margin-top: 12px;
+//                         &:nth-of-type(1){
+//                             margin-top: 40px;
+//                         }
+//                         &-module{
+//                             margin-bottom: 11px;
+//                             font-size: 14px;
+//                             line-height: 22px;
+//                             font-weight: 600;
+//                             color: #3F4755;
+//                             .required {
+//                                 color: #F05E5E;
+//                                 font-size: 14px;
+//                                 margin-left:4px;
+//                                 vertical-align: middle;
+//                             }
+//                         }
+//                         &-modules{
+//                             margin-top: 4px;
+//                             display: flex;
+//                             &-item{
+//                                 cursor: pointer;
+//                                 box-sizing: border-box !important;
+//                                 height: 32px;
+//                                 width: 94px;
+//                                 background: #FFFFFF;
+//                                 border-radius: 4px;
+//                                 border: 1px solid #E9ECF0;
+//                                 line-height: 32px;
+//                                 text-align: center;
+//                                 color: #3F4755;
+//                                 font-size: 14px;
+//                                 font-weight: 400;
+//                                 &:nth-of-type(1){
+//                                     width: 107px;
+//                                 }
+//                                 &:not(:nth-of-type(1)){
+//                                     margin-left: 10px;
+//                                 }
+//                                 &:hover{
+//                                     background: #E9F1FF;
+//                                 }
+//                             }
+//                         }
+//                     }
+//                     &-submit{
+//                         cursor: pointer;
+//                         margin-top: 24px;
+//                         box-sizing: border-box !important;
+//                         width: 420px;
+//                         height: 36px;
+//                         line-height: 36px;
+//                         text-align: center;
+//                         background: #2879FF;
+//                         border-radius: 4px;
+//                         font-size: 14px;
+//                         font-weight: 400;
+//                         color: #FFFFFF;
+//                         &:hover{
+//                             background: #5C8EFF;
+//                         }
+//                     }
+//                 }
+//             }   
+//         }
+//     }
+//     &-h5{
+
+//     }
+// }
+
+$baseFontSize: 37.5;//默认基准font-size
+@function px2rem($px){
+  @return $px / $baseFontSize * 1rem;
+}
+
+.appointment-demo{
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    &-pc{
+        z-index: 99999;
+        width: 100%;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.5);
+        &-popup{
+            width: 911px;
+            height: 660px;
+            background: #FFFFFF;
+            border-radius: 8px;
+            display: flex;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            &-close{
+                // display: none;
+                width: 14px;
+                height: 14px;
+                position: absolute;
+                top: 21px;
+                right: 35px;
+                cursor: pointer;
+                z-index: 3;
+                img{
+                    width: 14px;
+                    height: 14px;
+                }
+            }
+            &-bcg{
+                width: 606px;
+                height: 552px;
+                background: url('./image/demo-bcg.png') no-repeat;
+                background-size: 606px 552px;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+            }
+            &-left{
+                margin: 36px 0 0 32px ;
+                &-title{
+                    font-size: 26px;
+                    font-weight: 600;
+                    color: #141C28;
+                    line-height: 40px;
+                }
+                &-subtitle{
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #6F7886;
+                    line-height: 22px;
+                    margin-top: 4px;
+                }
+            }
+            &-right{
+                z-index: 2;
+                &-form{
+                    width: 420px;
+                    margin-left: 77px;
+                    &-code{
+                        margin-top: 16px;
+                        display: flex;
+                        &-left{
+                            width: 309px;
+                        }
+                        img{
+                            width: 100px;
+                            height: 34px;
+                            cursor: pointer;
+                            margin-left: 10px;
+                            margin-top: 26px;
+                        }
+                    }
+                    &-double{
+                        display: flex;
+                        margin-top: 40px;
+                        &-left{
+                            margin-right: 10px;
+                        }
+                    }
+                    &-item{
+                        width: 420px;
+                        box-sizing: border-box !important;
+                        margin-top: 16px;
+                        position: relative;
+                        &:nth-of-type(1){
+                            margin-top: 40px;
+                        }
+                        &-module-errmsg{
+                            position: absolute;
+                            top: 66px;
+                            left: 12px;
+                            font-size: 12px;
+                            font-weight: 400;
+                            color: #F05E5E;
+                            line-height: 18px;
+                        }
+                        &-module{
+                            margin-bottom: 11px;
+                            font-size: 14px;
+                            line-height: 22px;
+                            font-weight: 600;
+                            color: #3F4755;
+                            .required {
+                                color: #F05E5E;
+                                font-size: 14px;
+                                vertical-align: middle;
+                            }
+                        }
+                        &-modules{
+                            margin-top: 4px;
+                            display: flex;
+                            &-item{
+                                cursor: pointer;
+                                box-sizing: border-box !important;
+                                height: 32px;
+                                width: 94px;
+                                background: #FFFFFF;
+                                border-radius: 4px;
+                                border: 1px solid #E9ECF0;
+                                line-height: 30px;
+                                text-align: center;
+                                color: #3F4755;
+                                font-size: 14px;
+                                font-weight: 400;
+                                &:nth-of-type(1){
+                                    width: 107px;
+                                }
+                                &:not(:nth-of-type(1)){
+                                    margin-left: 10px;
+                                }
+                                &:hover{
+                                    background: #E9F1FF;
+                                }
+                                &-active{
+                                    background: #E9F1FF;
+                                    color:#2879FF;
+                                    border: none;
+                                    line-height: 32px;
+                                }
+                            }
+                        }
+                    }
+                    &-submit{
+                        cursor: pointer;
+                        margin-top: 24px;
+                        box-sizing: border-box !important;
+                        width: 420px;
+                        height: 36px;
+                        line-height: 36px;
+                        text-align: center;
+                        background: #2879FF;
+                        border-radius: 4px;
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #FFFFFF;
+                        &:hover{
+                            background: #5C8EFF;
+                        }
+                    }
+                }
+            }   
+        }
+    }
+    &-h5{
+        z-index: 99999;
+        width: 100vw;
+        height: 100vh;
+        text-align: center;
+        padding-bottom: px2rem(60);
+        &-logo{
+            margin-top: px2rem(29);
+        }
+        &-title{
+            margin: px2rem(8) 0;
+            font-size: px2rem(24);
+            font-weight: 600;
+            color: #141C28;
+            line-height: px2rem(26);
+        }
+        &-subtitle{
+            font-size: px2rem(12);
+            font-weight: 400;
+            color: #6F7886;
+            line-height: px2rem(18);
+        }
+        &-form{
+            margin: 0 auto;
+            margin-top: px2rem(20);
+            width: px2rem(335);
+            text-align: left;
+            &-code{
+                margin-top: px2rem(20);
+                display: flex;
+                &-left{
+                    width: px2rem(225);
+                }
+                img{
+                    width: 100px;
+                    height: 34px;
+                    cursor: pointer;
+                    margin-left: 10px;
+                    margin-top: 26px;
+                }
+            }
+            &-item{
+                &:not(:nth-of-type(1)){
+                    margin-top: px2rem(16);
+                }
+                
+                &-module{
+                    font-size: px2rem(14);
+                    font-weight: 600;
+                    color: #3F4755;
+                    line-height: px2rem(22);
+                    .required {
+                        color: #F05E5E;
+                        font-size: 14px;
+                        margin-left:4px;
+                        vertical-align: middle;
+                    }
+                }
+                &-modules{
+                    margin-top: px2rem(8);
+                    display: flex;
+                    &-item{
+                        cursor: pointer;
+                        box-sizing: border-box !important;
+                        height: px2rem(32);
+                        width: px2rem(106);
+                        background: #FFFFFF;
+                        border-radius: px2rem(4);
+                        border: 1px solid #E9ECF0;
+                        line-height: px2rem(30);
+                        text-align: center;
+                        color: #3F4755;
+                        font-size: px2rem(14);
+                        font-weight: 400;
+                        &:not(:nth-of-type(1)){
+                            margin-left: px2rem(9);
+                        }
+                        &:hover{
+                            background: #E9F1FF;
+                        }
+                        &-active{
+                            background: #E9F1FF;
+                            color:#2879FF;
+                            border: none;
+                            line-height: 32px;
+                        }
+                    }
+                }
+                .else{
+                    margin-left: 0;
+                    margin-top: 8px;
+                    margin-bottom: px2rem(64);
+                }
+            }
+            &-submit{
+                width: px2rem(343);
+                height: px2rem(44);
+                background: linear-gradient(90deg, #4E90FF 0%, #2879FF 100%);
+                border-radius: px2rem(22);
+                font-size: px2rem(16);
+                font-weight: 400;
+                color: #FFFFFF;
+                line-height: px2rem(44);
+                letter-spacing: 5px;
+                text-align: center;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                &-bck{
+                    width: 375px;
+                    height: 64px;
+                    background: #FFFFFF;
+                    box-shadow: 0px -2px 8px 0px rgba(127, 145, 180, 0.1);
+                    position: fixed;
+                    bottom: 0;
+                    left: 0;
+                }
+            }
+        }
+    }
+}

package/src/pages/appointment-demo/input/index.js

@@ -0,0 +1,119 @@
+import React, { Component } from "react"
+import "./index.scss"
+
+export default class InputForm extends Component {
+  static defaultProps = {
+    className:'',//覆盖样式
+    label: "", //文本名称
+    value: "", //输入框 的value
+    isError: false, // 校验状态
+    errMsg: "", //错误信息
+    info: "", //提示信息
+    type: "text",
+    required: false, //是否渲染 *
+    style: {},
+    placeholder: "",
+    maxLength: "",
+    id: "",
+    autoComplete: "off", //是否关闭自动完成事件
+    onChange(val) { },
+    onBlur(val) { },
+    onFocus(val) { },
+    onKeyPress(val) { },
+  }
+  constructor(props) {
+    super(props)
+    this.state = {
+      focus: false,
+    }
+  }
+
+  focus = () => this.refs.inputRef.focus()
+
+  onChange = e => {
+    this.props.onChange(e.target.value.trim())
+  }
+
+  handleFocus = e => {
+    this.setState({
+      focus: true,
+    })
+    this.props.onFocus(e.target.value.trim())
+  }
+
+  handleBlur = e => {
+    this.setState({
+      focus: false,
+    })
+    this.props.onBlur(e.target.value.trim())
+  }
+
+  handleKeyPress = e => {
+    if (e.key === "Enter") {
+      this.props.onKeyPress && this.props.onKeyPress()
+    }
+  }
+  render() {
+    const { errMsg } = this.props
+    const styleSheet = {
+      input: {
+        height: 32,
+        width: "100%",
+        borderColor: this.props.isError ? "#F05E5E" : "#2879FF",
+      },
+      tips: {
+        fontSize: 12,
+        color: "#8f9ca6",
+        height: 20,
+        lineHeight: "20px",
+        marginTop: 4,
+        marginLeft: 8,
+      },
+      errMsg: {
+        fontSize: 12,
+        color: "#F05E5E",
+        height: 20,
+        lineHeight: "20px",
+        marginTop: 4,
+        marginLeft: 8,
+      },
+    }
+
+    const inputProps = {
+      value: this.props.value,
+      onChange: this.onChange,
+      placeholder: this.props.placeholder,
+      type: this.props.type,
+      className: this.props.errMsg ? "input-demo-box-empty" : this.state.focus ? "input-demo-box-focus" : "",
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onKeyPress: this.handleKeyPress,
+      maxLength: this.props.maxlength,
+      autoComplete: this.props.type == "password" ? "new-password" : this.props.autoComplete,
+      id: this.props.id,
+    }
+
+    return (
+      <div className={`${this.props.className} input-demo-box`} style={this.props.style}>
+        {this.props.label && (
+          <label className="input-demo-box-label" htmlFor={this.props.id}>
+            {this.props.label}
+            {this.props.required && (
+              <span className="required">*</span>
+            )}
+          </label>
+        )}
+        <input ref="inputRef" {...inputProps} />
+        {this.props.info && !this.props.errMsg ? (
+          <span className="input-demo-box-info input-demo-box-msg">
+            {this.props.info}
+          </span>
+        ) : (
+          <span className="input-demo-box-error input-demo-box-msg">
+            {this.props.errMsg}
+          </span>
+        )}
+      </div>
+    )
+  }
+}

package/src/pages/appointment-demo/input/index.scss

@@ -0,0 +1,64 @@
+$error-color: #F05E5E;
+.input-demo-box {
+    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+    position: relative;
+    .required {
+        color: $error-color;
+        font-size: 14px;
+        margin-left:4px;
+        vertical-align: middle;
+    }
+    .input-demo-box-label {
+        position: relative;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 22px;
+        color: #3F4755;
+        display: inline-block;
+        margin-bottom: 4px;
+    }
+    input {
+        border: 1px solid #E9ECF0;
+        border-radius: 4px;
+        height: 34px;
+        box-sizing: border-box !important;
+        font-size: 14px;
+        color: #3F4755;
+        outline:none;
+        padding: 0 10px;
+        width: 100%;
+        transition: border 0.3s;
+        -moz-transition: border 0.3s; /* Firefox 4 */
+        -webkit-transition: border 0.3s; /* Safari and Chrome */
+        -o-transition: border 0.3s; /* Opera */
+
+        &:hover {
+            border: 1px solid #2879ff;
+        }
+    }
+    
+    input::-webkit-input-placeholder, .inputHead {
+        color: #BFC7D5;
+    }
+    .input-demo-box-focus {
+        border: 1px solid #2879FF !important;
+    }
+    .input-demo-box-empty {
+        border: 1px solid $error-color !important;
+    }
+    .input-demo-box-error {
+        color: $error-color;
+    }
+    .input-demo-box-info {
+        color: #8d979e;
+    }
+    .input-demo-box-msg {
+        font-size: 12px;
+        margin-top: 2px;
+        padding-left: 8px;
+        position: absolute;
+        bottom: -20px;
+        line-height: 20px;
+        left: 0;
+    }
+}

package/src/pages/appointment-demo/popup/index.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import RcTrigger from '@titaui/rc-trigger';
+import placement from './placement';
+
+import './rc-trigger.scss';
+import './index.scss';
+
+const preCls = 'titaui-popup';
+
+export default forwardRef((props, ref) => {
+  const {
+    mask = true,
+    destroyPopupOnHide = true,
+    action = ['click'],
+    popupPlacement = "bottomRight",
+    builtinPlacements = placement,
+    popupVisible = false,
+    zIndex = 9999999,
+    popupAlign =  {
+      offset: [0, 0],
+      overflow: { adjustX: true, adjustY: true },
+      targetOffset: [0, 0],
+    },
+    ...restProps
+  } = props;
+
+  // 内部控制状态
+  const [visible, setVisible] = useState(popupVisible);
+
+  // 外部控制显示隐藏时，内部改变状态
+  useEffect(() => {
+    setVisible(popupVisible);
+  }, [popupVisible])
+
+  // 提供外部调用open&close，使用ref的方式调用
+  useImperativeHandle(ref, () => ({
+    open: () => setVisible(true),
+    close: () => setVisible(false)
+  }))
+
+  return <RcTrigger
+    mask={mask}
+    action={action}
+    popupVisible={visible}
+    popupStyle={{ zIndex }}
+    popupClassName={preCls}
+    popupPlacement={popupPlacement}
+    builtinPlacements={builtinPlacements}
+    destroyPopupOnHide={destroyPopupOnHide}
+    onPopupVisibleChange={visible => {
+      setVisible(visible);
+    }}
+    popupAlign={popupAlign}
+    {...restProps}
+  />
+})

package/src/pages/appointment-demo/popup/index.scss

@@ -0,0 +1,6 @@
+.titaui-popup {
+  display: inline-block;
+  &.rc-trigger-popup-hidden {
+    display: none !important;
+  }
+}