@titaui/pc 1.7.49 → 1.7.53

package/src/components/photo-card/images/user-role.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="89px" height="20px" viewBox="0 0 89 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 7备份 2</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#9EC2FF" offset="0%"></stop>
+            <stop stop-color="#76A9FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="-2.48949813e-15%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#2879FF" offset="0%"></stop>
+            <stop stop-color="#0E69FE" offset="100%"></stop>
+        </linearGradient>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="36.4793396%" id="radialGradient-3">
+            <stop stop-color="#2879FF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="主页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="OKR-其他交互" transform="translate(-190.000000, -1847.000000)">
+            <g id="风险预警" transform="translate(96.000000, 1653.000000)">
+                <g id="编组-7备份-2" transform="translate(94.000000, 194.000000)">
+                    <rect id="矩形" fill="#2879FF" x="4" y="1" width="85" height="18" rx="9"></rect>
+                    <g id="编组-25">
+                        <polygon id="多边形" fill="url(#linearGradient-1)" points="10 0 18.660254 5 18.660254 15 10 20 1.33974596 15 1.33974596 5"></polygon>
+                        <polygon id="多边形" fill="url(#linearGradient-2)" points="10 1.81818182 17.2168784 5.90909091 17.2168784 14.0909091 10 18.1818182 2.78312164 14.0909091 2.78312164 5.90909091"></polygon>
+                        <g id="设置" transform="translate(5.500000, 5.500000)" fill-rule="nonzero">
+                            <path d="M8.26875,4.5 C8.26875,3.99375 8.55,3.54375 9,3.375 C8.775,2.5875 8.325,1.85625 7.7625,1.29375 C7.36875,1.575 6.80625,1.63125 6.35625,1.40625 C5.90625,1.125 5.68125,0.675 5.7375,0.16875 C5.34375,0.05625 4.89375,0 4.5,0 C4.05,0 3.65625,0.05625 3.2625,0.16875 C3.31875,0.61875 3.09375,1.125 2.64375,1.40625 C2.19375,1.6875 1.63125,1.63125 1.2375,1.29375 C0.675,1.85625 0.225,2.5875 0,3.375 C0.45,3.54375 0.73125,3.99375 0.73125,4.5 C0.73125,5.00625 0.45,5.45625 0,5.625 C0.225,6.4125 0.675,7.14375 1.2375,7.70625 C1.63125,7.425 2.19375,7.36875 2.64375,7.59375 C3.09375,7.875 3.31875,8.325 3.2625,8.83125 C3.65625,8.94375 4.10625,9 4.5,9 C4.95,9 5.34375,8.94375 5.7375,8.83125 C5.68125,8.38125 5.90625,7.875 6.35625,7.59375 C6.80625,7.3125 7.36875,7.36875 7.7625,7.70625 C8.325,7.14375 8.775,6.4125 9,5.625 C8.55,5.45625 8.26875,5.00625 8.26875,4.5 L8.26875,4.5 Z M4.5,6.35625 C3.43125,6.35625 2.5875,5.5125 2.5875,4.5 C2.5875,3.4875 3.43125,2.64375 4.5,2.64375 C5.56875,2.64375 6.4125,3.4875 6.4125,4.5 C6.4125,5.5125 5.56875,6.35625 4.5,6.35625 Z" id="形状" fill="url(#radialGradient-3)"></path>
+                            <path d="M4.5,5.625 C5.12132034,5.625 5.625,5.12132034 5.625,4.5 C5.625,3.87867966 5.12132034,3.375 4.5,3.375 C3.87867966,3.375 3.375,3.87867966 3.375,4.5 C3.375,5.12132034 3.87867966,5.625 4.5,5.625 Z" id="路径" fill="#FFFFFF"></path>
+                        </g>
+                    </g>
+                    <text id="目标管理员" opacity="0.9" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="18" fill="#FFFFFF">
+                        <tspan x="23" y="14">目标管理员</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/photo-card/index.scss

@@ -0,0 +1,91 @@
+.titaui-photo-card-img {
+  display: flex;
+  flex-direction: row;
+  height: 36px;
+  align-items: center;
+  cursor: pointer;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
+    sans-serif, PingFang SC, Microsoft YaHei;
+  .titaui-pc-avator-container {
+    display: inline-flex;
+  }
+  &__name {
+    height: 28px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #3f4755;
+    line-height: 28px;
+    margin-left: 8px;
+  }
+  &__img {
+    margin-left: 7px;
+    cursor: pointer;
+    font-size: 20px;
+    color: #89919f;
+    &:hover {
+      color: #2879ff;
+    }
+  }
+  &__card {
+    &-enter {
+      opacity: 0;
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupInLT;
+        animation-play-state: running;
+      }
+    }
+    &-appear {
+      opacity: 0;
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupInLT;
+        animation-play-state: running;
+      }
+    }
+    &-leave {
+      animation-duration: 0.1s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupOutLT;
+        animation-play-state: running;
+      }
+    }
+  }
+}
+
+@keyframes titaPopupInLT {
+  0% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scale(0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes titaPopupOutLT {
+  0% {
+    opacity: 1;
+    transform-origin: 0% 0%;
+    transform: scale(1, 1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 0% 0%;
+    transform: scale(0, 0);
+  }
+}

package/src/components/photo-card/index.tsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Popup from '../popup';
+import TooltipText from '../tooltip/tooltip-text';
+import Tooltip from '../tooltip';
+import ConditionRender from '../condition-render';
+import Avatar from '../../components/avatar';
+import { getUserInfo } from '../../utils/bs-global';
+import Card from './components/card';
+import {
+  getAttentionData,
+  postAttention,
+  delAttention,
+  getOtherUserInfo,
+} from './request.apis';
+import Attention from './images/attention.svg';
+import './index.scss';
+
+const prefixCls = 'titaui-photo-card-img';
+const popupAlign = {
+  offset: [-40, -36],
+  overflow: { adjustX: true, adjustY: true },
+  targetOffset: [0, 0],
+};
+const userownInfo = getUserInfo();
+interface IProps {
+  userId: number;
+  isNameVisible?: boolean;
+}
+
+const PhotoCard = (props: IProps) => {
+  const { userId, isNameVisible = true } = props;
+
+  const [userInfo, setUserInfo] = useState<any>();
+  const [isAttention, setIsAttention] = useState(false);
+
+  const handleAttention = () => {
+    if (isAttention) {
+      delAttention(userId);
+    } else {
+      postAttention(userId);
+    }
+    setIsAttention(!isAttention);
+  };
+
+  const handleClickAttention = (isattention) => {
+    setIsAttention(isattention);
+  };
+
+  useEffect(() => {
+    getOtherUserInfo(userId).then((res) => {
+      if (res.Code === 1) {
+        setUserInfo(res.Data);
+      }
+      getAttentionData(userId).then((res) => {
+        if (res.Code === 1) {
+          res.Data.followerUsers.forEach((item) => {
+            if (item.userId === userownInfo.Id) {
+              setIsAttention(true);
+            }
+          });
+        }
+      });
+    });
+    return () => {
+      setIsAttention(false);
+    };
+  }, [userId]);
+
+  if (!userInfo) return null;
+  return (
+    <div className={classNames(`${prefixCls}`)}>
+      <Popup
+        popup={
+          <Card
+            userInfo={userInfo}
+            userownInfo={userownInfo}
+            handleClickAttention={handleClickAttention}
+            userId={userId}
+          />
+        }
+        action={['hover']}
+        mask={false}
+        popupTransitionName={`${prefixCls}__card`}
+        popupAlign={popupAlign}
+        destroyPopupOnHide={true}
+      >
+        {/* 小头像 */}
+        <Avatar
+          userId={userInfo.userId}
+          name={userInfo.name}
+          color={userInfo.avatar.color}
+          src={userInfo.avatar.big}
+          size={{ width: 36, textNum: 1, fontSize: 16 }}
+        />
+      </Popup>
+      <ConditionRender condition={isNameVisible}>
+        <div className={classNames(`${prefixCls}__name`)}>
+          <TooltipText
+            text={userInfo.name}
+            maxWidth={160}
+            mouseEnterDelay={0.8}
+          />
+        </div>
+      </ConditionRender>
+      <ConditionRender
+        condition={isAttention === true && userId !== userownInfo.Id}
+      >
+        <Tooltip overlay="取消关注" placement="top">
+          <img
+            src={Attention}
+            className={classNames(`${prefixCls}__img`)}
+            onClick={() => handleAttention()}
+          />
+        </Tooltip>
+      </ConditionRender>
+      <ConditionRender
+        condition={isAttention === false && userId !== userownInfo.Id}
+      >
+        <Tooltip overlay="关注" placement="top">
+          <i
+            className={classNames(`${prefixCls}__img`, 'tu-icon-guanzhu-x')}
+            onClick={() => handleAttention()}
+          />
+        </Tooltip>
+      </ConditionRender>
+    </div>
+  );
+};
+export default PhotoCard;

package/src/components/photo-card/request.apis.ts

@@ -0,0 +1,21 @@
+import { rget,rpost } from "../../utils/request"
+
+export const getAttentionData = (userId) => {
+  return rget("v1")(`follow/getFollowerList?toUserId=${userId}`)
+}
+
+export const getVisitData = (userId) => {
+  return rget("v1")(`okr/okrCyclePageVisitor?toUserId=${userId}`)
+}
+
+export const postAttention = (userId) => {
+  return rpost("v1")(`follow/addFollower?followerId=${userId}`);
+}
+
+export const delAttention = (userId) => {
+  return rpost("v1")(`follow/delFollower?followerId=${userId}`);
+}
+
+export const getOtherUserInfo = (userId) => {
+  return rget("v2")(`user/GetById?toUserid=${userId}`);
+}

package/src/components/photo-card/types/image.d.ts

@@ -0,0 +1 @@
+declare module "*.png"

package/src/components/photo-card/types/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/components/point-demo/drop-down-box/index.js

@@ -0,0 +1,106 @@
+import React, { FC, useState, useRef, useMemo, useCallback, useEffect } from "react";
+import Popup from "../popup";
+import SuffixIcon from "../image/down.svg"
+import "./index.scss";
+
+const SelectLayer = ({ style,errMsg,className,title,required=false, initValue, onChangeClassify, items, initText = '暂无', popupProps, renderPrefixIcon, renderSuffixIcon, renderPrefixIconClass, renderSuffixIconClass, textClass, forceRenderText = false }) => {
+  const [visible, setVisible] = useState(false);
+  const [selectItem, setSelectItem] = useState(items.find(item => item.value === initValue));
+  
+  const popupRef = useRef(document.createElement('div'));
+
+  const handleSelectOkrClassify = useCallback(
+    (key) => {
+      
+      setVisible(false);
+      setSelectItem(key);
+      onChangeClassify && onChangeClassify(key);
+    },
+    [onChangeClassify]
+  );
+
+  useEffect(() => {
+    setSelectItem(items.find(item => item.value === initValue));
+  }, [initValue])
+
+  const renderSelection = useMemo(() => {
+    return (
+      <div className="drop-down__layer-select-wrapper">
+        {items.map((item, index) => {
+          return (
+            <div
+              key={index}
+              onClick={(e) => handleSelectOkrClassify(item)}
+              className={`drop-down__layer-select-text ${
+                selectItem && item.value === selectItem.value
+                  ? "drop-down__layer-select-text--active"
+                  : ""
+              }`}
+            >
+              {item.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }, [selectItem]);
+
+  useEffect(() => {
+    setSelectItem(items.find(item => item.value === initValue))
+  }, [initValue])
+
+  const handleClickText = useCallback(() => {
+    setVisible(!visible)
+  }, [visible])
+
+  const touchStart = (e) =>{
+    e.persist()
+    e.preventDefault()
+    setVisible(!visible)
+  }
+
+
+  return (
+    <div className={`${className}  base-info-drop-down__layer`}>
+      {/* @ts-ignore */}
+      <div className='base-info-drop-down__layer-container' style={style} ref={popupRef}>
+        {title}
+        <span className="required">*</span>
+      </div>
+      {/* @ts-ignore */}
+      <Popup
+        popupVisible={visible}
+        action={["click"]}
+        destroyPopupOnHide={true}
+        popup={renderSelection}
+        popupAlign={{
+          points: ["tl", "bl"],
+          offset: [0, 4],
+        }}
+        mask={false}
+        getPopupContainer={() => popupRef.current}
+        popupStyle={{ width: "100%" }}
+        {...popupProps}
+        onPopupVisibleChange={(visible ) => setVisible(visible)}
+      >
+        <div
+          className={`drop-down__layer-text ${visible ? 'drop-down__layer-text--focus' : ''}`}
+          onClick={handleClickText}
+          // onTouchStart={()=>{}}
+          
+          onTouchEnd={touchStart}
+        >
+          {renderPrefixIcon && <span className={renderPrefixIconClass}>{renderPrefixIcon[selectItem ? selectItem.value : 0]}</span>}
+          <span style={selectItem&&selectItem.value>0?{color:'#3F4755'}:{}} className={textClass}>{forceRenderText && initText ? initText : selectItem ? selectItem.label : initText}</span>
+          {renderSuffixIcon && <img className={'drop-down__layer-text-suffixIcon'} src={SuffixIcon} ></img>}
+        </div>
+      </Popup>
+      <div className='base-info-drop-down__layer-errmsg' >
+        {errMsg&&errMsg}
+      </div>
+    </div>
+    
+  );
+};
+
+export default SelectLayer;

package/src/components/point-demo/drop-down-box/index.scss

@@ -0,0 +1,90 @@
+$fontFamily: -apple-system,  Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+
+.base-info-drop-down__layer {
+  font-family: $fontFamily;
+  position: relative;
+  .base-info-drop-down__layer-container {
+    position: relative;
+    font-size: 14px;
+    font-weight: 600;
+    color: #3F4755;
+    line-height: 22px;
+    margin-bottom: 4px;
+    .required {
+      color: #F05E5E;
+      font-size: 14px;
+      margin-left:4px;
+      vertical-align: middle;
+  }
+  }
+  .base-info-drop-down__layer-errmsg{
+    position: absolute;
+    top: 66px;
+    left: 12px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #F05E5E;
+    line-height: 18px;
+  }
+  .drop-down__layer-text {
+    font-size: 14px;
+    color: #BFC7D5;
+    line-height: 20px;
+    font-weight: 400;
+    padding-left: 10px;
+    border-radius: 4px;
+    border: 1px solid  #E9ECF0;
+    height: 36px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &:hover {
+      border: 1px solid #2879FF;
+      cursor: pointer;
+    }
+    &-suffixIcon{
+      width: 10px;
+      height: 10px;
+      margin-right: 12px;
+    }
+  }
+  .drop-down__layer-text--focus {
+    border: 1px solid #2879FF;
+  }
+  .drop-down__layer-select-wrapper {
+    display: inline-block;
+    box-sizing: border-box;
+    background: #ffffff;
+    box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+    border: 1px solid #f0f2f5;
+    position: relative;
+    border-radius: 4px;
+    padding: 16px 0;
+    font-weight: 400;
+    width: 100%;
+    max-height: 196px;
+    overflow-y: auto;
+    margin-top: -4px;
+    .drop-down__layer-select-text {
+      font-size: 14px;
+      color: #3f4755;
+      line-height: 22px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      padding-left: 10px;
+      &:hover {
+        cursor: pointer;
+        color: #2879FF;
+        // background-color: rgba(240, 242, 245, 0.3);
+        background: #F7F8FA;
+      }
+    }
+    .drop-down__layer-select-text--active {
+      color: #2879ff;
+      background: #F7F8FA;
+    }
+  }
+}

package/src/components/point-demo/image/down.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>下箭头</title>
+    <g id="绩效考核" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="绩效考核弹窗" transform="translate(-714.000000, -355.000000)" fill-rule="nonzero">
+            <g id="编组-9" transform="translate(220.000000, 72.000000)">
+                <g id="下箭头" transform="translate(494.000000, 283.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="12" height="12"></rect>
+                    <path d="M6.7155,8.8125 L10.33425,4.071 C10.5419684,3.7988128 10.5772501,3.43233816 10.4252743,3.125522 C10.2732984,2.81870584 9.96039265,2.62469962 9.618,2.62499965 L2.381625,2.62499965 C2.03936752,2.62499965 1.72672265,2.81910016 1.57493463,3.12585834 C1.42314661,3.43261652 1.45848879,3.79892025 1.666125,4.071 L5.284875,8.8125 C5.45513546,9.0354783 5.71963814,9.16630587 6.0001875,9.16630587 C6.28073686,9.16630587 6.54523954,9.0354783 6.7155,8.8125 L6.7155,8.8125 Z" id="路径" fill="#3F4755"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/point-demo/image/icon-canceled.svg

@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+<title></title>
+<g id="icomoon-ignore">
+</g>
+<path d="M508.013 451.081l300.592-300.592c16.242-16.242 42.501-16.48 59.034-0.535 16.152 15.576 16.618 41.297 1.041 57.449-0.17 0.177-0.342 0.352-0.516 0.525l-301.652 301.652 314.194 314.194c14.331 14.331 14.331 37.567 0 51.898-0.409 0.409-0.827 0.807-1.254 1.196-15.93 14.492-40.435 13.913-55.664-1.315l-311.625-311.625-309.575 309.575c-16.242 16.242-42.501 16.48-59.034 0.535-16.152-15.576-16.618-41.297-1.041-57.449 0.17-0.177 0.342-0.352 0.516-0.525l310.635-310.635-299.551-299.551c-14.331-14.331-14.331-37.567 0-51.898 0.409-0.409 0.827-0.807 1.254-1.196 15.93-14.492 40.435-13.913 55.664 1.315l296.982 296.982z"></path>
+</svg>

package/src/components/point-demo/image/logo.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="66px" height="16px" viewBox="0 0 66 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo</title>
+    <defs>
+        <polygon id="path-1" points="0.0333705263 0.0151168 1.16463368 0.0151168 1.16463368 0.64 0.0333705263 0.64"></polygon>
+        <polygon id="path-3" points="0.00320699491 0.103927652 24.8235323 0.103927652 24.8235323 8.32 0.00320699491 8.32"></polygon>
+        <polygon id="path-5" points="0.008208583 0.00504106667 2.65419401 0.00504106667 2.65419401 10.88 0.008208583 10.88"></polygon>
+        <polygon id="path-7" points="0.04854 0.00409698462 13.04434 0.00409698462 13.04434 12.16 0.04854 12.16"></polygon>
+        <polygon id="path-9" points="0.0428897833 0.160605659 10.4038681 0.160605659 10.4038681 15.36 0.0428897833 15.36"></polygon>
+        <polygon id="path-11" points="0 0.160605659 10.3609579 0.160605659 10.3609579 15.36 0 15.36"></polygon>
+    </defs>
+    <g id="-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="飞书-H5预约" transform="translate(-155.000000, -84.000000)">
+            <g id="logo" transform="translate(155.000000, 84.000000)">
+                <g id="编组" transform="translate(40.989474, 14.720000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Clip-2"></g>
+                    <path d="M1.16463368,0.3274368 C1.16463368,0.5002368 0.911286316,0.6400128 0.598886316,0.6400128 C0.286486316,0.6400128 0.0333705263,0.5002368 0.0333705263,0.3274368 C0.0333705263,0.1550208 0.286486316,0.0151168 0.598886316,0.0151168 C0.911286316,0.0151168 1.16463368,0.1550208 1.16463368,0.3274368" id="Fill-1" fill="#2879FF" mask="url(#mask-2)"></path>
+                </g>
+                <g id="编组" transform="translate(40.989474, 7.040000)">
+                    <mask id="mask-4" fill="white">
+                        <use xlink:href="#path-3"></use>
+                    </mask>
+                    <g id="Clip-4"></g>
+                    <path d="M22.7109496,0.103927652 L5.44218968,0.103927652 C1.88464401,0.103927652 0.00320699491,1.76431026 0.00320699491,4.90293983 L0.00320699491,5.7772633 L0.00320699491,6.6087207 C0.00320699491,6.76589635 0.145000543,6.89340939 0.31987253,6.89340939 C0.494744516,6.89340939 0.636538065,6.76589635 0.636538065,6.6087207 L0.636538065,5.7772633 L0.636538065,4.90293983 C0.636538065,2.09602504 2.25334757,0.672400696 5.44218968,0.672400696 L22.7109496,0.672400696 C23.5258087,0.672400696 24.1895961,1.2678233 24.1895961,1.99925983 L24.1895961,6.42531896 C24.1895961,7.15693635 23.5258087,7.75217809 22.7109496,7.75217809 L5.94744265,7.75217809 L1.85902839,7.75217809 C1.68375301,7.75217809 1.54236285,7.87878678 1.54236285,8.03596243 C1.54236285,8.19349983 1.68375301,8.32010852 1.85902839,8.32010852 L5.94744265,8.32010852 L22.7109496,8.32010852 C23.8755527,8.32010852 24.8235323,7.47074504 24.8235323,6.42531896 L24.8235323,1.99925983 C24.8235323,0.954014609 23.8755527,0.103927652 22.7109496,0.103927652" id="Fill-3" fill="#2879FF" mask="url(#mask-4)"></path>
+                </g>
+                <path d="M63.3162642,8.83514011 C62.9463658,8.50263551 62.4595409,8.32 61.9459496,8.32 C61.4321571,8.32 60.9453321,8.50319403 60.57483,8.83514011 C60.5283411,8.87740134 60.4834622,8.92152429 60.4420046,8.96657811 C60.400547,8.92152429 60.3562719,8.87740134 60.3093806,8.83514011 C59.9386771,8.50263551 59.4518522,8.32 58.9390659,8.32 C58.4244684,8.32 57.9376434,8.50319403 57.567745,8.83514011 C57.1813441,9.1821662 56.9684211,9.64610879 56.9684211,10.1424455 L56.9684211,13.640446 C56.9684211,13.8830292 57.1813441,14.08 57.443976,14.08 C57.7054004,14.08 57.9183234,13.8830292 57.9183234,13.640446 L57.9183234,10.1424455 C57.9183234,9.88589935 58.0290112,9.6453641 58.2294567,9.46589353 C58.4210471,9.2936837 58.6726103,9.19836323 58.9390659,9.19836323 C59.2043141,9.19836323 59.4560785,9.2936837 59.6476689,9.46589353 C59.8481144,9.6453641 59.9579972,9.88589935 59.9579972,10.1424455 L59.9579972,13.640446 C59.9579972,13.8830292 60.1711215,14.08 60.4331496,14.08 C60.4365709,14.08 60.4393884,14.0792553 60.4420046,14.0792553 C60.4448221,14.0792553 60.4476397,14.08 60.4510609,14.08 C60.7130891,14.08 60.9260121,13.8830292 60.9260121,13.640446 L60.9260121,10.1424455 C60.9260121,9.88589935 61.0366999,9.6453641 61.2371454,9.46589353 C61.4281321,9.2936837 61.6805002,9.19836323 61.9459496,9.19836323 C62.211399,9.19836323 62.4629621,9.2936837 62.6545526,9.46589353 C62.8551994,9.6453641 62.9656859,9.88589935 62.9656859,10.1424455 L62.9656859,13.640446 C62.9656859,13.8830292 63.1786089,14.08 63.4408383,14.08 C63.7026652,14.08 63.9157895,13.8830292 63.9157895,13.640446 L63.9157895,10.1424455 C63.9157895,9.64610879 63.7026652,9.1821662 63.3162642,8.83514011" id="Fill-5" fill="#2879FF"></path>
+                <path d="M53.1473684,9.19836323 C51.9501635,9.19836323 50.9750974,10.0962746 50.9750974,11.1997207 C50.9750974,12.3037254 51.9501635,13.2018229 53.1473684,13.2018229 C54.3459882,13.2018229 55.3202458,12.3037254 55.3202458,11.1997207 C55.3202458,10.0962746 54.3459882,9.19836323 53.1473684,9.19836323 M53.1473684,14.08 C51.4238219,14.08 50.0210526,12.7877747 50.0210526,11.1997207 C50.0210526,9.61203917 51.4238219,8.32 53.1473684,8.32 C54.8717235,8.32 56.2736842,9.61203917 56.2736842,11.1997207 C56.2736842,12.7877747 54.8717235,14.08 53.1473684,14.08" id="Fill-7" fill="#2879FF"></path>
+                <path d="M48.4016809,12.1467804 C48.1519794,12.0041583 47.8742541,12.1875562 47.7926952,12.3074631 C47.4136978,12.8613809 46.7734027,13.2017378 46.0629516,13.2017378 C44.9182286,13.2017378 43.9860998,12.3035531 43.9860998,11.2001862 C43.9860998,10.0964469 44.9182286,9.19826222 46.0629516,9.19826222 C46.7734027,9.19826222 47.4136978,9.53880528 47.7926952,10.0929092 C47.8742541,10.2122576 48.1519794,10.3962141 48.4016809,10.2532196 C48.6884898,10.0895578 48.6685832,9.77359193 48.5489507,9.5993173 C48.0031634,8.80688906 47.083597,8.32 46.0629516,8.32 C44.4149602,8.32 43.0736842,9.61235066 43.0736842,11.2001862 C43.0736842,12.7876493 44.4149602,14.08 46.0629516,14.08 C47.083597,14.08 48.0031634,13.5931109 48.5489507,12.8003103 C48.6685832,12.6264081 48.6884898,12.3106284 48.4016809,12.1467804" id="Fill-9" fill="#2879FF"></path>
+                <g id="编组" transform="translate(11.810526, 4.480000)">
+                    <mask id="mask-6" fill="white">
+                        <use xlink:href="#path-5"></use>
+                    </mask>
+                    <g id="Clip-12"></g>
+                    <path d="M1.33077377,0.00504106667 C0.600338138,0.00504106667 0.008208583,0.507153067 0.008208583,1.12713173 L0.008208583,9.7580544 C0.008208583,10.3776704 0.600338138,10.8801451 1.33077377,10.8801451 C2.06185069,10.8801451 2.65419401,10.3776704 2.65419401,9.7580544 L2.65419401,1.12713173 C2.65419401,0.507153067 2.06185069,0.00504106667 1.33077377,0.00504106667" id="Fill-11" fill="#2879FF" mask="url(#mask-6)"></path>
+                </g>
+                <path d="M14.5894737,1.5998981 C14.5894737,2.48361251 13.8115719,3.2 12.8522998,3.2 C11.8936912,3.2 11.1157895,2.48361251 11.1157895,1.5998981 C11.1157895,0.715572257 11.8936912,0 12.8522998,0 C13.8115719,0 14.5894737,0.715572257 14.5894737,1.5998981" id="Fill-13" fill="#2879FF"></path>
+                <g id="编组" transform="translate(26.400000, 3.200000)">
+                    <mask id="mask-8" fill="white">
+                        <use xlink:href="#path-7"></use>
+                    </mask>
+                    <g id="Clip-16"></g>
+                    <path d="M6.54634,0.00409698462 C2.96334,0.00409698462 0.04854,2.73130437 0.04854,6.08241329 C0.04854,9.43333514 2.96334,12.1601684 6.54634,12.1601684 C7.28614,12.1601684 8.02274,12.0391296 8.73514,11.8000453 C9.36954,11.5871518 9.69954,10.9338791 9.47174,10.3399099 C9.24414,9.74594068 8.54494,9.43950868 7.91094,9.65071852 C7.46374,9.80056714 7.00434,9.87689452 6.54634,9.87689452 C4.30934,9.87689452 2.48954,8.17449452 2.48954,6.08241329 C2.48954,3.98958375 4.30934,2.28774498 6.54634,2.28774498 C8.78334,2.28774498 10.60314,3.98958375 10.60314,6.08241329 L10.60314,11.018625 C10.60314,11.6492613 11.14974,12.1601684 11.82394,12.1601684 C12.49794,12.1601684 13.04434,11.6492613 13.04434,11.018625 L13.04434,6.08241329 C13.04434,2.73130437 10.12914,0.00409698462 6.54634,0.00409698462" id="Fill-15" fill="#E50012" mask="url(#mask-8)"></path>
+                </g>
+                <g id="编组" transform="translate(15.978947, 0.000000)">
+                    <mask id="mask-10" fill="white">
+                        <use xlink:href="#path-9"></use>
+                    </mask>
+                    <g id="Clip-18"></g>
+                    <path d="M9.13924272,13.0420261 L8.48414675,13.0420261 C5.62836966,13.0420261 4.08094551,12.3856671 4.08094551,8.92329834 L4.08094551,6.63540761 L6.52498885,6.63540761 L7.85520557,6.63540761 C8.55443777,6.63540761 9.1206483,6.11672663 9.1206483,5.47554029 C9.1206483,4.83585249 8.55443777,4.31679688 7.85520557,4.31679688 L6.52498885,4.31679688 L4.08094551,4.31679688 L4.08094551,1.31972371 C4.08094551,0.679099317 3.51432632,0.160605659 2.81611579,0.160605659 C2.11770093,0.160605659 1.55189907,0.679099317 1.55189907,1.31972371 L1.55189907,4.31679688 L1.30833251,4.31679688 C0.608895975,4.31679688 0.0428897833,4.83585249 0.0428897833,5.47554029 C0.0428897833,6.11672663 0.608895975,6.63540761 1.30833251,6.63540761 L1.55189907,6.63540761 L1.55189907,8.92329834 C1.55189907,13.2544437 3.81898885,15.3600749 8.48414675,15.3600749 L9.13924272,15.3600749 C9.83724892,15.3600749 10.4038681,14.8410193 10.4038681,14.2009569 C10.4038681,13.5605198 9.83724892,13.0420261 9.13924272,13.0420261" id="Fill-17" fill="#E50012" mask="url(#mask-10)"></path>
+                </g>
+                <g id="编组">
+                    <mask id="mask-12" fill="white">
+                        <use xlink:href="#path-11"></use>
+                    </mask>
+                    <g id="Clip-20"></g>
+                    <path d="M9.09633251,13.0420261 L8.44123653,13.0420261 C5.58545944,13.0420261 4.03803529,12.3856671 4.03803529,8.92329834 L4.03803529,6.63540761 L6.48207864,6.63540761 L7.81249969,6.63540761 C8.51152755,6.63540761 9.07773808,6.11672663 9.07773808,5.47554029 C9.07773808,4.83585249 8.51152755,4.31679688 7.81249969,4.31679688 L6.48207864,4.31679688 L4.03803529,4.31679688 L4.03803529,1.31972371 C4.03803529,0.679099317 3.4714161,0.160605659 2.77320557,0.160605659 C2.07479071,0.160605659 1.50898885,0.679099317 1.50898885,1.31972371 L1.50898885,4.31679688 L1.26542229,4.31679688 C0.566190093,4.31679688 -2.04334365e-05,4.83585249 -2.04334365e-05,5.47554029 C-2.04334365e-05,6.11672663 0.566190093,6.63540761 1.26542229,6.63540761 L1.50898885,6.63540761 L1.50898885,8.92329834 C1.50898885,13.2544437 3.77607864,15.3600749 8.44123653,15.3600749 L9.09633251,15.3600749 C9.79454303,15.3600749 10.3609579,14.8410193 10.3609579,14.2009569 C10.3609579,13.5605198 9.79454303,13.0420261 9.09633251,13.0420261" id="Fill-19" fill="#2879FF" mask="url(#mask-12)"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>