diff --git a/public/site/css/about.css b/public/site/css/about.css index 0a936f7eb..6a9cfe1df 100644 --- a/public/site/css/about.css +++ b/public/site/css/about.css @@ -1,205 +1,206 @@ /* 头部样式 */ -.about_green_bg{ - background: var(--bg-11-url) top right no-repeat; +.about_green_bg { + background: var(--bg-11-url) top right no-repeat; } -.head{ - background-color: transparent !important; +.head { + background-color: transparent !important; } -.company-ul{ - padding: 32px 0; - margin-top: 32px; - width: 100%; - max-width: 1280px; - background: var(--bg-fa-color); - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); - border-radius: 12px; - display: flex; - align-items: center; - justify-content: space-around; - z-index: 2; +.company-ul { + padding: 32px 0; + margin-top: 32px; + width: 100%; + max-width: 1280px; + background: var(--bg-fa-color); + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: space-around; + z-index: 2; } -.company-ul-item{ - text-align: center; - padding: 0 32px; - width: 362px; +.company-ul-item { + text-align: center; + padding: 0 32px; + width: 362px; } -.company-ul-item:nth-of-type(1),.company-ul-item:nth-of-type(2){ - border-right: 1px solid var(--border-color); +.company-ul-item:nth-of-type(1), +.company-ul-item:nth-of-type(2) { + border-right: 1px solid var(--border-color); } -.company-h2{ - color: var(--text-color); - opacity: 0.5; +.company-h2 { + color: var(--text-color); + opacity: 0.5; } -.company-h6{ - color: var(--txt-gray-color); +.company-h6 { + color: var(--txt-gray-color); } -.company-sup{ - font-weight: 400; - font-size: 14px; - margin-left: 5px; - color: var(--txt-gray-color); - vertical-align: super; +.company-sup { + font-weight: 400; + font-size: 14px; + margin-left: 5px; + color: var(--txt-gray-color); + vertical-align: super; } -.company-profile{ - padding-top: 120px; +.company-profile { + padding-top: 120px; } -.company-profile-con{ - width: 100%; - max-width: 1280px; - margin: 0 auto; +.company-profile-con { + width: 100%; + max-width: 1280px; + margin: 0 auto; } -.company-profile-layout{ - display: flex; - align-items: flex-start; - justify-content: space-between; - padding-bottom: 120px; +.company-profile-layout { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding-bottom: 120px; } -.company-profile-l{ - display: inline-block; - height: auto; - width: 580px; +.company-profile-l { + display: inline-block; + height: auto; + width: 580px; } -.company-profile-r{ - width: 620px; +.company-profile-r { + width: 620px; } -.company-profile-h1{ - position: relative; - color: var(--text-color); - width: fit-content; +.company-profile-h1 { + position: relative; + color: var(--text-color); + width: fit-content; } -.company-profile-arcs{ - display: block; - width: 100%; - position: absolute; - bottom: -28px; - left: 0; +.company-profile-arcs { + display: block; + width: 100%; + position: absolute; + bottom: -28px; + left: 0; } -.company-profile-h6{ - color: var(--txt-gray-color); +.company-profile-h6 { + color: var(--txt-gray-color); } -.company-year,.company-area,.company-size{ - +.company-year, +.company-area, +.company-size { } @keyframes randomize { - from { - content: attr(data-value); /* 使用 data-value 属性作为初始值 */ - } - to { - content: attr(data-random); /* 使用 data-random 属性作为随机值 */ - } + from { + content: attr(data-value); /* 使用 data-value 属性作为初始值 */ + } + to { + content: attr(data-random); /* 使用 data-random 属性作为随机值 */ + } } -.scenario-app{ - position: relative; - padding: 120px 0px; - background-color: var(--bg-fa-color); +.scenario-app { + position: relative; + padding: 120px 0px; + background-color: var(--bg-fa-color); } -.scenario-app-con{ - width: 100%; - max-width: 1280px; - margin: 0 auto; +.scenario-app-con { + width: 100%; + max-width: 1280px; + margin: 0 auto; } -.scenario-app-h1{ - text-align: center; - color: var(--text-color); +.scenario-app-h1 { + text-align: center; + color: var(--text-color); } -.scenario-app-h6{ - color: var(--txt-gray-color); +.scenario-app-h6 { + color: var(--txt-gray-color); } -.scenario-app-ul{ - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; +.scenario-app-ul { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; } -.scenario-app-ul-item{ - padding: 24px; - background: var(--choose-bg-hover-color); - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); - border-radius: 12px; - width: 576px; - height: 225px; - position: relative; - transition: all .3s ease-in-out; +.scenario-app-ul-item { + padding: 24px; + background: var(--choose-bg-hover-color); + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 12px; + width: 576px; + height: 225px; + position: relative; + transition: all 0.3s ease-in-out; } -.scenario-app-ul-item:hover{ - transform: translateY(-16px); +.scenario-app-ul-item:hover { + transform: translateY(-16px); } -.scenario-app-ul-item-svg{ - position: absolute; - top: 0; - right: 0; +.scenario-app-ul-item-svg { + position: absolute; + top: 0; + right: 0; } -.scenario-app-icon-bg{ - display: flex; - justify-content: center; - align-items: center; - width: 32px; - height: 32px; - padding: 16px; - border-radius: 50%; - background-color: var(--txt-theme-color); +.scenario-app-icon-bg { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + padding: 16px; + border-radius: 50%; + background-color: var(--txt-theme-color); } -.scenario-app-icon{ - display: inline-block; - +.scenario-app-icon { + display: inline-block; } -.scenario-app-h5{ - font-weight: 600; - font-size: 20px; - line-height: 25px; - color: var(--txt-191a15-color); +.scenario-app-h5 { + font-weight: 600; + font-size: 20px; + line-height: 25px; + color: var(--txt-191a15-color); } -.from-submit{ - display: inline-block; - width: 100%; +.from-submit { + display: inline-block; + width: 100%; } /* 底部样式 */ -.footer-layut{ - border-top: var(--border-color) solid 1px; +.footer-layout { + border-top: var(--border-color) solid 1px; } /* 弹框样式 */ -.BulletBox{ - position: fixed; - display: none; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - padding: 8px; - background-color: var(--txt-theme-color); - line-height: 20px; - text-align: center; - z-index: 9999; - border: 1px solid transparent; - border-radius: 8px; - color: #fff; +.BulletBox { + position: fixed; + display: none; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 8px; + background-color: var(--txt-theme-color); + line-height: 20px; + text-align: center; + z-index: 9999; + border: 1px solid transparent; + border-radius: 8px; + color: #fff; } -#desc_wrap{ - position: relative; +#desc_wrap { + position: relative; } -#characterCount{ - position: absolute; - right: 20px; - bottom: 7px; - z-index:999; - color: #ccc; +#characterCount { + position: absolute; + right: 20px; + bottom: 7px; + z-index: 999; + color: #ccc; } -#loadingWrap{ - position: relative; +#loadingWrap { + position: relative; } -#submitLoading{ - position: absolute; - display: none; - left: 42%; - width: 18px; - height: 18px; - border-radius: 50%; - animation: spin 3s infinite linear; +#submitLoading { + position: absolute; + display: none; + left: 42%; + width: 18px; + height: 18px; + border-radius: 50%; + animation: spin 3s infinite linear; } @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} \ No newline at end of file + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/public/site/css/ad.css b/public/site/css/ad.css new file mode 100644 index 000000000..ba960531c --- /dev/null +++ b/public/site/css/ad.css @@ -0,0 +1,440 @@ +.ad-wrapper { + color: #441726; +} + +.ad-wrapper #ad-banner { + background-image: url(../img/ad/banner.png); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +header .ad { + width: 100vw; + height: 0; + background-color: #fff; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 999; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +header .ad .ad-content { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + padding: 0 20px; + position: relative; +} + +header .ad .ad-content .ad-content-left { + flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; + padding-right: 32px; +} + +header .ad .ad-content .ad-close { + position: absolute; + right: 24px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + width: 28px; + height: 28px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + background: rgba(0, 0, 0, 0.2); + transition: all 0.3s; +} +header .ad .ad-content .ad-close:hover { + background: rgba(0, 0, 0, 0.15); +} + +header .ad .ad-content .ad-close img { + width: 16px; + height: 16px; +} + +header .ad .ad-content .ad-content-left .ad-text { + font-size: 28px; + font-weight: 600; + color: #441726; + font-family: Lexend; + margin-right: 16px; + line-height: 35px; +} + +header .ad .ad-content .ad-content-left .ad-btn { + height: 36px; + min-width: 72px; + background: linear-gradient( + 104.43deg, + #fc8c80 1.18%, + #f3596e 46.98%, + #ee61d4 93.24% + ); + padding: 8px 16px 8px 16px; + border-radius: 8px; + border: none; + font-family: Lexend; + font-size: 16px; + font-weight: 500; + line-height: 20px; + text-align: left; + color: #fff; + cursor: pointer; +} + +footer.ad-footer { + background-color: #1d0f14; + color: #fff; +} + +footer.ad-footer .dootask { + color: #fff; +} + +footer.ad-footer .footer-layout { + border-top-color: transparent; +} + +.ad-wrapper .arcs { + display: inline-block; + position: absolute; + width: 100%; + height: 60px; + left: 0; + top: 60px; + z-index: -1; + background-color: transparent; +} + +.ad-wrapper .topics .topics-h1-green { + color: #f3474c; + position: relative; + text-align: center; +} + +.ad-wrapper .topics .btn-primary { + background: linear-gradient( + 104.43deg, + #ff7155 1.18%, + #ef3e56 46.98%, + #ee61d4 93.24% + ); + box-shadow: 0px 3px 6px 0px #ff010133; + transition: all 0.3s ease-in-out; + border: 1px solid transparent; +} + +.ad-wrapper .topics .topics-btn { + gap: 16px; +} + +.ad-wrapper .topics .topics-btn .btn { + min-width: 120px; +} + +.ad-wrapper .topics .btn-primary:hover { + background: linear-gradient( + -104.43deg, + #ff7155 1.18%, + #ef3e56 46.98%, + #ee61d4 93.24% + ); + border: 1px solid #f3474c; +} + +.ad-wrapper .topics .btn-default { + color: #f3474c; + background-color: #fff; + border: 1px solid #f3474c; + box-shadow: 0px 3px 6px 0px #ff010133; + transition: all 0.3s ease-in-out; +} + +.ad-wrapper .topics .btn-default:hover { + background-color: #f3474c; + color: #fff; +} + +.ad-wrapper main { + background-image: url(../img/ad/plan.png); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.ad-plan, +.ad-intro { + background: transparent; +} + +.section-wrapper { + max-width: 1280px; + margin: 0 auto; + padding: 96px 0 64px; + + display: flex; + + flex-direction: column; + align-items: center; + gap: 16px; +} + +.section-wrapper .section-title { + font-size: 28px; + font-weight: 600; + color: #441726; +} + +.section-wrapper .section-description { + font-size: 16px; + color: #441726; +} + +.section-wrapper .section-content { + margin-top: 48px; +} + +.ad-plan .section-content { + width: 100%; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; +} + +.ad-plan .section-content .plan-item { + box-shadow: 0px 4px 16px 8px #0000001f; + border-radius: 16px; + background-color: #fff; + + min-height: 360px; + padding: 32px 24px; + border: 2px solid transparent; +} + +.ad-plan .section-content .plan-item:hover, +.ad-plan .section-content .plan-item.active { + border-color: #f3474c; + box-shadow: 0px 24px 32px 16px #0000001f; +} + +.ad-plan .section-content .plan-item .plan-item-title { + font-size: 18px; + font-weight: 600; +} + +.ad-plan .section-content .plan-item .plan-item-price { + font-family: Lexend; + margin-top: 32px; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +.ad-plan .section-content .plan-item .plan-item-price .plan-item-price-current { + font-size: 24px; + font-weight: 900; +} + +.ad-plan .section-content .plan-item .plan-item-price .plan-item-price-payment { + font-size: 14px; + font-weight: 500; + color: #727570; +} + +.ad-plan + .section-content + .plan-item + .plan-item-price + .plan-item-price-original { + font-size: 14px; + color: #727570; +} + +.ad-plan + .section-content + .plan-item + .plan-item-price + .plan-item-price-original.price { + color: #f3474c; + text-decoration: line-through; +} + +.ad-plan .section-content .plan-item .plan-item-button { + margin-top: 24px; +} + +.ad-plan .section-content .plan-item .plan-item-button .btn-primary { + width: 100%; + + height: 40px; + padding: 10px 16px 10px 16px; + border-radius: 8px; + background: linear-gradient( + 104.43deg, + #ff7155 1.18%, + #ef3e56 46.98%, + #ee61d4 93.24% + ); + border: none; + font-size: 16px; + font-weight: 500; + line-height: 20px; + text-align: center; + color: #fff; + cursor: pointer; +} + +.ad-plan .section-content .plan-item .plan-item-description { + margin-top: 24px; +} + +.ad-plan + .section-content + .plan-item + .plan-item-description + .plan-item-description-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.ad-plan + .section-content + .plan-item + .plan-item-description + .plan-item-description-item { + display: flex; + align-items: flex-start; + gap: 8px; + font-size: 14px; +} + +.ad-plan + .section-content + .plan-item + .plan-item-description + .plan-item-description-item + .plan-item-description-item-icon { + width: 18px; + height: 18px; + display: flex; + justify-content: flex-start; + align-items: flex-end; + flex-shrink: 0; +} + +.ad-plan + .section-content + .plan-item + .plan-item-description + .plan-item-description-item + .plan-item-description-item-content { + color: #727570; +} + +.ad-intro .section-content { + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; +} + +.ad-intro .section-content .ad-intro-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + background-color: #fff; + border-radius: 16px; + padding: 24px; + position: relative; + + box-shadow: 0px 4px 16px 8px #0000001f; +} + +.ad-intro .section-content .ad-intro-item .ad-intro-item-header { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 20px; +} + +.ad-intro .section-content .ad-intro-item .ad-intro-item-header img { + border-top-left-radius: 16px; + border-top-right-radius: 16px; + width: 100%; + height: 100%; +} + +.ad-intro .section-content .ad-intro-item .ad-intro-item-image { + width: 100%; + height: 260px; +} + +.ad-intro .section-content .ad-intro-item .ad-intro-item-image img { + width: 100%; + height: 100%; +} + +.ad-intro .section-content .ad-intro-item .ad-intro-item-title { + margin-top: 12px; + font-size: 18px; + font-weight: 600; + align-self: flex-start; +} + +.ad-intro .section-content .ad-intro-item .ad-intro-item-description { + font-size: 14px; + align-self: flex-start; + color: #727570; + line-height: 24px; +} + +@media screen and (max-width: 1200px) { + .ad-plan .section-content { + grid-template-columns: repeat(3, 1fr); + } + + .section-wrapper { + padding: 96px 24px 64px; + } +} + +@media screen and (max-width: 900px) { + .ad-plan .section-content { + grid-template-columns: repeat(2, 1fr); + } + + .ad-intro .section-content { + grid-template-columns: repeat(1, 1fr); + } +} + +@media screen and (max-width: 768px) { + header .ad .ad-content .ad-content-left .ad-text { + font-size: 20px; + } + + header .ad .ad-content .ad-content-left .ad-btn { + font-size: 14px; + height: 28px; + line-height: 14px; + } + + .ad-plan .section-content { + grid-template-columns: repeat(1, 1fr); + } +} diff --git a/public/site/css/common.css b/public/site/css/common.css index 6ec3fa2d2..2fefce168 100644 --- a/public/site/css/common.css +++ b/public/site/css/common.css @@ -1,1146 +1,1146 @@ /* 全局 CSS 文件 */ body { - background-color: var(--bg-color); - color: var(--text-color); - font-family: 'Lexend'; - font-style: normal; - font-size: 16px; + background-color: var(--bg-color); + color: var(--text-color); + font-family: "Lexend"; + font-style: normal; + font-size: 16px; } * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } ul, ol { - list-style: none; + list-style: none; } i { - font-style: normal; + font-style: normal; } a { - color: var(--text-color); - text-decoration: none; - cursor: pointer; + color: var(--text-color); + text-decoration: none; + cursor: pointer; } img { - max-width: 100%; - height: auto; - display: block; + max-width: 100%; + height: auto; + display: block; } .theme_dark { - display: none; + display: none; } .theme_light { - display: block; + display: block; } /* 字体样式 */ .txt-4001416 { - font-weight: 400; - font-size: 14px; - line-height: 16px; + font-weight: 400; + font-size: 14px; + line-height: 16px; } .txt-4001418 { - font-weight: 400; - font-size: 14px; - line-height: 18px; + font-weight: 400; + font-size: 14px; + line-height: 18px; } .txt-4001516 { - font-weight: 400; - font-size: 15px; - line-height: 16px; + font-weight: 400; + font-size: 15px; + line-height: 16px; } .txt-4001520 { - font-weight: 400; - font-size: 15px; - line-height: 20px; + font-weight: 400; + font-size: 15px; + line-height: 20px; } .txt-4001524 { - font-weight: 400; - font-size: 15px; - line-height: 24px; + font-weight: 400; + font-size: 15px; + line-height: 24px; } .txt-4001616 { - font-weight: 400; - font-size: 16px; - line-height: 16px; + font-weight: 400; + font-size: 16px; + line-height: 16px; } .txt-4001620 { - font-weight: 400; - font-size: 16px; - line-height: 20px; + font-weight: 400; + font-size: 16px; + line-height: 20px; } .txt-4001624 { - font-weight: 400; - font-size: 16px; - line-height: 24px; + font-weight: 400; + font-size: 16px; + line-height: 24px; } .txt-4001630 { - font-weight: 400; - font-size: 16px; - line-height: 30px; + font-weight: 400; + font-size: 16px; + line-height: 30px; } .txt-4001822 { - font-weight: 400; - font-size: 18px; - line-height: 22px; + font-weight: 400; + font-size: 18px; + line-height: 22px; } .txt-4001824 { - font-weight: 400; - font-size: 18px; - line-height: 24px; + font-weight: 400; + font-size: 18px; + line-height: 24px; } .txt-4001830 { - font-weight: 400; - font-size: 18px; - line-height: 30px; + font-weight: 400; + font-size: 18px; + line-height: 30px; } .txt-4002025 { - font-weight: 400; - font-size: 20px; - line-height: 25px; + font-weight: 400; + font-size: 20px; + line-height: 25px; } .txt-4003645 { - font-weight: 400; - font-size: 36px; - line-height: 45px; + font-weight: 400; + font-size: 36px; + line-height: 45px; } .txt-5001616 { - font-weight: 500; - font-size: 16px; - line-height: 16px; + font-weight: 500; + font-size: 16px; + line-height: 16px; } .txt-5001624 { - font-weight: 500; - font-size: 16px; - line-height: 24px; + font-weight: 500; + font-size: 16px; + line-height: 24px; } .txt-5001528 { - font-weight: 500; - font-size: 15px; - line-height: 28px; + font-weight: 500; + font-size: 15px; + line-height: 28px; } .txt-5001628 { - font-weight: 500; - font-size: 16px; - line-height: 28px; + font-weight: 500; + font-size: 16px; + line-height: 28px; } .txt-5001822 { - font-weight: 500; - font-size: 18px; - line-height: 22px; + font-weight: 500; + font-size: 18px; + line-height: 22px; } .txt-5002016 { - font-weight: 500; - font-size: 20px; - line-height: 16px; + font-weight: 500; + font-size: 20px; + line-height: 16px; } .txt-5002024 { - font-weight: 500; - font-size: 20px; - line-height: 24px; + font-weight: 500; + font-size: 20px; + line-height: 24px; } .txt-5002025 { - font-weight: 500; - font-size: 20px; - line-height: 25px; + font-weight: 500; + font-size: 20px; + line-height: 25px; } .txt-5002228 { - font-weight: 500; - font-size: 22px; - line-height: 28px; + font-weight: 500; + font-size: 22px; + line-height: 28px; } .txt-5002835 { - font-weight: 500; - font-size: 28px; - line-height: 35px; + font-weight: 500; + font-size: 28px; + line-height: 35px; } .txt-5002430 { - font-weight: 500; - font-size: 24px; - line-height: 30px; + font-weight: 500; + font-size: 24px; + line-height: 30px; } .txt-5003636 { - font-weight: 500; - font-size: 36px; - line-height: 36px; + font-weight: 500; + font-size: 36px; + line-height: 36px; } .txt-5003645 { - font-weight: 500; - font-size: 36px; - line-height: 45px; + font-weight: 500; + font-size: 36px; + line-height: 45px; } .txt-5004455 { - font-weight: 500; - font-size: 44px; - line-height: 55px; + font-weight: 500; + font-size: 44px; + line-height: 55px; } .txt-6002025 { - font-weight: 600; - font-size: 20px; - line-height: 25px; + font-weight: 600; + font-size: 20px; + line-height: 25px; } .txt-6002430 { - font-weight: 600; - font-size: 24px; - line-height: 30px; + font-weight: 600; + font-size: 24px; + line-height: 30px; } .txt-6002835 { - font-weight: 600; - font-size: 28px; - line-height: 35px; + font-weight: 600; + font-size: 28px; + line-height: 35px; } .txt-6003645 { - font-weight: 600; - font-size: 36px; - line-height: 45px; + font-weight: 600; + font-size: 36px; + line-height: 45px; } .txt-6003652 { - font-weight: 600; - font-size: 36px; - line-height: 52px; + font-weight: 600; + font-size: 36px; + line-height: 52px; } .txt-6005670 { - font-weight: 600; - font-size: 56px; - line-height: 70px; + font-weight: 600; + font-size: 56px; + line-height: 70px; } .txt-6007290 { - font-weight: 600; - font-size: 72px; - line-height: 90px; + font-weight: 600; + font-size: 72px; + line-height: 90px; } .txt-7002027 { - font-weight: 700; - font-size: 20px; - line-height: 27px; + font-weight: 700; + font-size: 20px; + line-height: 27px; } .txt-7003240 { - font-weight: 700; - font-size: 32px; - line-height: 40px; + font-weight: 700; + font-size: 32px; + line-height: 40px; } .txt-7003645 { - font-weight: 700; - font-size: 36px; - line-height: 45px; + font-weight: 700; + font-size: 36px; + line-height: 45px; } /* button样式 */ .btn { - padding: 10px 16px; - border-radius: 8px; - border: 1px solid transparent; - cursor: pointer; - outline: none; - position: relative; - display: inline-block; - white-space: nowrap; - text-align: center; - transition: all .2s cubic-bezier(.645, .045, .355, 1); - user-select: none; - touch-action: manipulation; - width: 100%; - font-size: 16px; - line-height: 18px; + padding: 10px 16px; + border-radius: 8px; + border: 1px solid transparent; + cursor: pointer; + outline: none; + position: relative; + display: inline-block; + white-space: nowrap; + text-align: center; + transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + user-select: none; + touch-action: manipulation; + width: 100%; + font-size: 16px; + line-height: 18px; } .btn-primary { - background-color: var(--txt-theme-color); - color: #fff; + background-color: var(--txt-theme-color); + color: #fff; } .btn-primary:hover { - background-color: var(--btn-hover-color); + background-color: var(--btn-hover-color); } .btn-green { - color: var(--txt-theme-color); - border-color: var(--txt-theme-color); - background-color: transparent; + color: var(--txt-theme-color); + border-color: var(--txt-theme-color); + background-color: transparent; } .btn-green:hover { - color: #fff; - border-color: var(--txt-theme-color); - background-color: var(--txt-theme-color); + color: #fff; + border-color: var(--txt-theme-color); + background-color: var(--txt-theme-color); } .btn-wwg { - color: #fff; - border-color: #fff; - background-color: var(--txt-theme-color); + color: #fff; + border-color: #fff; + background-color: var(--txt-theme-color); } .btn-default { - color: var(--txt-gray-color); - border-color: var(--border-color); - background-color: transparent; + color: var(--txt-gray-color); + border-color: var(--border-color); + background-color: transparent; } .btn-default:hover { - color: var(--txt-theme-color); - border-color: var(--txt-theme-color); + color: var(--txt-theme-color); + border-color: var(--txt-theme-color); } .btn-gw { - color: var(--txt-theme-color); - background-color: #fff; + color: var(--txt-theme-color); + background-color: #fff; } /* input样式 */ .input { - box-sizing: border-box; - padding: 9px 13px; - height: 44px; - color: var(--text-color); - background-color: var(--bg-fa-color); - border: 1px solid var(--border-color); - border-radius: 4px; - transition: all 0.2s; - font-size: 15px; + box-sizing: border-box; + padding: 9px 13px; + height: 44px; + color: var(--text-color); + background-color: var(--bg-fa-color); + border: 1px solid var(--border-color); + border-radius: 4px; + transition: all 0.2s; + font-size: 15px; } .input::placeholder { - color: var(--txt-gray-color) !important; - opacity: .5; + color: var(--txt-gray-color) !important; + opacity: 0.5; } .input:focus { - outline: none; - border: 1px solid var(--txt-theme-color); + outline: none; + border: 1px solid var(--txt-theme-color); } .textarea { - box-sizing: border-box; - padding: 9px 13px; - color: var(--text-color); - background-color: var(--bg-fa-color); - border: 1px solid var(--border-color); - border-radius: 4px; - transition: all 0.2s; - font-size: 15px; + box-sizing: border-box; + padding: 9px 13px; + color: var(--text-color); + background-color: var(--bg-fa-color); + border: 1px solid var(--border-color); + border-radius: 4px; + transition: all 0.2s; + font-size: 15px; } .textarea::placeholder { - color: var(--txt-gray-color) !important; - opacity: .5; + color: var(--txt-gray-color) !important; + opacity: 0.5; } .textarea:focus { - outline: none; - border: 1px solid var(--txt-theme-color); + outline: none; + border: 1px solid var(--txt-theme-color); } .search-form { - display: none; - position: relative; + display: none; + position: relative; } .search-input { - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: center; - padding: 9px 13px 9px 38px; - width: 240px; - height: 40px; - color: var(--text-color); - background-color: var(--choose-bg-hover-color); - border: 1px solid var(--border-color); - border-radius: 8px; - transition: all 0.2s; - font-size: 15px; + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + padding: 9px 13px 9px 38px; + width: 240px; + height: 40px; + color: var(--text-color); + background-color: var(--choose-bg-hover-color); + border: 1px solid var(--border-color); + border-radius: 8px; + transition: all 0.2s; + font-size: 15px; } .search-input::placeholder { - color: var(--txt-gray-color) !important; - opacity: .5; + color: var(--txt-gray-color) !important; + opacity: 0.5; } .search-input:focus { - outline: none; - border: 1px solid var(--txt-theme-color); + outline: none; + border: 1px solid var(--txt-theme-color); } .search-icon { - display: inline-block; - background: url(../img/search-icon.svg) no-repeat; - width: 20px; - height: 20px; - position: absolute; - top: 10px; - left: 10px; - z-index: 2; + display: inline-block; + background: url(../img/search-icon.svg) no-repeat; + width: 20px; + height: 20px; + position: absolute; + top: 10px; + left: 10px; + z-index: 2; } .from-ul { - width: 543px; + width: 543px; } .from-ul-item { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .from-ul-tags { - font-family: 'Lexend'; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 16px; - color: var(--txt-gray-color); + font-family: "Lexend"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--txt-gray-color); } .input-txt { - padding: 10px 16px; - background: var(--bg-fa-color); - border: 1px solid var(--border-color); - border-radius: 4px; + padding: 10px 16px; + background: var(--bg-fa-color); + border: 1px solid var(--border-color); + border-radius: 4px; } .input-textArea { - padding: 10px 16px; - height: 120px; - background: var(--bg-fa-color); - border: 1px solid var(--border-color); - border-radius: 4px; + padding: 10px 16px; + height: 120px; + background: var(--bg-fa-color); + border: 1px solid var(--border-color); + border-radius: 4px; } /* flex样式 */ .flex-cc { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .flex-sc { - display: flex; - align-items: flex-start; - justify-content: center; + display: flex; + align-items: flex-start; + justify-content: center; } /* grid样式 */ .grid-4 { - display: grid !important; - grid-template-columns: 480px 266px 266px 266px; + display: grid !important; + grid-template-columns: 480px 266px 266px 266px; } .grid-5 { - display: grid !important; - grid-template-columns: 336px 236px 236px 236px 236px; + display: grid !important; + grid-template-columns: 336px 236px 236px 236px 236px; } /* padding样式 */ .pl-26 { - padding-left: 26px; + padding-left: 26px; } /* margin样式 */ .mb-4 { - margin-bottom: 4px; + margin-bottom: 4px; } .mb-8 { - margin-bottom: 8px; + margin-bottom: 8px; } .mb-12 { - margin-bottom: 12px; + margin-bottom: 12px; } .mb-16 { - margin-bottom: 16px; + margin-bottom: 16px; } .mb-24 { - margin-bottom: 24px; + margin-bottom: 24px; } .mb-32 { - margin-bottom: 32px; + margin-bottom: 32px; } .mb-36 { - margin-bottom: 36px; + margin-bottom: 36px; } .mb-40 { - margin-bottom: 40px; + margin-bottom: 40px; } .mb-48 { - margin-bottom: 48px; + margin-bottom: 48px; } .mb-56 { - margin-bottom: 56px; + margin-bottom: 56px; } .mb-64 { - margin-bottom: 64px; + margin-bottom: 64px; } .mb-80 { - margin-bottom: 80px; + margin-bottom: 80px; } .mr-12 { - margin-right: 12px; + margin-right: 12px; } .mr-16 { - margin-right: 16px; + margin-right: 16px; } .mr-20 { - margin-right: 20px; + margin-right: 20px; } .mr-24 { - margin-right: 24px; + margin-right: 24px; } .mr-48 { - margin-right: 48px; + margin-right: 48px; } .mt-16 { - margin-top: 16px; + margin-top: 16px; } .mt-40 { - margin-top: 40px; + margin-top: 40px; } .mt-80 { - margin-top: 80px; + margin-top: 80px; } /* header布局 */ .head { - position: relative; - background-color: var(--bg-color); + position: relative; + background-color: var(--bg-color); } .head-con { - width: 100%; - max-width: 1280px; - margin: 0 auto; + width: 100%; + max-width: 1280px; + margin: 0 auto; } /* 导航栏样式 */ .nav { - display: block; - background-color: transparent; - width: 100%; - position: relative; - z-index: 999; - height: 80px; - position: fixed; - top: 0; + display: block; + background-color: transparent; + width: 100%; + position: relative; + z-index: 999; + height: 80px; + position: fixed; + top: 0; } .nav-layout { - width: 100%; - max-width: 1280px; - margin: 0 auto; - height: 80px; - display: flex; - align-items: center; - justify-content: space-between; + width: 100%; + max-width: 1280px; + margin: 0 auto; + height: 80px; + display: flex; + align-items: center; + justify-content: space-between; } .navbar-white { - background-color: var(--pop-bg-color); - box-shadow: 0px 4px 9px var(--box-shadow-color); + background-color: var(--pop-bg-color); + box-shadow: 0px 4px 9px var(--box-shadow-color); } .topics { - position: relative; - width: 100%; + position: relative; + width: 100%; } .topics-con { - padding-top: 200px; - max-width: 1280px; - width: 100%; - margin: 0 auto; + padding-top: 200px; + max-width: 1280px; + width: 100%; + margin: 0 auto; } .topics-layout { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; } .topics-tit, .topics-btn { - opacity: 0; - transform: translateY(100px); - animation: fadeSlideIn1 0.7s ease-in-out forwards; - /* 应用动画效果 */ + opacity: 0; + transform: translateY(100px); + animation: fadeSlideIn1 0.7s ease-in-out forwards; + /* 应用动画效果 */ } .topics-h4 { - width: 680px; - color: var(--txt-gray-color); - text-align: center; - opacity: 0; - transform: translateY(100px); - animation: fadeSlideIn1 0.7s ease-in-out forwards; - /* 应用动画效果 */ + width: 680px; + color: var(--txt-gray-color); + text-align: center; + opacity: 0; + transform: translateY(100px); + animation: fadeSlideIn1 0.7s ease-in-out forwards; + /* 应用动画效果 */ } /* 定义动画 */ @keyframes fadeSlideIn1 { - from { - opacity: 0; - transform: translateY(100px); - } + from { + opacity: 0; + transform: translateY(100px); + } - to { - opacity: 1; - transform: translateY(0); - } + to { + opacity: 1; + transform: translateY(0); + } } .topics-h1-green { - color: var(--txt-theme-color); - position: relative; - text-align: center; + color: var(--txt-theme-color); + position: relative; + text-align: center; } .topics-h1 { - color: var(--text-color); - text-align: center; + color: var(--text-color); + text-align: center; } .topics-btn { - margin-bottom: 64px; + margin-bottom: 64px; } .topics-tit-en { - width: 896px; - text-align: center; + width: 896px; + text-align: center; } .topics-h4-en { - width: 660px; - text-align: center; + width: 660px; + text-align: center; } .arcs { - display: inline-block; - position: absolute; - width: 95%; - height: 25px; - left: 0; - top: 83px; + display: inline-block; + position: absolute; + width: 95%; + height: 25px; + left: 0; + top: 83px; } .home-pic { - display: block; - width: 100%; - max-width: 1280px; - /* height: 580px; */ + display: block; + width: 100%; + max-width: 1280px; + /* height: 580px; */ } /* 抽屉菜单 */ .menuBtn { - display: none; - cursor: pointer; + display: none; + cursor: pointer; } .drawer { - position: fixed; - top: 0; - left: -90vw; - width: 75vw; - height: 100%; - padding: 22px 24px; - background-color: var(--pop-bg-color); - border: 1px solid var(--box-shadow-color); - box-shadow: var(--pop-box-shadow); - transition: all 0.5s ease-in-out; - z-index: 999; + position: fixed; + top: 0; + left: -90vw; + width: 75vw; + height: 100%; + padding: 22px 24px; + background-color: var(--pop-bg-color); + border: 1px solid var(--box-shadow-color); + box-shadow: var(--pop-box-shadow); + transition: all 0.5s ease-in-out; + z-index: 999; } .drawer-t { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .close-drawer { - display: inline-block; - margin-bottom: 10px; - cursor: pointer; - color: var(--txt-gray-color); - font-size: 20px; + display: inline-block; + margin-bottom: 10px; + cursor: pointer; + color: var(--txt-gray-color); + font-size: 20px; } .open-drawer { - left: 0; + left: 0; } .drawer-item-t { - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); } .drawer .drawer-item { - cursor: pointer; - position: relative; + cursor: pointer; + position: relative; } -.drawer .drawer-item>a { - padding: 16px; - display: inline-block; - width: calc(100% - 36px); +.drawer .drawer-item > a { + padding: 16px; + display: inline-block; + width: calc(100% - 36px); } -.drawer .drawer-item>i { - padding: 16px; - display: flex; - width: calc(100% - 36px); +.drawer .drawer-item > i { + padding: 16px; + display: flex; + width: calc(100% - 36px); } .drawer .drawer-active .drawer-item { - padding: 0 36px; + padding: 0 36px; } .drawer .drawer-item .txt { - color: var(--txt-gray-color); + color: var(--txt-gray-color); } .drawer .drawer-item:hover { - background-color: var(--bg-hover-color); - border-radius: 4px; + background-color: var(--bg-hover-color); + border-radius: 4px; } .drawer .drawer-item:hover .txt { - color: var(--text-color); + color: var(--text-color); } .logo { - display: flex; - align-items: center; + display: flex; + align-items: center; } .dootask { - margin-left: 16px; - color: var(--text-color); + margin-left: 16px; + color: var(--text-color); } .nav-ul { - display: flex; - align-items: center; - justify-content: space-between; - width: 545px; + display: flex; + align-items: center; + justify-content: space-between; + width: 545px; } .nav-ul-item { - display: inline-block; - position: relative; + display: inline-block; + position: relative; } .nav-vector { - margin-left: 5px; + margin-left: 5px; } .nav-ul-item .txt { - padding: 7px 8px; - color: var(--txt-gray-color); + padding: 7px 8px; + color: var(--txt-gray-color); } .nav-ul-item .txt:hover { - background-color: var(--bg-hover-color); - border-radius: 6px; - color: var(--text-color); + background-color: var(--bg-hover-color); + border-radius: 6px; + color: var(--text-color); } .nav-ul-item .support-active { - background-color: var(--bg-hover-color); - border-radius: 6px; - color: var(--text-color); + background-color: var(--bg-hover-color); + border-radius: 6px; + color: var(--text-color); } .submenu-pop { - position: absolute; - top: 40px; - left: -38px; - display: none; - background-color: var(--pop-bg-color); - border: 1px solid var(--box-shadow-color); - box-shadow: var(--pop-box-shadow); - border-radius: 4px; - padding: 8px 0; - z-index: 99; - width: 150px; - text-align: start; + position: absolute; + top: 40px; + left: -38px; + display: none; + background-color: var(--pop-bg-color); + border: 1px solid var(--box-shadow-color); + box-shadow: var(--pop-box-shadow); + border-radius: 4px; + padding: 8px 0; + z-index: 99; + width: 150px; + text-align: start; } .submenu-pop .submenu-pop-item { - cursor: pointer; + cursor: pointer; } .submenu-pop .submenu-pop-item .txt-sub { - display: inline-block; - padding: 9px 16px; - color: var(--txt-gray-color); + display: inline-block; + padding: 9px 16px; + color: var(--txt-gray-color); } .submenu-pop .submenu-pop-item:hover { - background-color: var(--bg-hover-color); + background-color: var(--bg-hover-color); } .submenu-pop .submenu-pop-item:hover .txt-sub { - color: var(--text-color); + color: var(--text-color); } .nav-r { - width: 355px; - display: flex; - justify-content: space-between; - align-items: center; - position: relative; + width: 355px; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; } .nav-support { - display: flex; - align-items: center; - cursor: pointer; + display: flex; + align-items: center; + cursor: pointer; } .line-1 { - height: 24px; - border: 1px solid var(--border-color); + height: 24px; + border: 1px solid var(--border-color); } .nav-r a { - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 20px; - color: var(--txt-gray-color); + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 20px; + color: var(--txt-gray-color); } .nav-r-icon { - height: 20px; - cursor: pointer; + height: 20px; + cursor: pointer; } .lang { - display: inline-block; - height: 20px; - cursor: pointer; + display: inline-block; + height: 20px; + cursor: pointer; } .lang-pop { - position: absolute; - top: 40px; - left: -38px; - display: none; - background-color: var(--pop-bg-color); - border: 1px solid var(--box-shadow-color); - box-shadow: var(--pop-box-shadow); - border-radius: 4px; - padding: 8px 0; - z-index: 99; - text-align: start; + position: absolute; + top: 40px; + left: -38px; + display: none; + background-color: var(--pop-bg-color); + border: 1px solid var(--box-shadow-color); + box-shadow: var(--pop-box-shadow); + border-radius: 4px; + padding: 8px 0; + z-index: 99; + text-align: start; } .lang-pop .show { - display: inline-block; + display: inline-block; } .lang-pop .lang-pop-item { - padding: 9px 16px; - cursor: pointer; + padding: 9px 16px; + cursor: pointer; } .lang-pop .lang-pop-item .lang-txt { - font-weight: 400; - font-size: 14px; - line-height: 18px; - color: var(--txt-gray-color); - display: inline-block; + font-weight: 400; + font-size: 14px; + line-height: 18px; + color: var(--txt-gray-color); + display: inline-block; } .lang-pop .lang-pop-item:hover { - background-color: var(--bg-hover-color); + background-color: var(--bg-hover-color); } .lang-pop .lang-pop-item:hover .lang-txt { - color: var(--text-color); + color: var(--text-color); } .get-started { - display: inline-block; + display: inline-block; } .login-btn { - width: 84px; - display: inline-block; + width: 84px; + display: inline-block; } /* 底部样式 */ footer { - width: 100%; - z-index: 2; - position: relative; + width: 100%; + z-index: 2; + position: relative; } .footer-con { - width: 100%; - max-width: 1280px; - margin: 0 auto; + width: 100%; + max-width: 1280px; + margin: 0 auto; } -.footer-layut { - display: flex; - justify-content: space-between; - align-items: flex-start; - padding-top: 46px; - border-bottom: var(--border-color) solid 1px; +.footer-layout { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding-top: 46px; + border-bottom: var(--border-color) solid 1px; } #qq_group { - position: relative; - width: 164px; + position: relative; + width: 164px; } #qq_group:hover .group_code { - display: flex; + display: flex; } .group_code { - display: none; - position: absolute; - bottom: 25px; - left: -35px; - background-color: var(--code-bg-color); - padding: 12px; - border-radius: 4px; - justify-content: center; - flex-direction: column; + display: none; + position: absolute; + bottom: 25px; + left: -35px; + background-color: var(--code-bg-color); + padding: 12px; + border-radius: 4px; + justify-content: center; + flex-direction: column; } .group_num { - display: inline-block; - color: #fff; - font-weight: 400; - font-size: 14px; - line-height: 16px; - margin-top: 10px; + display: inline-block; + color: #fff; + font-weight: 400; + font-size: 14px; + line-height: 16px; + margin-top: 10px; } .lower_triangle { - position: absolute; - bottom: -4px; - left: 70px; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 4px solid var(--code-bg-color); + position: absolute; + bottom: -4px; + left: 70px; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 4px solid var(--code-bg-color); } .footer-l { - display: flex; - flex-direction: column; - align-items: flex-start; - width: 405px; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 405px; } .footer-l .logo { - height: 36px; - display: flex; - align-items: center; - margin-bottom: 24px; + height: 36px; + display: flex; + align-items: center; + margin-bottom: 24px; } .footer-l .txt { - color: var(--txt-gray-color); + color: var(--txt-gray-color); } .footer-r { - width: 625px; + width: 625px; } .footer-r-ul { - display: flex; - justify-content: space-between; - padding-bottom: 48px; + display: flex; + justify-content: space-between; + padding-bottom: 48px; } .footer-ol-item { - cursor: pointer; + cursor: pointer; } .footer-ol-item .txt { - color: var(--txt-gray-color); + color: var(--txt-gray-color); } .footer-ol-item .code-svg { - display: block; - height: 125px; + display: block; + height: 125px; } .filings { - text-align: center; - color: var(--txt-gray-color); - padding: 24px 0; + text-align: center; + color: var(--txt-gray-color); + padding: 24px 0; } .footer-t { - position: relative; - padding: 120px 0; + position: relative; + padding: 120px 0; } .footer-t-con { - width: 100%; - max-width: 1280px; - margin: 0 auto; + width: 100%; + max-width: 1280px; + margin: 0 auto; } .footer-t-layout { - display: flex; - justify-content: space-between; - align-items: flex-start; + display: flex; + justify-content: space-between; + align-items: flex-start; } .footer-t-l { - width: 657px; + width: 657px; } .footer-t-h1 { - font-weight: 500; - font-size: 44px; - line-height: 55px; - color: var(--text-color); + font-weight: 500; + font-size: 44px; + line-height: 55px; + color: var(--text-color); } .footer-t-h6 { - font-weight: 400; - font-size: 18px; - line-height: 30px; - color: var(--txt-gray-color); + font-weight: 400; + font-size: 18px; + line-height: 30px; + color: var(--txt-gray-color); } .footer-t-contact { - display: flex; - justify-content: flex-start; - align-items: center; + display: flex; + justify-content: flex-start; + align-items: center; } .footer-t-contact-icon { - display: inline-block; - width: 24px; - height: 24px; + display: inline-block; + width: 24px; + height: 24px; } .footer-t-contact-h6 { - font-weight: 400; - font-size: 16px; - line-height: 24px; - color: var(--text-color); + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: var(--text-color); } /* 序号公共样式 */ .serial-number { - color: var(--txt-theme-color); + color: var(--txt-theme-color); } .choose-con-item-h5 { - color: var(--text-color); + color: var(--text-color); } .choose-con-item-h6 { - color: var(--txt-gray-color); + color: var(--txt-gray-color); } .support .support-item { - padding-bottom: 8px; + padding-bottom: 8px; } .support .support-item .txt { - font-family: 'Lexend'; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 24px; - color: var(--txt-gray-color); + font-family: "Lexend"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: var(--txt-gray-color); } .support .support-item:first-of-type { - padding-bottom: 16px; + padding-bottom: 16px; } .support .support-item:first-of-type .txt { - color: var(--text-color); - font-weight: 500; + color: var(--text-color); + font-weight: 500; } .group .group-item { - padding-bottom: 24px; + padding-bottom: 24px; } .group .group-item .txt { - color: var(--text-color); - font-weight: 500; - font-size: 16px; - line-height: 24px; + color: var(--text-color); + font-weight: 500; + font-size: 16px; + line-height: 24px; } .group .group-item .logo { - display: block; - height: auto; + display: block; + height: auto; } /* 动画 style="--delay: 0s;" */ @@ -1148,8 +1148,8 @@ footer { .solutions-animate-box, .home-animate-box, .dow-animate-box { - opacity: 0; - transform: translateY(30%); + opacity: 0; + transform: translateY(30%); } .about-animate-box.animate, @@ -1157,92 +1157,93 @@ footer { .solutions-animate-box.animate, .home-animate-box.animate, .dow-animate-box.animate { - animation: fadeIn 0.7s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards var(--delay); - /* 应用动画效果 */ + animation: fadeIn 0.7s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards + var(--delay); + /* 应用动画效果 */ } /* 定义动画 */ @keyframes fadeIn { - from { - opacity: 0; - transform: translateY(30%); - } + from { + opacity: 0; + transform: translateY(30%); + } - to { - opacity: 1; - transform: translateY(0); - } + to { + opacity: 1; + transform: translateY(0); + } } #arc { - animation: arcsFadeIn 2s ease-in-out; + animation: arcsFadeIn 2s ease-in-out; } .arc-animate { - animation: arcsFadeIn 2s ease-in-out; + animation: arcsFadeIn 2s ease-in-out; } @keyframes arcsFadeIn { - from { - stroke-dashoffset: 600; - } + from { + stroke-dashoffset: 600; + } - to { - stroke-dashoffset: 0; - } + to { + stroke-dashoffset: 0; + } } .start_a { - width: 100%; + width: 100%; } .hide { - display: none; + display: none; } #cookieConsent { - display: none; - width: 100%; - height: 180px; - background-color: rgba(0, 0, 0, .8); - position: fixed; - bottom: 0; - z-index: 9999; - color: #dfe4e8; - padding: 40px 50px; - box-sizing: border-box; - text-align: center; + display: none; + width: 100%; + height: 180px; + background-color: rgba(0, 0, 0, 0.8); + position: fixed; + bottom: 0; + z-index: 9999; + color: #dfe4e8; + padding: 40px 50px; + box-sizing: border-box; + text-align: center; } #agreeButton { - width: 130px; - position: absolute; - right: 80px; - bottom: 50px; + width: 130px; + position: absolute; + right: 80px; + bottom: 50px; } #cookie_a { - color: #dfe4e8; - text-decoration-line: underline; + color: #dfe4e8; + text-decoration-line: underline; } .footer_beian { - line-height: 20px; - margin-left: 5px; - color: #939393; + line-height: 20px; + margin-left: 5px; + color: #939393; } .footer_beian_a { - line-height: 20px; - margin-left: 5px; - color: #939393; - text-decoration: underline; - display: inline-block; + line-height: 20px; + margin-left: 5px; + color: #939393; + text-decoration: underline; + display: inline-block; } .footer_copyright { - display: flex; - margin: 0 auto; - align-items: center; - justify-content: center; -} \ No newline at end of file + display: flex; + margin: 0 auto; + align-items: center; + justify-content: center; +} diff --git a/public/site/css/download.css b/public/site/css/download.css index 36d3825a2..e8e5d0ea7 100644 --- a/public/site/css/download.css +++ b/public/site/css/download.css @@ -1,172 +1,172 @@ /* 头部样式 */ -.head{ - text-align: center; - background: var(--bg-8-url) top left no-repeat; - background-size: contain; +.head { + text-align: center; + background: var(--bg-8-url) top left no-repeat; + background-size: contain; } -.nav{ - background-color: var(--pop-bg-color); - box-shadow: 0px 4px 9px var(--box-shadow-color); +.nav { + background-color: var(--pop-bg-color); + box-shadow: 0px 4px 9px var(--box-shadow-color); } -.download-ul{ - display: flex; - justify-content: space-between; - align-items: center; - width: 70%; +.download-ul { + display: flex; + justify-content: space-between; + align-items: center; + width: 70%; } -.download-ul-item{ - cursor: pointer; +.download-ul-item { + cursor: pointer; } -.download-ul-item .normal{ - display: flex; - background-color: var(--bg-fa-color); - border-radius: 80px; - width: 160px; - height: 160px; - justify-content: center; - align-items: center; - flex-direction: column; +.download-ul-item .normal { + display: flex; + background-color: var(--bg-fa-color); + border-radius: 80px; + width: 160px; + height: 160px; + justify-content: center; + align-items: center; + flex-direction: column; } -.download-ul-item .icon{ - display: block; - height: 48px; +.download-ul-item .icon { + display: block; + height: 48px; } -.download-ul-item .hover{ - display: none; - width: 160px; - height: 160px; - justify-content: center; - align-items: center; - flex-direction: column; +.download-ul-item .hover { + display: none; + width: 160px; + height: 160px; + justify-content: center; + align-items: center; + flex-direction: column; } -.download-ul-item .hover.radius{ - background-color: var(--bg-fa-color); - border-radius: 80px; - width: 160px; - height: 160px; +.download-ul-item .hover.radius { + background-color: var(--bg-fa-color); + border-radius: 80px; + width: 160px; + height: 160px; } -.download-ul-item .qr-code{ - display: block; - height: 100px; +.download-ul-item .qr-code { + display: block; + height: 100px; } -.download-ul-item .txt{ - color: var(--txt-gray-color); +.download-ul-item .txt { + color: var(--txt-gray-color); } -.download-ul-item .hover.radius .txt{ - color: var(--txt-theme-color); +.download-ul-item .hover.radius .txt { + color: var(--txt-theme-color); } -.chips-txt{ - color: var(--txt-theme-color); +.chips-txt { + color: var(--txt-theme-color); } -.download-ul-item .btn:hover .chips-txt{ - color: #fff; +.download-ul-item .btn:hover .chips-txt { + color: #fff; } -.update{ - position: relative; - background-color: var(--bg-fa-color); +.update { + position: relative; + background-color: var(--bg-fa-color); } -.update-con{ - width: 100%; - max-width: 1280px; - margin: 0 auto; - padding: 120px 0px; - z-index: 2; - position: relative; +.update-con { + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding: 120px 0px; + z-index: 2; + position: relative; } -.update-layout{ - display: flex; - justify-content: space-between; - align-items: center; - position: relative; +.update-layout { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; } -.update-h1{ - color: var(--text-color); +.update-h1 { + color: var(--text-color); } -.update-ul{ - width: 465px; +.update-ul { + width: 465px; } -.update-item{ - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid var(--border-color); - padding: 16px 0; - cursor: pointer; +.update-item { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border-color); + padding: 16px 0; + cursor: pointer; } -.update-item:hover .update-h5{ - color: var(--txt-theme-color); +.update-item:hover .update-h5 { + color: var(--txt-theme-color); } -.update-item:hover .time{ - color: var(--txt-theme-color); +.update-item:hover .time { + color: var(--txt-theme-color); } -.update-h5{ - color: var(--txt-gray-color); +.update-h5 { + color: var(--txt-gray-color); } -.update-item .time{ - color: var(--txt-gray-color); +.update-item .time { + color: var(--txt-gray-color); } -.update-ul .more-item{ - display: flex; - align-items: center; +.update-ul .more-item { + display: flex; + align-items: center; } -.more-item .more{ - color: var(--txt-theme-color); - margin-right: 8px; - cursor: pointer; - padding: 16px 0; +.more-item .more { + color: var(--txt-theme-color); + margin-right: 8px; + cursor: pointer; + padding: 16px 0; } -.more-item .icon{ - display: inline-block; - width: 8px; - height: 12px; - line-height: 24px; +.more-item .icon { + display: inline-block; + width: 8px; + height: 12px; + line-height: 24px; } -.update-bg-svg{ - background: var(--bg-9-url) no-repeat top right; - background-size: contain; +.update-bg-svg { + background: var(--bg-9-url) no-repeat top right; + background-size: contain; } -.update-r{ - max-width: 672px; - margin-left: 123px; - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); - border-radius: 45px; +.update-r { + max-width: 672px; + margin-left: 123px; + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 45px; } -.update-r-svg{ - display: block; - background: var(--bg-pic1-url) no-repeat; - background-size: cover; - width: 100%; - height: 100%; +.update-r-svg { + display: block; + background: var(--bg-pic1-url) no-repeat; + background-size: cover; + width: 100%; + height: 100%; } /* 底部布局 */ -.footer-layut{ - padding-top: 120px; +.footer-layout { + padding-top: 120px; } -.btn-padding{ - padding: 0 !important; +.btn-padding { + padding: 0 !important; } -.btn-padding a{ - display: block; - padding: 10px 16px; +.btn-padding a { + display: block; + padding: 10px 16px; } /* 弹框样式 */ -.BulletBox{ - position: fixed; - display: none; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - padding: 8px; - background-color: var(--txt-theme-color); - line-height: 20px; - text-align: center; - z-index: 9999; - border: 1px solid transparent; - border-radius: 8px; - color: #fff; +.BulletBox { + position: fixed; + display: none; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 8px; + background-color: var(--txt-theme-color); + line-height: 20px; + text-align: center; + z-index: 9999; + border: 1px solid transparent; + border-radius: 8px; + color: #fff; } -.download-other-btn{ +.download-other-btn { padding: 10px 16px; border-radius: 8px; margin-top: 64px; diff --git a/public/site/css/home.css b/public/site/css/home.css index 150d3b62f..c7cc77943 100644 --- a/public/site/css/home.css +++ b/public/site/css/home.css @@ -1,34 +1,34 @@ /* 头部样式 */ -.head{ - text-align: center; - background: var(--bg-1-url) top left no-repeat; - background-size: cover; +.head { + text-align: center; + background: var(--bg-1-url) top left no-repeat; + background-size: cover; } -section{ - background: var(--bg-2-url) bottom left no-repeat; +section { + background: var(--bg-2-url) bottom left no-repeat; } /* 底部样式 */ -.footer-layut{ - border-top: var(--border-color) solid 1px; +.footer-layout { + border-top: var(--border-color) solid 1px; } -.collaboration{ - width: 100%; - max-width: 1280px; - max-height: 243px; - margin: 0 auto; - position: relative; - margin-bottom: 120px; +.collaboration { + width: 100%; + max-width: 1280px; + max-height: 243px; + margin: 0 auto; + position: relative; + margin-bottom: 120px; } -.collaboration-content{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - z-index: 5; +.collaboration-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 5; } /* .collaboration-content-zh{ top: 27.7%; @@ -38,280 +38,281 @@ section{ top: 27.7%; left: 28.6%; } */ -.collaboration-txt{ - color: #fff; - text-align: center; +.collaboration-txt { + color: #fff; + text-align: center; } /* 合作公司 */ -.companies{ - height: 100%; - background: var(--bg-fa-color); +.companies { + height: 100%; + background: var(--bg-fa-color); } -.companies-con{ - width: 100%; - max-width: 1280px; - margin: 0 auto; - padding: 88px 0; +.companies-con { + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding: 88px 0; } -.companies-h1{ - text-align: center; - color: var(--text-color); +.companies-h1 { + text-align: center; + color: var(--text-color); } -.companies-ul{ - display: flex; - align-items: center; - justify-content: space-around; - margin-top: 56px; +.companies-ul { + display: flex; + align-items: center; + justify-content: space-around; + margin-top: 56px; } -.companies-ul .companies-ul-item{ - height: 64px; +.companies-ul .companies-ul-item { + height: 64px; } -.companies-ul .companies-ul-item img{ - height: 100%; - display: inline-block; +.companies-ul .companies-ul-item img { + height: 100%; + display: inline-block; } -.ten_img{ - opacity: 0; - animation-name: fadeSlideIn2; - animation-duration: 2s; - animation-delay: 0.6s; - transition-timing-function: ease; - animation-fill-mode: forwards; +.ten_img { + opacity: 0; + animation-name: fadeSlideIn2; + animation-duration: 2s; + animation-delay: 0.6s; + transition-timing-function: ease; + animation-fill-mode: forwards; } /* 定义动画 */ @keyframes fadeSlideIn2 { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } /* 功能卡片 */ -.card{ - height: auto; - width: 100%; - max-width: 1280px; - margin: 0 auto; +.card { + height: auto; + width: 100%; + max-width: 1280px; + margin: 0 auto; } -.card-pic{ - max-width: 717px; +.card-pic { + max-width: 717px; } -.card-con{ - padding-top: 120px; +.card-con { + padding-top: 120px; } -.card-con-768{ - padding-top: 56px; - display: none; +.card-con-768 { + padding-top: 56px; + display: none; } -.card-con-layout{ - display: flex; - align-items: flex-start; - margin-top: 56px; +.card-con-layout { + display: flex; + align-items: flex-start; + margin-top: 56px; } -.card-h1{ - text-align: center; - color: var(--text-color); +.card-h1 { + text-align: center; + color: var(--text-color); } -.card-ul{ - width: 483px; - margin-right: 48px; - padding-right: 32px; +.card-ul { + width: 483px; + margin-right: 48px; + padding-right: 32px; } -.card-768-ul .icon{ - flex: 1; - display: inline-block; - padding: 10px; - background-color: var(--bg-292c2f-color); - box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.05); - border-radius: 8px; - margin-bottom: 16px; +.card-768-ul .icon { + flex: 1; + display: inline-block; + padding: 10px; + background-color: var(--bg-292c2f-color); + box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.05); + border-radius: 8px; + margin-bottom: 16px; } -.card-ul .card-ul-item{ - display: flex; - align-items: center; - padding: 24px 16px; - border-bottom: 1px solid var(--border-color); - cursor: pointer; - max-height: 50px; - transition: max-height 1s ease; +.card-ul .card-ul-item { + display: flex; + align-items: center; + padding: 24px 16px; + border-bottom: 1px solid var(--border-color); + cursor: pointer; + max-height: 50px; + transition: max-height 1s ease; } @keyframes fadeSlideIn3 { - from { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +.card-ul .card-ul-item:hover { + background-color: var(--bg-hover-color); +} +.card-ul .card-ul-item .icon { + flex: 1; + display: inline-block; + padding: 10px; + background-color: var(--bg-292c2f-color); + box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.05); + border-radius: 8px; + margin-right: 24px; +} +.card-ul .card-ul-item .arrows { + display: inline-block; + height: 18px; + width: 18px; +} +.card-ul-item-h3 { + color: var(--text-color); +} +.card-ul-item-unfolded { + display: flex; + justify-content: space-between; + align-items: center; + flex: 14; +} +.card-ul-item-expand { + display: none; +} +.card-ul-item-expand-tit { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} +.card-ul-item-txt { + display: inline-block; + color: var(--txt-gray-color); opacity: 0; - transform: translateY(30px); - } - to { - opacity: 1; - transform: translateY(0); - } -} -.card-ul .card-ul-item:hover{ - background-color: var(--bg-hover-color); -} -.card-ul .card-ul-item .icon{ - flex: 1; - display: inline-block; - padding: 10px; - background-color: var(--bg-292c2f-color); - box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.05); - border-radius: 8px; - margin-right: 24px; -} -.card-ul .card-ul-item .arrows{ - display: inline-block; - height: 18px; - width: 18px; -} -.card-ul-item-h3{ - color: var(--text-color); -} -.card-ul-item-unfolded{ - display: flex; - justify-content: space-between; - align-items: center; - flex: 14; -} -.card-ul-item-expand{ - display: none; -} -.card-ul-item-expand-tit{ - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 16px; -} -.card-ul-item-txt{ - display: inline-block; - color: var(--txt-gray-color); - opacity: 0; - animation: fadeSlideIn3 0.5s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards var(--delay); + animation: fadeSlideIn3 0.5s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards + var(--delay); } @keyframes fadeSlideIn3 { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { + opacity: 0; + } + to { + opacity: 1; + } } -.card-ul-item.active{ - align-items: flex-start !important; - max-height: 138px; +.card-ul-item.active { + align-items: flex-start !important; + max-height: 138px; } -.card-ul-item.active .arrows{ - transform: rotate(180deg); +.card-ul-item.active .arrows { + transform: rotate(180deg); } -.card-ul-item.active .card-ul-item-unfolded{ - display: none; +.card-ul-item.active .card-ul-item-unfolded { + display: none; } -.card-ul-item.active .card-ul-item-expand{ - display: inline-block; +.card-ul-item.active .card-ul-item-expand { + display: inline-block; } /* 为什么选择我们 */ -.choose{ - position: relative; - height: auto; - width: 100%; - max-width: 1280px; - margin: 0 auto; - z-index: 10; +.choose { + position: relative; + height: auto; + width: 100%; + max-width: 1280px; + margin: 0 auto; + z-index: 10; } -.choose-con{ - padding: 240px 0 120px 0; +.choose-con { + padding: 240px 0 120px 0; } -.choose-con-768{ - display: none; - justify-content: center; - align-items: center; - flex-direction: column; - padding-bottom: 88px; +.choose-con-768 { + display: none; + justify-content: center; + align-items: center; + flex-direction: column; + padding-bottom: 88px; } -.choose-con-768-box{ - position: relative; - width: calc(100vw); - overflow-x: hidden; +.choose-con-768-box { + position: relative; + width: calc(100vw); + overflow-x: hidden; } -.zh_choose_768,.en_choose_768{ - /* min-height: 257px; */ +.zh_choose_768, +.en_choose_768 { + /* min-height: 257px; */ } -.choose-con-768-ul{ - z-index: 99; - display: flex; - position: absolute; - left: 0; - top: 10px; - transition: all cubic-bezier(0, -0.26, 0.13, 1.04) .8s; +.choose-con-768-ul { + z-index: 99; + display: flex; + position: absolute; + left: 0; + top: 10px; + transition: all cubic-bezier(0, -0.26, 0.13, 1.04) 0.8s; } .choose-con-768-ul::-webkit-scrollbar { - display: none; + display: none; } -.choose-con-768-item{ - padding: 30px 24px; - width: calc(100vw - 88px); - min-height: 177px; - height: 100%; - background: var(--choose-bg-hover-color); - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); - border-radius: 12px; - margin: 0 20px; +.choose-con-768-item { + padding: 30px 24px; + width: calc(100vw - 88px); + min-height: 177px; + height: 100%; + background: var(--choose-bg-hover-color); + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 12px; + margin: 0 20px; } #card-indicators { - position: absolute; - bottom: 54px; - left: 50%; - transform: translateX(-50%); - display: flex; - justify-content: center; - align-items: center; - z-index: 99; + position: absolute; + bottom: 54px; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: center; + align-items: center; + z-index: 99; } .card-indicators-item { - list-style: none; - margin: 0 5px; - width: 10px; - height: 10px; - border-radius: 50%; - background-color: var(--border-color); - cursor: pointer; - transition: background-color 0.3s ease-in-out; + list-style: none; + margin: 0 5px; + width: 10px; + height: 10px; + border-radius: 50%; + background-color: var(--border-color); + cursor: pointer; + transition: background-color 0.3s ease-in-out; } .card-indicators-item.active { - background-color: var(--txt-theme-color); + background-color: var(--txt-theme-color); } -.arcs2{ - display: inline-block; - position: absolute; - width: 100%; - left: 0; - bottom: -28px; +.arcs2 { + display: inline-block; + position: absolute; + width: 100%; + left: 0; + bottom: -28px; } -.choose-con-ul{ - display: flex; - justify-content: space-between; +.choose-con-ul { + display: flex; + justify-content: space-between; } -.choose-con-item{ - width: calc(18vw + 12px); - padding: 24px; - +.choose-con-item { + width: calc(18vw + 12px); + padding: 24px; } -.choose-con-ul .hover{ - cursor: pointer; - transition: all .3s ease-in-out; +.choose-con-ul .hover { + cursor: pointer; + transition: all 0.3s ease-in-out; } -.choose-con-ul .hover:hover{ - background-color: var(--choose-bg-hover-color); - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); - border-radius: 12px; - transform: translateY(-16px); +.choose-con-ul .hover:hover { + background-color: var(--choose-bg-hover-color); + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 12px; + transform: translateY(-16px); } -.choose-con-tit{ - color: var(--text-color); - padding-top: 80px; - position: relative; - width: fit-content; +.choose-con-tit { + color: var(--text-color); + padding-top: 80px; + position: relative; + width: fit-content; +} +.home_pic7_768 { + display: none; } -.home_pic7_768{ - display: none; -} \ No newline at end of file diff --git a/public/site/css/log.css b/public/site/css/log.css index b074d42b8..ebaf79e5d 100644 --- a/public/site/css/log.css +++ b/public/site/css/log.css @@ -1,146 +1,146 @@ /* 头部样式 */ -.nav{ - background-color: var(--pop-bg-color); - box-shadow: 0px 4px 9px var(--box-shadow-color); +.nav { + background-color: var(--pop-bg-color); + box-shadow: 0px 4px 9px var(--box-shadow-color); } -.logs{ - position: relative; - margin: 136px 0 96px 0; +.logs { + position: relative; + margin: 136px 0 96px 0; } -.logs-con{ - width: 100%; - max-width: 1280px; - margin: 0 auto; +.logs-con { + width: 100%; + max-width: 1280px; + margin: 0 auto; } -.logs-layout{ - display: flex; - align-items: flex-start; - /* height: 929px; */ +.logs-layout { + display: flex; + align-items: flex-start; + /* height: 929px; */ } -.logs-l{ - padding: 24px; - background-color: var(--bg-fa-color); - border-radius: 8px; - margin-right: 32px; - height: 95%; +.logs-l { + padding: 24px; + background-color: var(--bg-fa-color); + border-radius: 8px; + margin-right: 32px; + height: 95%; } -.logs-h5{ - font-weight: 400; - font-size: 16px; - line-height: 20px; - color: var(--text-color); +.logs-h5 { + font-weight: 400; + font-size: 16px; + line-height: 20px; + color: var(--text-color); } -.logs-l-ul{ - width: 240px; +.logs-l-ul { + width: 240px; } -.l-ul-item.active .txt{ - color: var(--txt-theme-color); +.l-ul-item.active .txt { + color: var(--txt-theme-color); } -.l-ul-item.active{ - background-color: var(--bg-hover-color); - border-radius: 8px; +.l-ul-item.active { + background-color: var(--bg-hover-color); + border-radius: 8px; } -.l-ul-item:hover{ - background-color: var(--bg-hover-color); - border-radius: 8px; +.l-ul-item:hover { + background-color: var(--bg-hover-color); + border-radius: 8px; } -.txt{ - /* display: inline-block; */ - color: var(--txt-gray-color); +.txt { + /* display: inline-block; */ + color: var(--txt-gray-color); } -.logs-r{ - border-left: 1px solid var(--border-color); - padding-left: 32px; - /* height: 929px; */ - /* overflow-y:scroll; */ +.logs-r { + border-left: 1px solid var(--border-color); + padding-left: 32px; + /* height: 929px; */ + /* overflow-y:scroll; */ } -.logs-r::-webkit-scrollbar{ - width: 0 !important +.logs-r::-webkit-scrollbar { + width: 0 !important; } -.logs-h1{ - color: var(--text-color); +.logs-h1 { + color: var(--text-color); } -.logs-h4{ - font-weight: 500; - font-size: 24px; - line-height: 30px; - color: var(--text-color); - padding-top: 15px; - box-sizing: border-box; +.logs-h4 { + font-weight: 500; + font-size: 24px; + line-height: 30px; + color: var(--text-color); + padding-top: 15px; + box-sizing: border-box; } -.r-ol-item{ - color: var(--txt-gray-color); - position: relative; +.r-ol-item { + color: var(--txt-gray-color); + position: relative; } -.r-ul-item:last-child{ - margin-bottom: 0 !important; +.r-ul-item:last-child { + margin-bottom: 0 !important; } -.dots{ - background: url(../img/dots.svg) no-repeat; - width: 4px; - height: 4px; - display: inline-block; - position: absolute; - left: 10px; - top: 10px; +.dots { + background: url(../img/dots.svg) no-repeat; + width: 4px; + height: 4px; + display: inline-block; + position: absolute; + left: 10px; + top: 10px; } -.logs-t-768{ - display: flex; - align-items: center; - padding: 14px 16px; - background: var(--bg-fa-color); - border-radius: 8px; - margin-top: 16px; - cursor: pointer; - margin-bottom: 40px; +.logs-t-768 { + display: flex; + align-items: center; + padding: 14px 16px; + background: var(--bg-fa-color); + border-radius: 8px; + margin-top: 16px; + cursor: pointer; + margin-bottom: 40px; } -.logs-t-prev{ - display: inline-block; - width: 14px; - margin-right: 8px; +.logs-t-prev { + display: inline-block; + width: 14px; + margin-right: 8px; } -.logs-t-tit{ - font-weight: 400; - font-size: 16px; - line-height: 20px; - color: var(--txt-theme-color); +.logs-t-tit { + font-weight: 400; + font-size: 16px; + line-height: 20px; + color: var(--txt-theme-color); } -.logs-drawer{ - position: fixed; - top: 0; - left: -90vw; - width: 75vw; - height: 100%; - padding: 22px 24px; - background-color: var(--pop-bg-color); - border: 1px solid var(--box-shadow-color); - box-shadow: var(--pop-box-shadow); - transition: all 0.5s ease-in-out; - z-index: 999; +.logs-drawer { + position: fixed; + top: 0; + left: -90vw; + width: 75vw; + height: 100%; + padding: 22px 24px; + background-color: var(--pop-bg-color); + border: 1px solid var(--box-shadow-color); + box-shadow: var(--pop-box-shadow); + transition: all 0.5s ease-in-out; + z-index: 999; } -.open-logs-drawer{ - left: 0; +.open-logs-drawer { + left: 0; } -.logs-t-768{ - display: none; +.logs-t-768 { + display: none; } -.log-a{ +.log-a { display: block; width: 100%; height: 100%; padding: 9px 16px; line-height: normal; } -.logs-sticky{ - position: sticky; - top: 80px; - height: calc(100vh - 136px); +.logs-sticky { + position: sticky; + top: 80px; + height: calc(100vh - 136px); } -#help-l-ul{ +#help-l-ul { overflow-y: auto; height: calc(100% - 36px); } -.footer-layut{ +.footer-layout { border-top: var(--border-color) solid 1px; } diff --git a/public/site/css/price.css b/public/site/css/price.css index 19841a660..972ed38f5 100644 --- a/public/site/css/price.css +++ b/public/site/css/price.css @@ -1,228 +1,229 @@ - /* 头部样式 */ -.head{ - background: var(--bg-10-url) top left no-repeat; - background-size: contain; +.head { + background: var(--bg-10-url) top left no-repeat; + background-size: contain; } -.price-card{ - width: 100%; - display: flex; - justify-content: space-between; - z-index: 2; +.price-card { + width: 100%; + display: flex; + justify-content: space-between; + z-index: 2; } -.price-card-item{ - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 24px; - width: 298px; - transition: all .3s ease-in-out; - background: var(--choose-bg-hover-color); - border: 1px solid var(--border-color); - border-radius: 12px; - cursor: pointer; +.price-card-item { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 24px; + width: 298px; + transition: all 0.3s ease-in-out; + background: var(--choose-bg-hover-color); + border: 1px solid var(--border-color); + border-radius: 12px; + cursor: pointer; } -.price-card-item:hover{ - border: 1px solid var(--txt-theme-color); - transform: translateY(-16px); +.price-card-item:hover { + border: 1px solid var(--txt-theme-color); + transform: translateY(-16px); } -.price-animate-box{ - opacity: 0; - transform: translateY(50%); - animation: fadeIn 1s ease-in-out forwards var(--delay); /* 应用动画效果 */ +.price-animate-box { + opacity: 0; + transform: translateY(50%); + animation: fadeIn 1s ease-in-out forwards var(--delay); /* 应用动画效果 */ } -.price-card-item:hover .btn-green{ - background-color: var(--txt-theme-color); - color: #fff; +.price-card-item:hover .btn-green { + background-color: var(--txt-theme-color); + color: #fff; } -.price-card-h4{ - color: var(--text-color); - display: flex; +.price-card-h4 { + color: var(--text-color); + display: flex; } -.price-card-item.active{ - border: 2px solid var(--txt-theme-color); - box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05); +.price-card-item.active { + border: 2px solid var(--txt-theme-color); + box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05); } -.price-card-item.active .btn-green{ - background-color: var(--txt-theme-color); - color: #fff; +.price-card-item.active .btn-green { + background-color: var(--txt-theme-color); + color: #fff; } -.price-card-item.active .btn-green:hover{ - background-color: var(--btn-hover-color); - border-color: var(--btn-hover-color); +.price-card-item.active .btn-green:hover { + background-color: var(--btn-hover-color); + border-color: var(--btn-hover-color); } -.price-card-item.active .price-card-h4{ - display: flex; - align-items: center; - color: var(--txt-theme-color); +.price-card-item.active .price-card-h4 { + display: flex; + align-items: center; + color: var(--txt-theme-color); } -.rec-icon{ - display: flex; - flex-direction: row; - align-items: center; - padding: 2px 6px; - height: 20px; - background-color: var(--bg-rec-color); - border-radius: 4px; - color: #fff; - font-size: 14px; - line-height: 16px; - margin-left: 8px; +.rec-icon { + display: flex; + flex-direction: row; + align-items: center; + padding: 2px 6px; + height: 20px; + background-color: var(--bg-rec-color); + border-radius: 4px; + color: #fff; + font-size: 14px; + line-height: 16px; + margin-left: 8px; } -.price-card-money{ - display: flex; - align-items: flex-end; +.price-card-money { + display: flex; + align-items: flex-end; } -.price-card-h2{ - color: var(--text-color); - text-align: left; - margin-right: 4px; +.price-card-h2 { + color: var(--text-color); + text-align: left; + margin-right: 4px; } -.price-card-unit{ - color: var(--txt-gray-color); +.price-card-unit { + color: var(--txt-gray-color); } -.price-card-h6{ - color: var(--txt-gray-color); - text-align: left; +.price-card-h6 { + color: var(--txt-gray-color); + text-align: left; } -.price-card-ol-item{ - display: flex; - align-items: flex-start; +.price-card-ol-item { + display: flex; + align-items: flex-start; } -.price-card-ol-item .icon{ - display: inline-block; - height: 20px; +.price-card-ol-item .icon { + display: inline-block; + height: 20px; } -.plans-ul-t .plans-ul-t-item:last-child,.plans-ol-item:last-child{ - border-bottom: none !important; +.plans-ul-t .plans-ul-t-item:last-child, +.plans-ol-item:last-child { + border-bottom: none !important; } -.plans-ol .plans-ol-item:first-child{ - background-color: var(--bg-fa-color); - padding: 20px 24px !important; +.plans-ol .plans-ol-item:first-child { + background-color: var(--bg-fa-color); + padding: 20px 24px !important; } -.plans{ - position: relative; +.plans { + position: relative; } -.plans-tit-h2{ - text-align: center; - color: var(--text-color); +.plans-tit-h2 { + text-align: center; + color: var(--text-color); } -.plans-tit-h5{ - text-align: center; - color: var(--txt-gray-color); +.plans-tit-h5 { + text-align: center; + color: var(--txt-gray-color); } -.plans-con{ - width: 100%; - max-width: 1280px; - margin: 0 auto; - z-index: 2; - position: relative; +.plans-con { + width: 100%; + max-width: 1280px; + margin: 0 auto; + z-index: 2; + position: relative; } -.plans-layout{ - padding: 120px 0; +.plans-layout { + padding: 120px 0; } -.plans-ul-t-item{ - border-bottom: 1px solid var(--border-color); +.plans-ul-t-item { + border-bottom: 1px solid var(--border-color); } -.plans-ul-t-item-h4{ - color: var(--text-color); +.plans-ul-t-item-h4 { + color: var(--text-color); } -.plans-ol-item{ - display: flex; - align-items: center; - padding: 24px; - border-bottom: 1px solid var(--border-color); +.plans-ol-item { + display: flex; + align-items: center; + padding: 24px; + border-bottom: 1px solid var(--border-color); } -.plans-ol-item .plans-ol-item-h6:first-child{ - color: var(--txt-gray-color) !important; +.plans-ol-item .plans-ol-item-h6:first-child { + color: var(--txt-gray-color) !important; } -.plans-ol-item-h6{ - color: var(--txt-4ca5); - line-height: normal; +.plans-ol-item-h6 { + color: var(--txt-4ca5); + line-height: normal; } -.plans-ol-item-icon{ - display: block; - height: 24px; +.plans-ol-item-icon { + display: block; + height: 24px; } -.plans-ol-item-icon2{ - display: block; - height: 24px; - opacity: 0.5; +.plans-ol-item-icon2 { + display: block; + height: 24px; + opacity: 0.5; } -.plans-ul-b{ - display: grid; +.plans-ul-b { + display: grid; grid-template-columns: 506px 266px 266px 266px; } -.plans-ul-b-item-btn{ - display: inline-block; - width: 160px; +.plans-ul-b-item-btn { + display: inline-block; + width: 160px; } -.flex-s-c{ - display: flex; - justify-content: flex-start; - align-items: center; +.flex-s-c { + display: flex; + justify-content: flex-start; + align-items: center; } -.plans-ul-768{ - display: none; +.plans-ul-768 { + display: none; } -.plans-ul-768-item:nth-of-type(1),.plans-ul-768-item:nth-of-type(2){ - border-bottom: 1px solid var(--border-color); - padding-bottom: 36px; +.plans-ul-768-item:nth-of-type(1), +.plans-ul-768-item:nth-of-type(2) { + border-bottom: 1px solid var(--border-color); + padding-bottom: 36px; } -.plans-ol-768-item{ - border: 1px solid var(--border-color); - border-radius: 12px; - margin-bottom: 24px; - background-color: var(--bg-color); +.plans-ol-768-item { + border: 1px solid var(--border-color); + border-radius: 12px; + margin-bottom: 24px; + background-color: var(--bg-color); } -.plans-ol-768-item .plans-ol-768-content{ - display: flex; - align-items: center; - justify-content: space-between; - padding: 20px 24px; +.plans-ol-768-item .plans-ol-768-content { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 24px; } -.plans-ol-768-item .plans-ol-768-content:nth-child(2n){ - background-color: var(--bg-fa-color); +.plans-ol-768-item .plans-ol-768-content:nth-child(2n) { + background-color: var(--bg-fa-color); } -.plans-ol-768-item .plans-ol-768-content:last-child{ - border-radius: 0 0 12px 12px; +.plans-ol-768-item .plans-ol-768-content:last-child { + border-radius: 0 0 12px 12px; } /* 底部样式 */ -.footer-layut{ - border-top: var(--border-color) solid 1px; +.footer-layout { + border-top: var(--border-color) solid 1px; } -.BulletBox1{ - position: fixed; - display: none; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - background-color: #fff; - width: 430px; - text-align: center; - z-index: 9999; - border: 1px solid transparent; - border-radius: 18px; - box-sizing: border-box; - box-shadow: 0 4px 12px rgba(0,0,0,.15); +.BulletBox1 { + position: fixed; + display: none; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + width: 430px; + text-align: center; + z-index: 9999; + border: 1px solid transparent; + border-radius: 18px; + box-sizing: border-box; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 600px) { - .BulletBox1{ - width: 80%; - } + .BulletBox1 { + width: 80%; + } } -.BulletBox1 .top{ - width: 382px; - line-height: 20px; - padding: 22px 24px 20px 24px; - font-size: 18px; - color: #303133; +.BulletBox1 .top { + width: 382px; + line-height: 20px; + padding: 22px 24px 20px 24px; + font-size: 18px; + color: #303133; font-weight: 500; overflow: hidden; text-overflow: ellipsis; @@ -230,38 +231,38 @@ display: flex; justify-content: space-between; } -.BulletBox1 .content{ - width: 100%; - box-sizing: border-box; - line-height: 1.5; - font-size: 14px; - padding:16px 32px 2px 32px; - text-align: left; - color: rgb(96, 98, 102); +.BulletBox1 .content { + width: 100%; + box-sizing: border-box; + line-height: 1.5; + font-size: 14px; + padding: 16px 32px 2px 32px; + text-align: left; + color: rgb(96, 98, 102); } -.BulletBox1 .bottom{ - display: flex; - justify-content: end; - padding: 20px 30px 22px 30px; - position: relative; +.BulletBox1 .bottom { + display: flex; + justify-content: end; + padding: 20px 30px 22px 30px; + position: relative; } -.BulletBox1 .bottom .BulletBox1Btn{ - min-width: 100px; - right: 20px; - height: 34px; - line-height: 32px; - color: #fff; - background-color: #8bcf70; - border-color: #8bcf70; - cursor: pointer; - border-radius: 8px; - padding: 5px; +.BulletBox1 .bottom .BulletBox1Btn { + min-width: 100px; + right: 20px; + height: 34px; + line-height: 32px; + color: #fff; + background-color: #8bcf70; + border-color: #8bcf70; + cursor: pointer; + border-radius: 8px; + padding: 5px; } .price-ceiling { - position: sticky; - top: 80px; - background-color: var(--bg-color); - border-bottom: 1px solid var(--border-color); - z-index: 9999; -} \ No newline at end of file + position: sticky; + top: 80px; + background-color: var(--bg-color); + border-bottom: 1px solid var(--border-color); + z-index: 9999; +} diff --git a/public/site/css/product.css b/public/site/css/product.css index 0048474bf..4d62168e0 100644 --- a/public/site/css/product.css +++ b/public/site/css/product.css @@ -1,309 +1,312 @@ /* 头部样式 */ -.head.product{ - position: relative; - background: var(--bg-3-url) top right no-repeat; +.head.product { + position: relative; + background: var(--bg-3-url) top right no-repeat; } -.prooduct-con{ - width: 100%; - max-width: 1280px; - margin: 0 auto; - position: relative; +.prooduct-con { + width: 100%; + max-width: 1280px; + margin: 0 auto; + position: relative; } -.prooduct-list{ - display: flex; - flex-wrap: wrap; +.prooduct-list { + display: flex; + flex-wrap: wrap; } -.prooduct-list .prooduct-list-item{ - padding: 24px; - background-color: var(--bg-fa-color); - border: 1px solid var(--border-color); - border-radius: 12px; - cursor: pointer; - margin-right: 32px; - width: 100%; - margin-bottom: 24px; - opacity: 0; - animation: fadeIn 0.5s ease-in-out forwards var(--delay); /* 应用动画效果 */ +.prooduct-list .prooduct-list-item { + padding: 24px; + background-color: var(--bg-fa-color); + border: 1px solid var(--border-color); + border-radius: 12px; + cursor: pointer; + margin-right: 32px; + width: 100%; + margin-bottom: 24px; + opacity: 0; + animation: fadeIn 0.5s ease-in-out forwards var(--delay); /* 应用动画效果 */ } /* 定义动画 */ @keyframes fadeIn { - from { + from { + opacity: 0; + transform: translateY(50%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +.prooduct-list .prooduct-list-item.top { + max-width: 180px; +} +.prooduct-list .prooduct-list-item:nth-of-type(6), +.prooduct-list .prooduct-list-item:nth-of-type(10) { + margin-right: 0 !important; +} +.prooduct-list .prooduct-list-item.bot { + max-width: 246px; +} +.prooduct-list .prooduct-list-item:hover { + background-color: var(--choose-bg-hover-color); + border: 1px solid var(--txt-theme-color); + box-shadow: 0px 1px 6px 2px rgba(0, 0, 0, 0.12); +} +.prooduct-list .prooduct-list-item .icon { + width: 48px; + display: block; + margin-bottom: 16px; +} +.prooduct-list .prooduct-list-item .txt { + color: var(--txt-gray-color); +} +.prooduct-list .active { + background-color: var(--choose-bg-hover-color) !important; + border: 1px solid var(--txt-theme-color) !important; + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05) !important; +} +.prooduct-list .prev, +.prooduct-list .next { + padding: 14px; + background: var(--choose-bg-hover-color); + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 8px; + cursor: pointer; + display: none; +} +.prooduct-list .prev { + margin-right: 16px; +} +.prooduct-list .next { + margin-left: 16px; +} +.active .txt { + color: var(--text-color) !important; +} +.details { + display: none; + width: 100%; + max-width: 1280px; opacity: 0; - transform: translateY(50%); - } - to { - opacity: 1; - transform: translateY(0); - } + transform: translateY(20%); /* 将元素向下移动 50 像素 */ + animation-name: fadeIn2; /* 指定动画名称 */ + animation-duration: 1s; /* 动画持续时间为 1 秒 */ + transition-delay: 1s; + transition-timing-function: ease; + animation-fill-mode: forwards; /* 元素保持动画结束状态 */ } -.prooduct-list .prooduct-list-item.top{ - max-width: 180px; +.details.active { + display: block; } -.prooduct-list .prooduct-list-item:nth-of-type(6),.prooduct-list .prooduct-list-item:nth-of-type(10){ - margin-right: 0 !important; +.details-ul-1280 { + display: none; + flex-wrap: wrap; + justify-content: space-between; + padding: 56px 48px; + background-color: var(--choose-bg-hover-color); + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 12px; } -.prooduct-list .prooduct-list-item.bot{ - max-width: 246px; +.details-ul-1280 .details-ul-item { + width: 48%; } -.prooduct-list .prooduct-list-item:hover{ - background-color: var(--choose-bg-hover-color); - border: 1px solid var(--txt-theme-color); - box-shadow: 0px 1px 6px 2px rgba(0, 0, 0, 0.12); +.prooduct-ul { + margin: 12px 0 125px 0; } -.prooduct-list .prooduct-list-item .icon{ - width: 48px; - display: block; - margin-bottom: 16px; -} -.prooduct-list .prooduct-list-item .txt{ - color: var(--txt-gray-color); -} -.prooduct-list .active{ - background-color: var(--choose-bg-hover-color) !important; - border: 1px solid var(--txt-theme-color) !important; - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05) !important; -} -.prooduct-list .prev,.prooduct-list .next{ - padding: 14px; - background: var(--choose-bg-hover-color); - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05);; - border-radius: 8px; - cursor: pointer; - display: none; -} -.prooduct-list .prev{ - margin-right: 16px; -} -.prooduct-list .next{ - margin-left: 16px; -} -.active .txt{ - color: var(--text-color) !important; -} -.details{ - display: none; - width: 100%; - max-width: 1280px; - opacity: 0; - transform: translateY(20%); /* 将元素向下移动 50 像素 */ - animation-name: fadeIn2; /* 指定动画名称 */ - animation-duration: 1s; /* 动画持续时间为 1 秒 */ - transition-delay: 1s; - transition-timing-function: ease; - animation-fill-mode: forwards; /* 元素保持动画结束状态 */ -} -.details.active{ - display: block; -} -.details-ul-1280{ - display: none; - flex-wrap: wrap; - justify-content: space-between; - padding: 56px 48px; - background-color: var(--choose-bg-hover-color); - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05);; - border-radius: 12px; -} -.details-ul-1280 .details-ul-item{ - width: 48%; -} -.prooduct-ul{ - margin: 12px 0 125px 0; -} -.details-con{ - display: flex; - align-items: flex-start; - padding: 56px 48px; - background-color: var(--choose-bg-hover-color); - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05);; - border-radius: 12px; - +.details-con { + display: flex; + align-items: flex-start; + padding: 56px 48px; + background-color: var(--choose-bg-hover-color); + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 12px; } /* 定义动画 */ @keyframes fadeIn2 { - from { - opacity: 0; - transform: translateY(20%); - } - to { - opacity: 1; - transform: translateY(0); - } + from { + opacity: 0; + transform: translateY(20%); + } + to { + opacity: 1; + transform: translateY(0); + } } -.details-con .pic{ - display: block; +.details-con .pic { + display: block; } -.details-con .details-ul{ - margin-left: 56px; +.details-con .details-ul { + margin-left: 56px; } -.details-con .details-ul.item4{ - width: 764px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; +.details-con .details-ul.item4 { + width: 764px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; } -.details-con .details-ul.item4 .details-ul-item{ - width: 364px; +.details-con .details-ul.item4 .details-ul-item { + width: 364px; } -main{ - width: 100%; - z-index: 2; - position: relative; +main { + width: 100%; + z-index: 2; + position: relative; } -.manage{ - background-color: var(--bg-fa-color); +.manage { + background-color: var(--bg-fa-color); } -.manage-con{ - padding: 120px 0px; - width: 100%; - max-width: 1280px; - margin: 0 auto; - position: relative; +.manage-con { + padding: 120px 0px; + width: 100%; + max-width: 1280px; + margin: 0 auto; + position: relative; } -.manage-t{ - display: flex; - align-items: center; - flex-direction: column; +.manage-t { + display: flex; + align-items: center; + flex-direction: column; } -.manage-b{ - display: flex; - justify-content: space-between; - position: relative; +.manage-b { + display: flex; + justify-content: space-between; + position: relative; } -.manage-h1{ - color: var(--text-color); +.manage-h1 { + color: var(--text-color); } -.manage-h3{ - font-weight: 500; - font-size: 20px; - line-height: 25px; - color: var(--txt-191a15-color); +.manage-h3 { + font-weight: 500; + font-size: 20px; + line-height: 25px; + color: var(--txt-191a15-color); } -.manage-h5{ - color: var(--txt-gray-color); +.manage-h5 { + color: var(--txt-gray-color); } -.manage-h6{ - color: var(--txt-gray-color); +.manage-h6 { + color: var(--txt-gray-color); } -.manage-h5-768{ - display: none; +.manage-h5-768 { + display: none; } -.manage-tit{ - width: 341px; +.manage-tit { + width: 341px; } -.manage-icon{ - height: 24px; - display: block; +.manage-icon { + height: 24px; + display: block; } -.manage-bg{ - display: block; - max-width: 100%; - width: 100%; - height: 100% ; +.manage-bg { + display: block; + max-width: 100%; + width: 100%; + height: 100%; } -.manage-svg{ - position: relative; - box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05); - border-radius: 30px; - width: 405px; +.manage-svg { + position: relative; + box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 30px; + width: 405px; } -.manage-tips{ - padding: 18px 20px; - background: var(--choose-bg-hover-color); - box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05); - border-radius: 12px; - display: flex; - align-items: center; - position: absolute; - top: 42px; - left: 100px; - width: 76%; +.manage-tips { + padding: 18px 20px; + background: var(--choose-bg-hover-color); + box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 12px; + display: flex; + align-items: center; + position: absolute; + top: 42px; + left: 100px; + width: 76%; } -.manage-tips-txt{ - margin-left: 12px; - color: var(--text-color); +.manage-tips-txt { + margin-left: 12px; + color: var(--text-color); } -.manage-svg-h2{ - display: inline-block; - position: absolute; - bottom: 52px; - left: 120px; - text-align: end; - color: #fff; - width: 60%; +.manage-svg-h2 { + display: inline-block; + position: absolute; + bottom: 52px; + left: 120px; + text-align: end; + color: #fff; + width: 60%; } -.manage-ul-item{ - display: flex; - align-items: flex-start; +.manage-ul-item { + display: flex; + align-items: flex-start; } -.performance{ - position: relative; - background: var(--bg-4-url) top left no-repeat; +.performance { + position: relative; + background: var(--bg-4-url) top left no-repeat; } -.performance-con{ - padding: 120px 0px; - width: 100%; - max-width: 1280px; - margin: 0 auto; - +.performance-con { + padding: 120px 0px; + width: 100%; + max-width: 1280px; + margin: 0 auto; } -.performance-con .pic{ - display: block; - height: auto; +.performance-con .pic { + display: block; + height: auto; } -.performance-h1{ - color: var(--text-color); - text-align: center; +.performance-h1 { + color: var(--text-color); + text-align: center; } -.performance-ul{ - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-top: 48px; +.performance-ul { + display: flex; + align-items: flex-start; + justify-content: space-between; + margin-top: 48px; } -.performance-ul-item{ - width: 248px; +.performance-ul-item { + width: 248px; } -.performance-ul-item .icon{ - display: inline-block; - width: 24px; - height: 24px; - background-color: var(--txt-theme-color); - border-radius: 4px; - transform: rotate(45deg); +.performance-ul-item .icon { + display: inline-block; + width: 24px; + height: 24px; + background-color: var(--txt-theme-color); + border-radius: 4px; + transform: rotate(45deg); } -.performance-h5{ - color: var(--txt-191a15-color); +.performance-h5 { + color: var(--txt-191a15-color); } -.performance-h6{ - font-weight: 400; - font-size: 16px; - line-height: 24px; - color: var(--txt-gray-color); +.performance-h6 { + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: var(--txt-gray-color); } -.product-animate-box,.product-animate-box2{ - opacity: 0; - transform: translateY(25%); +.product-animate-box, +.product-animate-box2 { + opacity: 0; + transform: translateY(25%); } -.product-animate-box.animate{ - animation: fadeIn5 0.8s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards var(--delay); /* 应用动画效果 */ +.product-animate-box.animate { + animation: fadeIn5 0.8s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards + var(--delay); /* 应用动画效果 */ } -.product-animate-box2.animate{ - animation: fadeIn5 0.7s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards var(--delay); /* 应用动画效果 */ +.product-animate-box2.animate { + animation: fadeIn5 0.7s cubic-bezier(0.61, -0.01, 0.57, 0.96) forwards + var(--delay); /* 应用动画效果 */ } /* 定义动画 */ @keyframes fadeIn5 { - from { - opacity: 0; - transform: translateY(30%); - } - to { - opacity: 1; - transform: translateY(0); - } + from { + opacity: 0; + transform: translateY(30%); + } + to { + opacity: 1; + transform: translateY(0); + } } /* 底部样式 */ -.footer-layut{ - border-top: var(--border-color) solid 1px; -} \ No newline at end of file +.footer-layout { + border-top: var(--border-color) solid 1px; +} diff --git a/public/site/css/rem.css b/public/site/css/rem.css index dc2fa729a..f132d000e 100644 --- a/public/site/css/rem.css +++ b/public/site/css/rem.css @@ -1,814 +1,950 @@ -@media screen and (max-width: 1280px){ - .head-con,.companies-con,.card,.choose,.footer-con,.prooduct-con,.manage-con,.performance-con,.app-con,.nav-layout,.update-con,.logs-con,.help-con,.plans-con,.company-profile-con,.scenario-app-con,.footer-t-con,.topics-con,.collaboration{ - width: calc(100vw - 72px) !important; - padding-left: 36px !important; - padding-right: 36px !important; - } - .nav-r{ - width: 27%; - } - .nav-ul{ - width: 42%; - } - .card-pic{ - max-width: 50% !important; - margin-bottom: 36px !important; - } - .manage-b,.scenario-app-ul { - flex-wrap: wrap; - justify-content: center !important; - } - .update-layout{ - justify-content: center !important; - } - .update-l{ - margin-right: 36px; - } - .manage-b{ - display: block !important; - } - .details,.manage-tit,.company-profile-l{ - width: calc(100vw - 72px) !important; - } - .topics-tit{ - width: calc(100vw - 72px) !important; - text-align: center; - } - .prooduct-list .prooduct-list-item{ - width: auto !important; - max-width: 100% !important; - margin-right: 0 !important; - margin-bottom: 0 !important; - } - .prooduct-ul{ - margin-top: 36px !important; - } - .manage-ul-item{ - margin-bottom: 32px !important; - } - .details-con-item4{ - display: none !important; - } - .details-ul-1280{ - display: flex !important; - } - .app-ul{ - justify-content: center !important; - } - .team-ul,.price-card{ - flex-wrap: wrap !important; - justify-content: space-between!important; - } - .plans-ul-b{ - flex-wrap: wrap !important; - justify-content: flex-start !important; - } - .team-ul-item,.price-card-item,.plans-ul-b-item{ - margin-bottom: 32px; - } - .team-con{ - width: calc(100vw - 72px) !important; - padding: 120px 20px 88px 20px !important; - } - .download-ul{ - width: 100% !important; - } - .update-r{ - margin-left: 0 !important; - } - .grid-4{ - grid-template-columns: 32vw 18vw 18vw 18vw !important; - } - .grid-5{ - grid-template-columns: 26vw 18.5vw 18.5vw 18.5vw 18.5vw !important; - } - .plans-ul-b{ - grid-template-columns: calc(34vw + 4px) 18vw 18vw 18vw !important; - } - .scenario-app-ul-item:nth-of-type(3),.app-ul-item:nth-of-type(3){ - margin-bottom: 32px !important; - } - .company-profile-layout{ - flex-wrap: wrap; - justify-content: center !important; - } - .company-profile-r{ - margin-top: 48px !important; - width: auto !important; - } - .team-ul-item{ - width: auto !important; - height: auto !important; - } - .help-pic1{ - height: auto !important; - } - .help-pic1-tips-h2{ - margin-bottom: 0 !important; - } - .help-pic1-tips{ - position: relative; - padding: 12px 0 !important; - z-index: 10; - max-width: calc(100% - 123px) !important; - } - .help-pic1-tips-h2{ - font-weight: 500 !important; - font-size: 16px !important; - line-height: 24px !important; - margin-bottom: 8px !important; - } - .help-pic1-tips-h6{ - font-weight: 400 !important; - font-size: 12px !important; - line-height: 16px !important; - } - .choose-con-ul{ - justify-content: flex-start !important; - } - .choose-con-item,.app-ul-item,.scenario-app-ul-item{ - width: 100% !important; - } - .choose-con{ - padding: 120px 0 56px 0 !important; - } - .collaboration{ - /* padding-bottom: 56px !important; */ - } - .price-card-item{ - width: 22% !important; - min-width: 200px !important; - } - .performance-ul-item { - margin-right: 24px !important; - width: 100% !important; - } - .performance-ul-item:last-child { - margin-right: 0 !important; - } - .prooduct-list{ - display: grid !important; - grid-template-columns: repeat(3, 1fr) !important; - grid-gap: 24px 32px; - } - .plans-ul-b-item-btn{ - width: auto !important; - } - .app-bg-box{ - max-height: 100% !important; - } +@media screen and (max-width: 1280px) { + .head-con, + .companies-con, + .card, + .choose, + .footer-con, + .prooduct-con, + .manage-con, + .performance-con, + .app-con, + .nav-layout, + .update-con, + .logs-con, + .help-con, + .plans-con, + .company-profile-con, + .scenario-app-con, + .footer-t-con, + .topics-con, + .collaboration { + width: calc(100vw - 72px) !important; + padding-left: 36px !important; + padding-right: 36px !important; + } + .nav-r { + width: 27%; + } + .nav-ul { + width: 42%; + } + .card-pic { + max-width: 50% !important; + margin-bottom: 36px !important; + } + .manage-b, + .scenario-app-ul { + flex-wrap: wrap; + justify-content: center !important; + } + .update-layout { + justify-content: center !important; + } + .update-l { + margin-right: 36px; + } + .manage-b { + display: block !important; + } + .details, + .manage-tit, + .company-profile-l { + width: calc(100vw - 72px) !important; + } + .topics-tit { + width: calc(100vw - 72px) !important; + text-align: center; + } + .prooduct-list .prooduct-list-item { + width: auto !important; + max-width: 100% !important; + margin-right: 0 !important; + margin-bottom: 0 !important; + } + .prooduct-ul { + margin-top: 36px !important; + } + .manage-ul-item { + margin-bottom: 32px !important; + } + .details-con-item4 { + display: none !important; + } + .details-ul-1280 { + display: flex !important; + } + .app-ul { + justify-content: center !important; + } + .team-ul, + .price-card { + flex-wrap: wrap !important; + justify-content: space-between !important; + } + .plans-ul-b { + flex-wrap: wrap !important; + justify-content: flex-start !important; + } + .team-ul-item, + .price-card-item, + .plans-ul-b-item { + margin-bottom: 32px; + } + .team-con { + width: calc(100vw - 72px) !important; + padding: 120px 20px 88px 20px !important; + } + .download-ul { + width: 100% !important; + } + .update-r { + margin-left: 0 !important; + } + .grid-4 { + grid-template-columns: 32vw 18vw 18vw 18vw !important; + } + .grid-5 { + grid-template-columns: 26vw 18.5vw 18.5vw 18.5vw 18.5vw !important; + } + .plans-ul-b { + grid-template-columns: calc(34vw + 4px) 18vw 18vw 18vw !important; + } + .scenario-app-ul-item:nth-of-type(3), + .app-ul-item:nth-of-type(3) { + margin-bottom: 32px !important; + } + .company-profile-layout { + flex-wrap: wrap; + justify-content: center !important; + } + .company-profile-r { + margin-top: 48px !important; + width: auto !important; + } + .team-ul-item { + width: auto !important; + height: auto !important; + } + .help-pic1 { + height: auto !important; + } + .help-pic1-tips-h2 { + margin-bottom: 0 !important; + } + .help-pic1-tips { + position: relative; + padding: 12px 0 !important; + z-index: 10; + max-width: calc(100% - 123px) !important; + } + .help-pic1-tips-h2 { + font-weight: 500 !important; + font-size: 16px !important; + line-height: 24px !important; + margin-bottom: 8px !important; + } + .help-pic1-tips-h6 { + font-weight: 400 !important; + font-size: 12px !important; + line-height: 16px !important; + } + .choose-con-ul { + justify-content: flex-start !important; + } + .choose-con-item, + .app-ul-item, + .scenario-app-ul-item { + width: 100% !important; + } + .choose-con { + padding: 120px 0 56px 0 !important; + } + .collaboration { + /* padding-bottom: 56px !important; */ + } + .price-card-item { + width: 22% !important; + min-width: 200px !important; + } + .performance-ul-item { + margin-right: 24px !important; + width: 100% !important; + } + .performance-ul-item:last-child { + margin-right: 0 !important; + } + .prooduct-list { + display: grid !important; + grid-template-columns: repeat(3, 1fr) !important; + grid-gap: 24px 32px; + } + .plans-ul-b-item-btn { + width: auto !important; + } + .app-bg-box { + max-height: 100% !important; + } } -@media screen and (max-width: 1050px){ - .nav-ul,.nav-r{ - display: none; - } - .menuBtn{ - display: block; - } - .footer-t-layout{ - flex-direction: column !important; - } - .footer-t-l{ - margin-bottom: 32px; - } - .price-card-item{ - width: 358px !important; - } - .price-card-h2{ - font-size: 24px !important; - } - .plans-ul-t-item-h4{ - font-size: 16px !important; - } - .price-card-unit{ - font-size: 14px !important; - } - .update-layout{ - flex-wrap: wrap; - justify-content: center !important; - } - .update-l{ - margin-right: 0 !important; - } - .from-ul{ - width: calc(100vw - 72px) !important; - margin-top: 40px !important; - } - .update-ul{ - width: calc(100vw - 72px) !important; - } - .update-r{ - max-width: 100% !important; - } - .topics-h1-green,.topics-h1{ - font-size: 56px !important; - } - .collaboration-txt{ - font-size: 24px !important; - margin-bottom: 8px !important; - } - .logs-l-ul,.help-l-ul,.search-input{ - width: 220px !important; - } - .update-bg-svg{ - background-size: 62% !important; - } - .card-ul-item.active{ - max-height: 307px !important; - } - .footer_copyright{ - flex-direction: column; - } +@media screen and (max-width: 1050px) { + .nav-ul, + .nav-r { + display: none; + } + .menuBtn { + display: block; + } + .footer-t-layout { + flex-direction: column !important; + } + .footer-t-l { + margin-bottom: 32px; + } + .price-card-item { + width: 358px !important; + } + .price-card-h2 { + font-size: 24px !important; + } + .plans-ul-t-item-h4 { + font-size: 16px !important; + } + .price-card-unit { + font-size: 14px !important; + } + .update-layout { + flex-wrap: wrap; + justify-content: center !important; + } + .update-l { + margin-right: 0 !important; + } + .from-ul { + width: calc(100vw - 72px) !important; + margin-top: 40px !important; + } + .update-ul { + width: calc(100vw - 72px) !important; + } + .update-r { + max-width: 100% !important; + } + .topics-h1-green, + .topics-h1 { + font-size: 56px !important; + } + .collaboration-txt { + font-size: 24px !important; + margin-bottom: 8px !important; + } + .logs-l-ul, + .help-l-ul, + .search-input { + width: 220px !important; + } + .update-bg-svg { + background-size: 62% !important; + } + .card-ul-item.active { + max-height: 307px !important; + } + .footer_copyright { + flex-direction: column; + } } -@media screen and (max-width: 768px) and (min-width: 768px){ - .download-ul-item:nth-of-type(2){ - margin-right: 24px; - } +@media screen and (max-width: 768px) and (min-width: 768px) { + .download-ul-item:nth-of-type(2) { + margin-right: 24px; + } } -@media screen and (max-width: 768px){ - img{ - max-width: 100% !important; - } - .filings{ - font-size: 14px !important; - } - .nav-layout{ - height: 64px !important; - } - section{ - background: transparent !important; - } - #logo{ - height: 28px !important; - } - .btn{ - font-size: 15px !important; - line-height: 18px !important; - } - .companies-ul .companies-ul-item{ - height: 36px !important; - } - .topics-con{ - width: calc(100vw - 40px) !important; - padding-top: 100px !important; - padding-left: 20px !important; - padding-right: 20px !important; - } - .details, .manage-tit, .company-profile-l{ - width: calc(100vw - 40px) !important; - } - .nav{ - height: 60px !important; - } - .head-con,.card,.choose,.footer-con,.companies-con,.manage-con,.performance-con,.app-con,.team-con,.update-con,.logs-con,.help-con,.plans-con,.prooduct-con,.scenario-app-con,.footer-t-con,.nav-layout,.company-profile-con,.collaboration{ - width: calc(100vw - 40px) !important; - padding: 0 20px !important; - } - .company-profile-r{ - width: 100% !important; - margin-top: 0 !important; - } - .details,.manage-b,.performance-con .pic{ - width: calc(100vw - 40px) !important; - } - .manage-b{ - justify-content: center !important; - padding-bottom: 56px; - } - .topics-h1,.topics-h1-green{ - font-weight: 600; - font-size: 28px !important; - line-height: 35px !important; - text-align: center; - } - .topics-tit,.topics-h4{ - width: 340px !important; - margin-bottom: 20px !important; - text-align: center; - } - .solutions .topics-btn{ - margin-bottom: 56px !important; - } - .topics-btn{ - margin-bottom: 32px !important; - } - .arcs{ - top: 26px !important; - width: 120px !important; - } - .companies-h1{ - font-weight: 400; - font-size: 18px; - line-height: 22px; - } - .companies-con{ - padding: 32px 0!important; - } - .companies-ul{ - margin-top: 24px !important; - display: grid !important; - grid-template-columns: repeat(2, 50%) !important; - grid-template-rows: repeat(2, 50%) !important; - justify-items: center !important; - } - .companies-ul .companies-ul-item:nth-of-type(1),.companies-ul .companies-ul-item:nth-of-type(2){ - margin-bottom: 20px !important; - } - .card-con,.collaboration-bg,.choose-con,.footer-l,.footer-r,.manage-h5-1920,.download-ul-item .hover,.home_pic7{ - display: none !important; - } - .card-con-768,.performance-ul,.help-t-768,.prooduct-list .prev,.prooduct-list .next,.manage-ul-item,.logs-t-768,.plans-ul-768,.manage-h5-768,.home_pic7_768{ - display: block !important; - } - .choose-con-768{ - display: flex !important; - } - .manage-h5-768{ - width: 320px !important; - } - .card-pic{ - max-width: 100% !important; - } - .choose-con-768-item,.r-ul-item-pic1{ - height: auto !important; - } - .choose-con-tit{ - padding-top: 20px !important; - font-weight: 500; - font-size: 22px; - line-height: 30px; - text-align: center; - margin-bottom: 48px; - } - .manage-h1,.performance-h1,.app-h1,.team-tit,.update-h1{ - padding-top: 56px !important; - font-weight: 500; - font-size: 22px; - line-height: 28px; - text-align: center; - margin-bottom: 12px !important; - } - .manage-b,.app-ul,.team-ul{ - margin-top: 40px !important; - } - .manage-icon{ - margin-bottom: 16px; - } - .manage-h5,.app-h5,.topics-h4,.scenario-app-h6,.footer-t-h6{ - font-weight: 400; - font-size: 16px; - line-height: 24px; - text-align: center; - } - .app-h5{ - width: 320px !important; - } - .footer-t-h6{ - text-align: start !important; - margin-bottom: 32px !important; - } - .plans-tit-h5{ - font-weight: 400; - font-size: 16px; - line-height: 24px; - text-align: center; - margin-bottom: 48px !important; - } - .manage-h3{ - margin-bottom: 12px !important; - font-size: 18px !important; - } - .performance-h5,.help-h4,.price-card-h4{ - font-size: 18px !important; - } - .price-card-h4{ - margin-bottom: 20px !important; - } - .price-card-h2{ - font-size: 24px !important; - } - .price-card-h2{ - margin-right: 4px; - } - .manage-ul-item{ - margin-bottom: 36px !important; - } - .performance-ul{ - margin-top: 36px !important; - } - .arcs2{ - width: 170px !important; - left: 4px !important; - bottom: -12px !important; - } - .collaboration-txt{ - font-size: 20px !important; - max-width: 280px !important; - } - .collaboration{ - margin-bottom: 56px !important; - max-height: inherit !important; - } - .footer-layut{ - border-bottom: none !important; - padding: 0 !important; - } - .prooduct-list{ - display: flex !important; - flex-wrap: nowrap !important; - margin-bottom: 24px !important; - justify-content: space-between !important; - align-items: center !important; - grid-gap: 0 !important; - } - .prooduct-list .active{ - display: flex !important; - align-items: center; - } - .prooduct-list .prooduct-list-item.top{ - width: 100% !important; - } - .prooduct-list .prooduct-list-item{ - display: none; - padding: 16px !important; - margin: 0 !important; - } - .prooduct-list .prooduct-list-item .icon{ - width: 28px !important; - margin-bottom: 0 !important; - margin-right: 12px !important; - } - .prooduct-list .prooduct-list-item .txt{ - font-weight: 500; - font-size: 16px; - line-height: 20px; - } - .prooduct-ul{ - margin: 0 0 56px 0 !important; - } - .performance{ - background: var(--bg-768-4-url) top left no-repeat !important; - } - .about_green_bg{ - background: var(--bg-768-9-url) top right no-repeat !important; - } - .head.product{ - background: var(--bg-768-3-url) top left no-repeat !important; - } - .head.price{ - background: var(--bg-768-8-url) top left no-repeat !important; - } - .head.dow{ - background: var(--bg-768-7-url) top left no-repeat !important; - } - .head.solutions{ - background: var(--bg-768-5-url) top right no-repeat !important; - } - .team.solutions{ - background: var(--bg-768-6-url) top right no-repeat !important; - } - .details-con .pic{ - margin-bottom: 36px; - } - .choose-con-item-h5,.app-h4,.scenario-app-h5{ - font-size: 18px !important; - } - .choose-con-item-h6,.app-h6,.company-profile-h6,.scenario-app-h6,.footer-t-contact-h6,.update-h5,.performance-h6,.manage-h6,.download-ul-item .txt,.update-item .time,.price-card-unit,.price-card-h6{ - font-size: 15px !important; - } - .details-ul-item{ - margin-bottom: 32px !important; - } - .details-ul-item:last-child{ - margin-bottom: 0 !important; - } - .serial-number{ - font-size: 32px !important; - } - .details-ul-1280,.details-con{ - flex-direction: column; - justify-content: center; - align-items: center; - padding: 30px 24px !important; - } - .details-ul-1280 .details-ul-item,.update-ul,.update-l{ - width: 100% !important; - } - .details-con .details-ul{ - margin-left: 0 !important; - } - .performance-con .pic{ - margin-top: 40px !important; - } - .performance-ul-item{ - width: auto !important; - margin-bottom: 40px; - } - .app-bg{ - margin-bottom: 16px !important; - } - .app-h4{ - margin-bottom: 12px !important; - } - .app-ul-item{ - width: auto !important; - margin-bottom: 36px !important; - } - .team-ul-item{ - padding: 30px 24px !important; - } - .download-ul{ - flex-wrap: wrap !important; - justify-content: center !important; - padding-bottom: 32px !important; - padding-top: 12px !important; - } - .download-ul-item{ - margin-bottom: 24px; - } - .download-ul-item .normal,.download-ul-item .hover.radius,.download-ul-item .hover{ - width: 120px !important; - height: 120px !important; - } - .download-ul-item .icon{ - height: 36px !important; - } - .download-ul-item:nth-of-type(odd){ - margin-right: 24px; - } - .update-bg-svg{ - background: none !important; - } - .update-r{ - margin-bottom: 56px; - margin-top: 28px; - } - .logs-l,.help-l,.plans-ul-t,.plans-ul-b{ - display: none !important; - } - .logs-r,.help-r{ - border: none !important; - padding-left: 0 !important; - } - .logs-h1,.plans-tit-h2{ - font-weight: 600; - font-size: 22px !important; - line-height: 28px !important; - } - .company-profile-h1{ - margin-bottom: 34px !important; - margin-top: 40px !important; - font-weight: 500 !important; - font-size: 22px !important; - line-height: 28px !important; - } - .logs-h4{ - font-size: 18px !important; - line-height: 22px !important; - } - .r-ol-item,.help-h6,.l-ul-item .txt{ - font-weight: 400; - font-size: 15px !important; - line-height: 24px !important; - } - .logs{ - margin: 0 !important; - padding-bottom: 56px !important; - } - .help{ - margin: 0 !important; - padding-bottom: 20px !important; - } - .l-ul-item{ - padding: 12px 0 !important; - } - .logs-h5{ - margin-top: 10px; - font-weight: 400 !important; - font-size: 18px !important; - line-height: 20px !important; - } - .help-pic1{ - height: calc(50vw/2 + 10px) !important; - padding-left: 14px !important; - } - .help-pic1-tips-h2{ - font-weight: 500 !important; - font-size: 16px !important; - line-height: 24px !important; - margin-bottom: 8px !important; - } - .help-pic1-tips-h6{ - font-weight: 400 !important; - font-size: 12px !important; - line-height: 16px !important; - } - .help-pic1-tips{ - max-width: 160px !important; - } - #help_pic2{ - height: calc(60vw - 40px) !important; - } - #help_pic3{ - height: calc(80vw - 60px) !important; - } - .price-card{ - flex-direction: column !important; - } - .price-card-item{ - width: 100% !important; - height: 100% !important; - } - .price-card-item:last-of-type{ - margin-bottom: 0 !important; - } - .plans-layout{ - padding: 56px 0 !important; - } - .company-profile{ - width: 100% !important; - margin-top: 56px; - padding-top: 0 !important; - } - .company-profile-layout,.footer-t-layout{ - flex-direction: column !important; - } - .company-profile-arcs{ - bottom: -20px !important; - left: 0 !important; - } - .company-h2{ - font-weight: 500 !important; - font-size: 20px !important; - line-height: 30px !important; - } - .company-h6{ - font-weight: 400 !important; - font-size: 12px !important; - line-height: 15px !important; - } - .company-ul{ - width: 100% !important; - padding: 24px 0 !important; - margin-top: 12px !important; - } - .company-ul-item{ - padding: 0 24px !important; - } - .scenario-app,.footer-t{ - padding: 56px 0 !important ; - } - .scenario-app-h1,.footer-t-h1{ - font-weight: 500 !important; - font-size: 22px !important; - line-height: 28px !important; - } - .scenario-app-ul-item .scenario-app-h6{ - text-align: start !important; - } - .scenario-app-ul-item,.footer-t-l{ - width: 100% !important; - } - .from-ul{ - width: calc(100vw - 40px) !important; - margin-top: 8px !important; - } - .app-con,.team-con{ - padding-top: 0 !important; - padding-bottom: 24px !important; - } - .card-ul-item-txt,.prooduct-list .prooduct-list-item,.details-con{ - opacity: 1 !important; - animation: normal !important; - } - .details-con{ - transform: translateY(0) !important; - } - .company-profile-layout{ - padding-bottom: 56px !important; - } - .footer-t-h1{ - margin-bottom: 32px !important; - } - .logs-layout,.team-ul-item,.scenario-app-ul-item{ - height: auto !important; - } - .logs-r{ - height: auto !important; - overflow: auto !important; - } - .manage-svg{ - width: 100% !important; - } - .manage-bg{ - width: 100% !important; - margin-top: 0 !important; - } - .manage-tips{ - top: 42px !important; - right: 0 !important; - width: auto !important; - } - .manage-tips-txt{ - font-size: 16px !important; - line-height: 20px !important; - } - .manage-svg-h2{ - bottom: 52px; - right: 22px; - width: 45% !important; - font-size: 28px !important; - line-height: 40px !important; - } - .prooduct-list .prooduct-list-item.bot{ - width: auto !important; - } - .head.product{ - background-size: contain !important; - } - .details-ul-item:nth-of-type(4){ - margin-bottom: 32px !important; - } - .card-h1{ - margin-bottom: 40px !important; - } - .card-con-layout{ - margin-top: 0 !important; - } - .bg-style{ - background: transparent !important; - } - .logo{ - width: 32px !important; - } - .dootask{ - margin-left: 12px !important; - } - .price-card-item>.price-card-h6{ - height: auto !important; - margin-bottom: 20px !important; - } - .scenario-app-layout>.scenario-app-h6{ - margin-bottom: 48px !important; - } - .update-h1{ - margin-bottom: 28px !important; - } - .logs-t-768{ - margin-top: 96px !important; - } - #help-pic1-svg{ - width: 44%; - } - .en_choose_768{ - min-height: 378px !important; - } - .plans-ol-768-content .plans-ol-item-h6:first-child{ - color: var(--txt-gray-color) !important; - } - .plans-ol-768-content .plans-ol-item-h6:last-child{ - color: var(--txt-4ca5) !important; - } - .scenario-app-ul-item-svg{ - width: 140px !important; - } - .scenario-app-ul-item:hover,.price-card-item:hover,.team-ul-item:hover{ - transform: none !important; - } - .topics-tit, .topics-btn,.topics-h4,.ten_img,.details,.price-animate-box{ - opacity: 1 !important; - animation: normal !important; - transform: none !important; - } - .about-animate-box,.solutions-animate-box,.home-animate-box,.dow-animate-box,.product-animate-box, .product-animate-box2{ - opacity: 1 !important; - transform: none !important; - } - .about-animate-box.animate,.price-animate-box.animate,.solutions-animate-box.animate,.home-animate-box.animate,.dow-animate-box.animate,#arc { - animation: normal !important; - } - .drawer-ul{ - overflow: auto; - height: 82vh; - } - .home_pic7_768{ - width: 100%; - } - .help-l-ul{ - width: auto !important; - } - .footer_copyright{ - flex-direction: column; - } - #cookieConsent{ - width: 90% !important; - right: 0 !important; - left: 0; - margin: 0 auto; - } - .download-other-btn{ - margin-top: 0px !important; - margin-bottom: 56px !important; - } +@media screen and (max-width: 768px) { + img { + max-width: 100% !important; + } + .filings { + font-size: 14px !important; + } + .nav-layout { + height: 64px !important; + } + section { + background: transparent !important; + } + #logo { + height: 28px !important; + } + .btn { + font-size: 15px !important; + line-height: 18px !important; + } + .companies-ul .companies-ul-item { + height: 36px !important; + } + .topics-con { + width: calc(100vw - 40px) !important; + padding-top: 100px !important; + padding-left: 20px !important; + padding-right: 20px !important; + } + .details, + .manage-tit, + .company-profile-l { + width: calc(100vw - 40px) !important; + } + .nav { + height: 60px !important; + } + .head-con, + .card, + .choose, + .footer-con, + .companies-con, + .manage-con, + .performance-con, + .app-con, + .team-con, + .update-con, + .logs-con, + .help-con, + .plans-con, + .prooduct-con, + .scenario-app-con, + .footer-t-con, + .nav-layout, + .company-profile-con, + .collaboration { + width: calc(100vw - 40px) !important; + padding: 0 20px !important; + } + .company-profile-r { + width: 100% !important; + margin-top: 0 !important; + } + .details, + .manage-b, + .performance-con .pic { + width: calc(100vw - 40px) !important; + } + .manage-b { + justify-content: center !important; + padding-bottom: 56px; + } + .topics-h1, + .topics-h1-green { + font-weight: 600; + font-size: 28px !important; + line-height: 35px !important; + text-align: center; + } + .topics-tit, + .topics-h4 { + width: 340px !important; + margin-bottom: 20px !important; + text-align: center; + } + .solutions .topics-btn { + margin-bottom: 56px !important; + } + .topics-btn { + margin-bottom: 32px !important; + } + .arcs { + top: 26px !important; + width: 120px !important; + } + .companies-h1 { + font-weight: 400; + font-size: 18px; + line-height: 22px; + } + .companies-con { + padding: 32px 0 !important; + } + .companies-ul { + margin-top: 24px !important; + display: grid !important; + grid-template-columns: repeat(2, 50%) !important; + grid-template-rows: repeat(2, 50%) !important; + justify-items: center !important; + } + .companies-ul .companies-ul-item:nth-of-type(1), + .companies-ul .companies-ul-item:nth-of-type(2) { + margin-bottom: 20px !important; + } + .card-con, + .collaboration-bg, + .choose-con, + .footer-l, + .footer-r, + .manage-h5-1920, + .download-ul-item .hover, + .home_pic7 { + display: none !important; + } + .card-con-768, + .performance-ul, + .help-t-768, + .prooduct-list .prev, + .prooduct-list .next, + .manage-ul-item, + .logs-t-768, + .plans-ul-768, + .manage-h5-768, + .home_pic7_768 { + display: block !important; + } + .choose-con-768 { + display: flex !important; + } + .manage-h5-768 { + width: 320px !important; + } + .card-pic { + max-width: 100% !important; + } + .choose-con-768-item, + .r-ul-item-pic1 { + height: auto !important; + } + .choose-con-tit { + padding-top: 20px !important; + font-weight: 500; + font-size: 22px; + line-height: 30px; + text-align: center; + margin-bottom: 48px; + } + .manage-h1, + .performance-h1, + .app-h1, + .team-tit, + .update-h1 { + padding-top: 56px !important; + font-weight: 500; + font-size: 22px; + line-height: 28px; + text-align: center; + margin-bottom: 12px !important; + } + .manage-b, + .app-ul, + .team-ul { + margin-top: 40px !important; + } + .manage-icon { + margin-bottom: 16px; + } + .manage-h5, + .app-h5, + .topics-h4, + .scenario-app-h6, + .footer-t-h6 { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; + } + .app-h5 { + width: 320px !important; + } + .footer-t-h6 { + text-align: start !important; + margin-bottom: 32px !important; + } + .plans-tit-h5 { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; + margin-bottom: 48px !important; + } + .manage-h3 { + margin-bottom: 12px !important; + font-size: 18px !important; + } + .performance-h5, + .help-h4, + .price-card-h4 { + font-size: 18px !important; + } + .price-card-h4 { + margin-bottom: 20px !important; + } + .price-card-h2 { + font-size: 24px !important; + } + .price-card-h2 { + margin-right: 4px; + } + .manage-ul-item { + margin-bottom: 36px !important; + } + .performance-ul { + margin-top: 36px !important; + } + .arcs2 { + width: 170px !important; + left: 4px !important; + bottom: -12px !important; + } + .collaboration-txt { + font-size: 20px !important; + max-width: 280px !important; + } + .collaboration { + margin-bottom: 56px !important; + max-height: inherit !important; + } + .footer-layout { + border-bottom: none !important; + padding: 0 !important; + } + .prooduct-list { + display: flex !important; + flex-wrap: nowrap !important; + margin-bottom: 24px !important; + justify-content: space-between !important; + align-items: center !important; + grid-gap: 0 !important; + } + .prooduct-list .active { + display: flex !important; + align-items: center; + } + .prooduct-list .prooduct-list-item.top { + width: 100% !important; + } + .prooduct-list .prooduct-list-item { + display: none; + padding: 16px !important; + margin: 0 !important; + } + .prooduct-list .prooduct-list-item .icon { + width: 28px !important; + margin-bottom: 0 !important; + margin-right: 12px !important; + } + .prooduct-list .prooduct-list-item .txt { + font-weight: 500; + font-size: 16px; + line-height: 20px; + } + .prooduct-ul { + margin: 0 0 56px 0 !important; + } + .performance { + background: var(--bg-768-4-url) top left no-repeat !important; + } + .about_green_bg { + background: var(--bg-768-9-url) top right no-repeat !important; + } + .head.product { + background: var(--bg-768-3-url) top left no-repeat !important; + } + .head.price { + background: var(--bg-768-8-url) top left no-repeat !important; + } + .head.dow { + background: var(--bg-768-7-url) top left no-repeat !important; + } + .head.solutions { + background: var(--bg-768-5-url) top right no-repeat !important; + } + .team.solutions { + background: var(--bg-768-6-url) top right no-repeat !important; + } + .details-con .pic { + margin-bottom: 36px; + } + .choose-con-item-h5, + .app-h4, + .scenario-app-h5 { + font-size: 18px !important; + } + .choose-con-item-h6, + .app-h6, + .company-profile-h6, + .scenario-app-h6, + .footer-t-contact-h6, + .update-h5, + .performance-h6, + .manage-h6, + .download-ul-item .txt, + .update-item .time, + .price-card-unit, + .price-card-h6 { + font-size: 15px !important; + } + .details-ul-item { + margin-bottom: 32px !important; + } + .details-ul-item:last-child { + margin-bottom: 0 !important; + } + .serial-number { + font-size: 32px !important; + } + .details-ul-1280, + .details-con { + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 24px !important; + } + .details-ul-1280 .details-ul-item, + .update-ul, + .update-l { + width: 100% !important; + } + .details-con .details-ul { + margin-left: 0 !important; + } + .performance-con .pic { + margin-top: 40px !important; + } + .performance-ul-item { + width: auto !important; + margin-bottom: 40px; + } + .app-bg { + margin-bottom: 16px !important; + } + .app-h4 { + margin-bottom: 12px !important; + } + .app-ul-item { + width: auto !important; + margin-bottom: 36px !important; + } + .team-ul-item { + padding: 30px 24px !important; + } + .download-ul { + flex-wrap: wrap !important; + justify-content: center !important; + padding-bottom: 32px !important; + padding-top: 12px !important; + } + .download-ul-item { + margin-bottom: 24px; + } + .download-ul-item .normal, + .download-ul-item .hover.radius, + .download-ul-item .hover { + width: 120px !important; + height: 120px !important; + } + .download-ul-item .icon { + height: 36px !important; + } + .download-ul-item:nth-of-type(odd) { + margin-right: 24px; + } + .update-bg-svg { + background: none !important; + } + .update-r { + margin-bottom: 56px; + margin-top: 28px; + } + .logs-l, + .help-l, + .plans-ul-t, + .plans-ul-b { + display: none !important; + } + .logs-r, + .help-r { + border: none !important; + padding-left: 0 !important; + } + .logs-h1, + .plans-tit-h2 { + font-weight: 600; + font-size: 22px !important; + line-height: 28px !important; + } + .company-profile-h1 { + margin-bottom: 34px !important; + margin-top: 40px !important; + font-weight: 500 !important; + font-size: 22px !important; + line-height: 28px !important; + } + .logs-h4 { + font-size: 18px !important; + line-height: 22px !important; + } + .r-ol-item, + .help-h6, + .l-ul-item .txt { + font-weight: 400; + font-size: 15px !important; + line-height: 24px !important; + } + .logs { + margin: 0 !important; + padding-bottom: 56px !important; + } + .help { + margin: 0 !important; + padding-bottom: 20px !important; + } + .l-ul-item { + padding: 12px 0 !important; + } + .logs-h5 { + margin-top: 10px; + font-weight: 400 !important; + font-size: 18px !important; + line-height: 20px !important; + } + .help-pic1 { + height: calc(50vw / 2 + 10px) !important; + padding-left: 14px !important; + } + .help-pic1-tips-h2 { + font-weight: 500 !important; + font-size: 16px !important; + line-height: 24px !important; + margin-bottom: 8px !important; + } + .help-pic1-tips-h6 { + font-weight: 400 !important; + font-size: 12px !important; + line-height: 16px !important; + } + .help-pic1-tips { + max-width: 160px !important; + } + #help_pic2 { + height: calc(60vw - 40px) !important; + } + #help_pic3 { + height: calc(80vw - 60px) !important; + } + .price-card { + flex-direction: column !important; + } + .price-card-item { + width: 100% !important; + height: 100% !important; + } + .price-card-item:last-of-type { + margin-bottom: 0 !important; + } + .plans-layout { + padding: 56px 0 !important; + } + .company-profile { + width: 100% !important; + margin-top: 56px; + padding-top: 0 !important; + } + .company-profile-layout, + .footer-t-layout { + flex-direction: column !important; + } + .company-profile-arcs { + bottom: -20px !important; + left: 0 !important; + } + .company-h2 { + font-weight: 500 !important; + font-size: 20px !important; + line-height: 30px !important; + } + .company-h6 { + font-weight: 400 !important; + font-size: 12px !important; + line-height: 15px !important; + } + .company-ul { + width: 100% !important; + padding: 24px 0 !important; + margin-top: 12px !important; + } + .company-ul-item { + padding: 0 24px !important; + } + .scenario-app, + .footer-t { + padding: 56px 0 !important ; + } + .scenario-app-h1, + .footer-t-h1 { + font-weight: 500 !important; + font-size: 22px !important; + line-height: 28px !important; + } + .scenario-app-ul-item .scenario-app-h6 { + text-align: start !important; + } + .scenario-app-ul-item, + .footer-t-l { + width: 100% !important; + } + .from-ul { + width: calc(100vw - 40px) !important; + margin-top: 8px !important; + } + .app-con, + .team-con { + padding-top: 0 !important; + padding-bottom: 24px !important; + } + .card-ul-item-txt, + .prooduct-list .prooduct-list-item, + .details-con { + opacity: 1 !important; + animation: normal !important; + } + .details-con { + transform: translateY(0) !important; + } + .company-profile-layout { + padding-bottom: 56px !important; + } + .footer-t-h1 { + margin-bottom: 32px !important; + } + .logs-layout, + .team-ul-item, + .scenario-app-ul-item { + height: auto !important; + } + .logs-r { + height: auto !important; + overflow: auto !important; + } + .manage-svg { + width: 100% !important; + } + .manage-bg { + width: 100% !important; + margin-top: 0 !important; + } + .manage-tips { + top: 42px !important; + right: 0 !important; + width: auto !important; + } + .manage-tips-txt { + font-size: 16px !important; + line-height: 20px !important; + } + .manage-svg-h2 { + bottom: 52px; + right: 22px; + width: 45% !important; + font-size: 28px !important; + line-height: 40px !important; + } + .prooduct-list .prooduct-list-item.bot { + width: auto !important; + } + .head.product { + background-size: contain !important; + } + .details-ul-item:nth-of-type(4) { + margin-bottom: 32px !important; + } + .card-h1 { + margin-bottom: 40px !important; + } + .card-con-layout { + margin-top: 0 !important; + } + .bg-style { + background: transparent !important; + } + .logo { + width: 32px !important; + } + .dootask { + margin-left: 12px !important; + } + .price-card-item > .price-card-h6 { + height: auto !important; + margin-bottom: 20px !important; + } + .scenario-app-layout > .scenario-app-h6 { + margin-bottom: 48px !important; + } + .update-h1 { + margin-bottom: 28px !important; + } + .logs-t-768 { + margin-top: 96px !important; + } + #help-pic1-svg { + width: 44%; + } + .en_choose_768 { + min-height: 378px !important; + } + .plans-ol-768-content .plans-ol-item-h6:first-child { + color: var(--txt-gray-color) !important; + } + .plans-ol-768-content .plans-ol-item-h6:last-child { + color: var(--txt-4ca5) !important; + } + .scenario-app-ul-item-svg { + width: 140px !important; + } + .scenario-app-ul-item:hover, + .price-card-item:hover, + .team-ul-item:hover { + transform: none !important; + } + .topics-tit, + .topics-btn, + .topics-h4, + .ten_img, + .details, + .price-animate-box { + opacity: 1 !important; + animation: normal !important; + transform: none !important; + } + .about-animate-box, + .solutions-animate-box, + .home-animate-box, + .dow-animate-box, + .product-animate-box, + .product-animate-box2 { + opacity: 1 !important; + transform: none !important; + } + .about-animate-box.animate, + .price-animate-box.animate, + .solutions-animate-box.animate, + .home-animate-box.animate, + .dow-animate-box.animate, + #arc { + animation: normal !important; + } + .drawer-ul { + overflow: auto; + height: 82vh; + } + .home_pic7_768 { + width: 100%; + } + .help-l-ul { + width: auto !important; + } + .footer_copyright { + flex-direction: column; + } + #cookieConsent { + width: 90% !important; + right: 0 !important; + left: 0; + margin: 0 auto; + } + .download-other-btn { + margin-top: 0px !important; + margin-bottom: 56px !important; + } } diff --git a/public/site/css/solution.css b/public/site/css/solution.css index 500c90c1c..7b6755838 100644 --- a/public/site/css/solution.css +++ b/public/site/css/solution.css @@ -1,116 +1,116 @@ /* 头部样式 */ -.head{ - text-align: center; - background: var(--bg-5-url) top center no-repeat; - background-size: cover; +.head { + text-align: center; + background: var(--bg-5-url) top center no-repeat; + background-size: cover; } -.app{ - position: relative; - z-index: 2; - background-color: var(--bg-fa-color); +.app { + position: relative; + z-index: 2; + background-color: var(--bg-fa-color); } -.bg-style{ - background: var(--bg-6-url) top left no-repeat; +.bg-style { + background: var(--bg-6-url) top left no-repeat; } -.app-con{ - padding: 120px 0px; - width: 100%; - max-width: 1280px; - margin: 0 auto; - position: relative; - z-index: 2; +.app-con { + padding: 120px 0px; + width: 100%; + max-width: 1280px; + margin: 0 auto; + position: relative; + z-index: 2; } -.app-tit{ - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; +.app-tit { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; } -.app-h1{ - color: var(--text-color); +.app-h1 { + color: var(--text-color); } -.app-h4{ - color: var(--txt-191a15-color); +.app-h4 { + color: var(--txt-191a15-color); } -.app-ul{ - display: flex; - flex-wrap: wrap; - align-items: flex-start; - justify-content: space-between; +.app-ul { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; } -.app-ul-item{ - width: 624px; +.app-ul-item { + width: 624px; } -.app-bg-box{ - max-width: 100%; - max-height: 100%; - overflow: hidden; - border-radius: 16px; - margin-bottom: 32px; +.app-bg-box { + max-width: 100%; + max-height: 100%; + overflow: hidden; + border-radius: 16px; + margin-bottom: 32px; } -.app-bg{ - display: block; - height: auto; - transform: scale(1); - transition: all 2s; +.app-bg { + display: block; + height: auto; + transform: scale(1); + transition: all 2s; } -.app-bg:hover{ - transform: scale(1.15); +.app-bg:hover { + transform: scale(1.15); } -.app-h5{ - color: var(--txt-gray-color); +.app-h5 { + color: var(--txt-gray-color); } -.app-h6{ - color: var(--txt-gray-color); +.app-h6 { + color: var(--txt-gray-color); } -.team{ - background: var(--bg-7-url) top right no-repeat; - background-size: contain; +.team { + background: var(--bg-7-url) top right no-repeat; + background-size: contain; } -.team-con{ - padding: 120px 0px; - width: 100%; - max-width: 1280px; - margin: 0 auto; +.team-con { + padding: 120px 0px; + width: 100%; + max-width: 1280px; + margin: 0 auto; } -.team-tit{ - text-align: center; - color: var(--text-color); +.team-tit { + text-align: center; + color: var(--text-color); } -.team-ul{ - display: flex; - align-items: flex-start; - justify-content: space-between; +.team-ul { + display: flex; + align-items: flex-start; + justify-content: space-between; } -.team-ul-item{ - padding: 24px; - width: 357px; - transition: all .3s ease-in-out; - background-color: var(--choose-bg-hover-color); - box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); - border-radius: 12px; - z-index: 2; +.team-ul-item { + padding: 24px; + width: 357px; + transition: all 0.3s ease-in-out; + background-color: var(--choose-bg-hover-color); + box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.05); + border-radius: 12px; + z-index: 2; } -.team-ul-item:hover{ - transform: translateY(-16px); +.team-ul-item:hover { + transform: translateY(-16px); } -.team-ul-item-en{ - height: 358px; +.team-ul-item-en { + height: 358px; } -.team-ul-item-zh{ - height: 234px; +.team-ul-item-zh { + height: 234px; } -.team-icon{ - display: block; - width: 48px; +.team-icon { + display: block; + width: 48px; } /* 底部样式 */ -footer{ - width: 100%; - z-index: 2; - position: relative; - background-color: var(--bg-color); +footer { + width: 100%; + z-index: 2; + position: relative; + background-color: var(--bg-color); +} +.footer-layout { + border-top: var(--border-color) solid 1px; } -.footer-layut{ - border-top: var(--border-color) solid 1px; -} \ No newline at end of file diff --git a/public/site/en/about.html b/public/site/en/about.html index d5b42fab7..d60e7bd6b 100644 --- a/public/site/en/about.html +++ b/public/site/en/about.html @@ -1,22 +1,25 @@ + - + About Us - DooTask - - - - - - - - + + + + + + + + +
@@ -24,7 +27,7 @@
- Language switch + Language switch
  • 简体中文
  • - English + English
- Light theme + Light theme - Dark theme + Dark theme - github + github - +
- Menu + Menu
@@ -102,25 +109,41 @@
About our company
-

Focusing on the field of network security, we are committed to providing users with a full range of network security solutions.

+

+ Focusing on the field of network security, we + are committed to providing users with a full + range of network security solutions. +

@@ -129,15 +152,31 @@
- 广西海豚有海信息科技公司,HITOSEA,海豚有海,广西海豚有海 + 广西海豚有海信息科技公司,HITOSEA,海豚有海,广西海豚有海

Company profile - - + +

-
Since its establishment, Guangxi Hitosea Information Technology Co., Ltd.(HITOSEA) has been focusing on the innovation of cutting-edge technologies in the field of network security, providing network security products and services including border security, cloud security, data security, intranet security, and is committed to providing users with comprehensive, smarter, and zero-disturbance network security solutions, and is a dynamic technology company with a young and energetic team.
+
+ Since its establishment, Guangxi Hitosea + Information Technology Co., Ltd.(HITOSEA) + has been focusing on the innovation of + cutting-edge technologies in the field of + network security, providing network security + products and services including border + security, cloud security, data security, + intranet security, and is committed to + providing users with comprehensive, smarter, + and zero-disturbance network security + solutions, and is a dynamic technology + company with a young and energetic team. +
@@ -147,7 +186,7 @@
✕ @@ -163,10 +202,10 @@
Support - Support + Support
-
    +
    1. Download Center
      2. @@ -174,7 +213,7 @@ Help Center
    2. - Privacy Policy + Privacy Policy
    3. API document @@ -191,28 +230,28 @@
      Theme - Theme + Theme
      -
        -
      1. +
          +
        1. Light
          2. -
        2. +
        3. Dark
        Language - Language + Language
          -
        1. +
        2. 简体中文
          3. -
        3. +
        4. English
        @@ -231,42 +270,89 @@
        -

        Scenario Application

        -
        The product supports a variety of application scenarios to help team collaboration
        +

        + Scenario Application +

        +
        + The product supports a variety of + application scenarios to help team + collaboration +
          -
        • +
        • - Edge Security + Edge Security -
          Edge Security
          -
          HITOSEA next-generation firewall, intrusion prevention/intrusion detection system, cloud sandbox and other products provide users with comprehensive intelligent security protection such as access control to network boundaries, deep attack detection and APT attack detection.
          - +
          + Edge Security +
          +
          + HITOSEA next-generation firewall, + intrusion prevention/intrusion + detection system, cloud sandbox and + other products provide users with + comprehensive intelligent security + protection such as access control to + network boundaries, deep attack + detection and APT attack detection. +
          +
          • -
        • +
        • - Cloud Security + Cloud Security -
          Cloud Security
          -
          We provide safe and reliable high-proof cloud servers to solve the primary network security risks faced by servers, alleviate the risk of business interruption due to flooding attacks, and meet the needs of regular security operations.
          - +
          + Cloud Security +
          +
          + We provide safe and reliable + high-proof cloud servers to solve + the primary network security risks + faced by servers, alleviate the risk + of business interruption due to + flooding attacks, and meet the needs + of regular security operations. +
          +
          • -
        • +
        • - Data Security + Data Security -
          Data Security
          -
          Database audit and data leakage protection system can protect sensitive data and documents, identify data and monitor operations, and block data theft by internal and external personnel through the network, e-mail and other channels.
          - +
          + Data Security +
          +
          + Database audit and data leakage + protection system can protect + sensitive data and documents, + identify data and monitor + operations, and block data theft by + internal and external personnel + through the network, e-mail and + other channels. +
          +
          • -
        • +
        • - Intranet Security + Intranet Security -
          Intranet Security
          -
          Web application firewall and web anti-tampering system provide overall security protection for the application system, effectively blocking malicious behaviors such as web tampering and attacks.
          - +
          + Intranet Security +
          +
          + Web application firewall and web + anti-tampering system provide + overall security protection for the + application system, effectively + blocking malicious behaviors such as + web tampering and attacks. +
          +
        @@ -276,35 +362,50 @@
        -

        We'd love to hear from you

        -
        Have questions about pricing, plans or products? Please fill out the form and we will contact you.
        +

        + We'd love to hear from you +

        +
        + Have questions about pricing, plans or + products? Please fill out the form and + we will contact you. +
        - Contact telephone number,0771-3164099 -
        0771-3164099
        + Contact telephone number,0771-3164099 +
        + 0771-3164099 +
        - E-mail,service@hitosea.com -
        service@hitosea.com
        + E-mail,service@hitosea.com +
        + service@hitosea.com +
        • Name - +
        • Email - +
        • Message - +

          0/255

        • - +
        @@ -317,19 +418,22 @@
        -
        +
        - Helps teams move projects forward efficiently and makes work easier. + Helps teams move projects forward efficiently + and makes work easier.
          • -
          1. Links
            2. +
          2. + Links +
          3. Product
            4. @@ -346,7 +450,9 @@
            4. -
            1. Support
              2. +
            2. + Support +
            3. Download Center
              4. @@ -354,16 +460,20 @@ Help Center
            4. - Privacy Policy + Privacy + Policy
            5. - API document + API + document
            5. -
            1. Community
              2. +
            2. + Community +
            3. Github @@ -374,7 +484,7 @@
              @@ -402,19 +515,20 @@ - + + + \ No newline at end of file diff --git a/public/site/en/ad.html b/public/site/en/ad.html new file mode 100644 index 000000000..d13e21d3d --- /dev/null +++ b/public/site/en/ad.html @@ -0,0 +1,1227 @@ + + + + + + + DooTask - The most popular open source project collaboration tool + + + + + + + + + + + + + + + + + + + + + +
              + +
              +
              + We use first party cookies to improve your browsing + experience on our website, to analyze our website traffic + and to understand where our visitors are coming from. If you + choose to opt-out, only strictly necessary cookies will be + used.Our cookie policy +
              +
              + + +
              +
              + +
              +
              +
              + + +
              +
              + Language switch +
                +
              • + 简体中文 +
                • +
              • + English +
                • +
              +
              + + Brighter theme + + + Dark theme + + + + github + + + + + + + + +
              +
              + Menu +
              +
              +
              +
              +
              +
              +
              + + DooTask + + + + + + + + + + + + + + + ,Lightweight +
              + Task Management Tool +               +
              +

              + Empower the team to advance projects + efficiently, making work simpler. +

              +
              + + +
              +
              +
              +
              +
              + +
              +
              + + ✕ +
              + +
              +
              +
              +
              +
              + + September Double Deal Bonanza! + +
              +
              + + Make life easier, make work more efficient. + +
              +
              +
              +
              + Unlimited Pro +
              +
              + + ¥16,800 + + + + + + ¥18,888 + +
              +
              + + + +
              +
              +
                +
              • + + undefined + + + Support private deployment + +
                • +
              • + + undefined + + + Technical Advisory Services + +
                • +
              • + + undefined + + + Custom logo design + +
                • +
              • + + undefined + + + Dedicated operations customer service + +
                • +
              • + + undefined + + + 12-Hour service response + +
                • +
              • + + undefined + + + Free 1-Year Technical Maintenance Included + +
                • +
              +
              +
              +
              +
              + 50-License Pro +
              +
              + + ¥13,800 + + + + + + ￥16,800 + +
              +
              + + + +
              +
              +
                +
              • + + undefined + + + Support private deployment + +
                • +
              • + + undefined + + + Technical Advisory Services + +
                • +
              • + + undefined + + + Custom logo design + +
                • +
              • + + undefined + + + Dedicated operations customer service + +
                • +
              • + + undefined + + + 12-Hour service response + +
                • +
              • + + undefined + + + Free 1-Year Technical Maintenance Included + +
                • +
              +
              +
              +
              +
              + 30-License Pro +
              +
              + + ¥11,800 + + + + + + ￥15,800 + +
              +
              + + + +
              +
              +
                +
              • + + undefined + + + Support private deployment + +
                • +
              • + + undefined + + + Technical Advisory Services + +
                • +
              • + + undefined + + + Custom logo design + +
                • +
              • + + undefined + + + Dedicated operations customer service + +
                • +
              • + + undefined + + + 12-Hour service response + +
                • +
              • + + undefined + + + Free 1-Year Technical Maintenance Included + +
                • +
              +
              +
              +
              +
              + 10-License Pro +
              +
              + + ￥5,800 + + + + + + ¥8,800 + +
              +
              + + + +
              +
              +
                +
              • + + undefined + + + Support private deployment + +
                • +
              • + + undefined + + + Technical Advisory Services + +
                • +
              • + + undefined + + + Dedicated operations customer service + +
                • +
              • + + undefined + + + 12-Hour service response + +
                • +
              • + + undefined + + + Free 1-Year Technical Maintenance Included + +
                • +
              +
              +
              +
              +
              + 5-License Pro +
              +
              + + ¥3,800 + + + + + + ¥6,800 + +
              +
              + + + +
              +
              +
                +
              • + + undefined + + + Support private deployment + +
                • +
              • + + undefined + + + Technical Advisory Services + +
                • +
              • + + undefined + + + Dedicated operations customer service + +
                • +
              • + + undefined + + + 12-Hour service response + +
                • +
              • + + undefined + + + Free 1-Year Technical Maintenance Included + +
                • +
              +
              +
              +
              +
              + Annual Pro +
              +
              + + ¥200 + + /per/year + + + + ¥288 + +
              +
              + + + +
              +
              +
                +
              • + + undefined + + + Support private deployment + +
                • +
              • + + undefined + + + Technical Advisory Services + +
                • +
              • + + undefined + + + Dedicated operations customer service + +
                • +
              • + + undefined + + + 12-Hour service response + +
                • +
              • + + undefined + + + Free 1-Year Technical Maintenance Included + +
                • +
              +
              +
              +
              +
              + Supported Pro +
              +
              + + ¥600 + + /per/year + + + + ¥680 + +
              +
              + + + +
              +
              +
                +
              • + + undefined + + + For businesses established within 1 year + +
                • +
              • + + undefined + + + Free for 5 or fewer people + +
                • +
              • + + undefined + + + Valid for 1 year + +
                • +
              • + + undefined + + + Support private deployment + +
                • +
              • + + undefined + + + Custom logo design + +
                • +
              +
              +
              +
              +
              + Free +
              +
              + + 0 + + /month + + + + Up to 3 People + +
              +
              + + + +
              +
              +
                +
              • + + undefined + + + Support private deployment + +
                • +
              • + + undefined + + + Technical Advisory Services + +
                • +
              • + + undefined + + + Dedicated operations customer service + +
                • +
              • + + undefined + + + 12-Hour service response + +
                • +
              +
              +
              +
              +
              +
              +
              +
              +
              + + Why Choose DooTask? + +
              +
              +   +
              +
              +
              +
              + head +
              +
              + img +
              +
              + Project Management +
              +
              + Supports various project management + methodologies such as Agile, Crystal, + Kanban, and more, suitable for managing + projects of all sizes and types. Users + can utilize DooTask’s project management + tools, including task assignment, + progress tracking, resource allocation, + and more to manage the entire project. + +
              +
              +
              +
              + head +
              +
              + img +
              +
              + Team Collaboration +
              +
              + DooTask’s rich and practical tools + facilitate communication and + collaboration among team members, + enhancing work efficiency. For instance, + team members can use DooTask’s document + collaboration tools, online mind maps, + flowcharts, and more for collaborative + work. + +
              +
              +
              +
              + head +
              +
              + img +
              +
              + Data Security Protection +
              +
              + DooTask uses asymmetric encryption for + messaging to maximize user information + security. It also features a powerful + permission system to customize access + and actions in project management based + on user roles and duties. + +
              +
              +
              +
              + head +
              +
              + img +
              +
              + Customizable Freely +
              +
              + DooTask is a completely open-source + tool that users can modify and customize + freely, avoiding the additional costs + associated with commercial software + subscriptions. + +
              +
              +
              +
              +
              +
              + + + + +
              + + + + + + \ No newline at end of file diff --git a/public/site/en/download.html b/public/site/en/download.html index 62ffbe7ea..dc00d2213 100644 --- a/public/site/en/download.html +++ b/public/site/en/download.html @@ -1,22 +1,25 @@ + - + Download Center - DooTask - - - - - - - - - + + + + + + + + + +
              @@ -25,7 +28,7 @@
              - Language switch + Language switch
              • 简体中文
              • - English + English
              - Brighter themes + Brighter themes - Dark theme + Dark theme - github + github - +
              - Menu + Menu
              @@ -103,54 +110,70 @@
              Download DooTask client
              -

              Also supports iOS, Android, macOS, Windows versions

              +

              + Also supports iOS, Android, macOS, Windows + versions +

              - Other Versions + Other + Versions
        @@ -159,7 +182,7 @@
        ✕ @@ -175,7 +198,7 @@
        Support - Support + Support
          @@ -186,7 +209,7 @@ Help Center
        1. - Privacy Policy + Privacy Policy
        2. API document @@ -203,28 +226,28 @@
          Theme - Theme + Theme
          -
            -
          1. +
              +
            1. Light
              2. -
            2. +
            3. Dark
            Language - Language + Language
            -
              -
            1. +
                +
              1. 简体中文
                2. -
              2. +
              3. English
              @@ -245,19 +268,23 @@
              -

              Update Log

              +

              + Update Log +

              - Download Centre + Download Centre
              @@ -268,19 +295,22 @@
              -
              +
              - Helps teams move projects forward efficiently and makes work easier. + Helps teams move projects forward efficiently + and makes work easier.
                • -
                1. Links
                  2. +
                2. + Links +
                3. Product
                  4. @@ -297,7 +327,9 @@
                  4. -
                  1. Support
                    2. +
                  2. + Support +
                  3. Download Center
                    4. @@ -305,16 +337,20 @@ Help Center
                  4. - Privacy Policy + Privacy + Policy
                  5. - API document + API + document
                  5. -
                  1. Community
                    2. +
                  2. + Community +
                  3. Github @@ -325,7 +361,7 @@
                    @@ -352,231 +391,263 @@ - + + + \ No newline at end of file diff --git a/public/site/en/help.html b/public/site/en/help.html index 3ed3e4621..8f94431d0 100644 --- a/public/site/en/help.html +++ b/public/site/en/help.html @@ -1,2581 +1,1793 @@ + - - Help Center - DooTask - - - - - - - - - - - - - + + Help Center - DooTask + + + + + + + + + + + + + -
                    +
                    -
                    -
                    - - +
                    +
                    + Language switch +
                      +
                    • + 简体中文 +
                      • +
                    • + English +
                      • +
                    + + Brighter themes + + + Dark theme + + + + github + + + + + + + + +
                    +
                    + Menu +
                    +
                    -
                    - - ✕ -
                    -
                  +
                  6. +
                6. +
                  Mission
                  +
                    +
                  1. + Use of tasks +
                    2. +
                  2. + Task Priority +
                    3. +
                  3. + Comments & News +
                    4. +
                  4. + Subtasks +
                    5. +
                  +
                  7. +
                7. +
                  Team
                  +
                    +
                  1. + Team and Members +
                    2. +
                  2. + Team Management +
                    3. +
                  3. + Team Setup +
                    4. +
                  4. + Member Grouping +
                    5. +
                  +
                  8. +
                8. +
                  Files
                  +
                    +
                  1. + File Type +
                    2. +
                  2. + Shared Files +
                    3. +
                  3. + Access Permissions +
                    4. +
                  4. + Document Display +
                    5. +
                  +
                  9. +
              -
              - - ✕ -
              -
            +
            + Pricing +
            +
            + About Us +
            +
            2. +
          2. +
            + + Theme + Theme + +
            +
              +
            1. + Light +
              2. +
            2. + Dark +
              3. +
            +
            + + Language + Language + +
            +
              +
            1. + 简体中文 +
              2. +
            2. + English +
              3. +
            +
            3. +
          3. +
            + Try Now +
            +
            4. +
        - -
        -
        -
        -
        - Help Center - Help Center -
        -
        -
        - - - - - -
        -
        -
        - Just starting out with DooTask? No problem, this primer is for you! - Just starting out with DooTask? No problem, this primer is for you! -
        -

        - User Manual -

        -
        - Just starting out with DooTask? - No problem, this primer is for - you! -
        -
        -
        -
          -
        • -

          - What is DooTask? -

          -
          - DooTask is a lightweight open - source online project task - management tool that provides - various document collaboration - tools, online mind mapping, - online flowcharting, project - management, task distribution, - instant IM, file management and - other tools. It helps teams to - advance their projects - efficiently and makes work - easier. -
          -
          • -
        • -

          - What is task management? -

          -
          - Task management is the process - of monitoring your project's - tasks through their various - stages from start to finish. - This involves actively making - decisions for your tasks to - accommodate changes that can - occur real-time, with your end - goal being the successful - completion of your tasks. - Project task management also - means managing all aspects of a - task like budget, time, scope, - resources, recurrence and so on - effectively. -
          - -
          • -
        • -

          - How to manage tasks? -

          -
          - Here are some key steps involved - in task management: -
          -
          - Prioritization: Whatever tool you use to manage - your tasks, whether a simple - to-do list or a comprehensive - project task management tool, - the most important aspect of - task management is - prioritization. This helps in - efficiently completing all the - tasks involved while maintaining - the planned constraints. -
          -
          - Milestone tracking: The findings of this study also - show that establishing clear - goals is essential to the - successful completion of a - project. Although for task - management an end goal isn't - necessary, defining milestones - helps motivate teams to execute - tasks successfully. -
          -
          - Schedule management: Making sure your task gets - completed on time is something - that has an impact on the - overall project health. - Attributing the right time frame - by estimating the effort - involved is key here. -
          - -
          • -
        • -

          - How to choose the right task - management software? -

          -
          - Depending on your purpose, price - range, existing work environment - and preferred platform, there - are several project and task - management tools available. From - simple checklists which may not - even require an internet - connection to a full-fledged - project task management - software, the capabilities are - varied. There are also software - options that fit specific - industries like construction, IT - or education or specific - functions like crm task - management. -
          -
          • -
        • -

          - Registered Account -

          -
          - (1) Click [Register Account] to - enter the registration page; -
          - Registered Account -
          - (2) In the corresponding input - box on the registration page, - enter your email - address/password/invitation code - respectively to create a DooTask - account, and click [Register] to - complete the account - registration. -
          - Registered Account -
          • -
        • -

          - Login to your account -

          -
          - Account Password Login -
          -
          - (1) Enter your email - address/password in the - corresponding input box on the - login page; -
          -
          - (2) Click [Login] to access your - account. -
          - Account Password Login -
          - Scan Code To Login -
          -
          - (1) Click the green QR code at - the top right corner of the - login page to enter the code - scanning login page; -
          - Scan Code To Login -
          - (2) Use DooTask Mobile to scan - the QR code to log in to your - account. -
          - Scan Code To Login -
          • -
        • -

          - Task Reminder Robot -

          -
          - Open the [Message] button in the - left navigation bar of DooTask, - you can view the "Task - Reminder", the task reminder - robot according to the - associated task change status - real-time update reminder, such - as the new task prompts, task - modification prompts, task - expiration prompts, and so on. -
          - Task Reminder Robot -
          • -
        • -

          - Check-in And Clock-out Robot -

          -
          - Open the [Message] button in the - left navigation bar of DooTask, - you can view the "Check-in and - Punch-in", Check-in and Punch-in - Robot automatically records the - employee's daily check-in and - punch-in data to help users - achieve effective work progress - management and time planning. -
          - Check-in And Clock-out Robot -
          • -
        • -

          - Personal Information Settings -

          -
          - (1) Click [Avatar] in the upper - right corner of the user → click - [Personal Settings] to select - the personal settings page, you - can modify your personal - avatar/telephone/nickname/position - (title) and other information; -
          -
          - (2) Click [Submit] to confirm - the changes and [Reset] to clear - the current settings. -
          - Personal Information Settings -
          • -
        • -

          - Check-in Settings -

          -
          - (1) Click the user's upper-right - corner [avatar] → click - [Personal Settings] → click - [Sign-in Settings], that is, to - display the last five days of - the sign-in record, click the - bottom of the [View more sign-in - data] to view the history of the - sign-in record; -
          - Check-in Settings -
          - (2) In the corresponding input - box under the check-in setting - column, enter the device MAC - address/remarks information, and - associate the device to connect - to the designated router (WiFi) - to achieve automatic check-in, - if you need to add other - devices, you can click [Add - Device] to add new ones; -
          -
          - (3) Click [Submit] to confirm - the changes and [Reset] to clear - the current settings. -
          - Check-in Settings -
          • -
        • -

          - Shortcut Key Setting -

          -
          - (1) Click [Avatar] in the upper - right corner of the user → click - [Personal Settings] → click - [Shortcut Keys], you can - customise the shortcut key - combinations according to your - personal habits; -
          -
          - (2) Click [Save] to confirm the - changes and [Reset] to clear the - current settings. -
          - Shortcut Key Setting -
          • -
        • -

          - Language Settings -

          -
          - (1) Click [Avatar] in the upper - right corner of the user → click - [Personal Settings] → click - [Language Settings], click the - drop-down icon in the box to the - right of the selected language - to switch between different - languages. The system currently - supports Simplified Chinese, - Traditional Chinese, English, - Korean, Japanese, German, French - and Indonesian; -
          -
          - (2) Click [Submit] to confirm - the changes and [Reset] to clear - the current settings. -
          - Language Settings -
          • -
        • -

          - Theme Setting -

          -
          - (1) Click the user's upper-right - corner [avatar] → click - [Personal Settings] → click - [Theme Settings], click to - select the theme of the right - side of the box drop-down icon, - you can switch to the - corresponding theme, the system - currently supports the bright / - dark two themes; -
          -
          - (2) Click [Submit] to confirm - the changes and [Reset] to clear - the current settings. -
          - Theme Setting -
          • -
        • -

          - Password Setting -

          -
          - (1) Click [Avatar] in the upper - right corner of the user → click - [Personal Settings] → click - [Password Settings], enter the - user's old password → enter the - user's new password → enter the - user's new password again to - confirm; -
          -
          - (2) Click [Submit] to confirm - the changes and [Reset] to clear - the current settings. -
          - Password Setting -
          • -
        • -

          - Modify Mailbox -

          -
          - (1) Click [Avatar] in the upper - left corner of the user → click - [Personal Settings] → click - [Modify Mailbox], enter the new - mailbox address and click [Send - Verification Code] and enter the - verification code; -
          -
          - (2) Click [Submit] to confirm - the changes and [Reset] to clear - the current settings. -
          - Modify Mailbox -
          • -
        • -

          - Multi-style project management - templates -

          -
          - DooTask template to meet a - variety of team collaboration - scenarios, while supporting - custom templates to meet the - team's personalised scenario - management needs, you can - intuitively view the progress of - the project, team collaboration - is more convenient. -
          -
          • -
        • -

          - Visualisation Project Office -

          -
          - Use multiple views such as - Kanban, tables, and lists to - keep the overall project at a - glance; members have the - flexibility to filter, sort, and - group tasks to prioritise the - essentials and stay focused. -
          -
          • -
        • -

          - Real-time monitoring of project - management developments -

          -
          - Real-time changes in project - dynamics, specific task changes - record reminders, so that the - team to control the overall - project process, the development - of appropriate plans. -
          -
          • -
        • -

          - Create A Project -

          -
          - (1) Click [New Project] at the - bottom left corner of the - DooTask page; -
          - Create A Project -
          - (2) In the new project pop-up - window that appears, enter the - project name (required and can - not be less than two words) ¡ú - select the project template - (default blank template) ¡ú - select whether to open the - workflow; -
          -
          - (3) Click [Add] to complete the - project creation. -
          - Create A Project -
          • -
        • -

          - Multi-view Task List -

          -
          - (1) Open DooTask page and click - the corresponding project name - button on the left side to - display the list of all tasks - belonging to the project; -
          - Multi-view Task List -
          - (2) Click the corresponding - [Switch View] icon in the upper - left corner to view the task - classification/task - priority/responsible person/due - time information of the - corresponding task. -
          - Multi-view Task List -
          • -
        • -

          - Completed Tasks Display -

          -
          - (1) Under normal circumstances, - "Completed Tasks" will be - automatically hidden in the task - list and will not be displayed; -
          -
          - (2) Check the [Show Completed] - icon in the upper-right corner - of the project task list to view - the "Completed Tasks". -
          - Completed Tasks Display -
          • -
        • -

          - Project Dynamic Display -

          -
          - (1) On the corresponding project - page, click the [Project - Dynamics] icon in the upper-left - corner to view the operation - history of project members - according to the date. -
          - Project Dynamic Display - Project Dynamic Display -
          • -
        • -

          - Creating Tasks -

          -
          - (1) Select the project name to - enter the task list, and click - the [New Task] icon in the upper - left corner of the corresponding - task list; -
          - Creating Tasks -
          - (2) Enter task - description/detailed - description, select task - priority/task time/task - leader/visibility and other - information in the corresponding - input box, and add subtasks as - required; -
          -
          - (3) Click [Add Task] in the - lower right corner of the Create - Task page to complete the - creation of a new task. -
          - Creating Tasks -
          • -
        • -

          - Mission Dashboard -

          -
          - Click [Dashboard] on the left - side of the DooTask page to - display task statistics (showing - tasks due today, overdue tasks, - and pending tasks). -
          - Mission Dashboard -
          • -
        • -

          - Duration Of The Mission -

          -
          - Select the task that needs to be - modified, open the task detail - page, click [Deadline] to modify - the task time according to the - actual situation. -
          - Duration Of The Mission -
          • -
        • -

          - Task visibility -

          -
          - Select the corresponding task, - open the task detail page, and - click [Visibility] to select - project personnel/task - personnel/specified members to - be visible as needed. -
          - Task Visibility -
          • -
        • -

          - Task Priority -

          -
          - In the task creation window and - task details page, you can set - the task priority as needed. The - system currently supports four - major task priorities: important - and urgent, important and not - urgent, urgent and not - important, and not important and - not urgent. (You can change the - priority according to the task - situation) -
          - Task Priority -
          • -
        • -

          - Citing Associated Documents and - Tasks -

          -
          - Select the corresponding task, - open the task detail page, enter - the associated file link/task in - the input box of the chat window - on the right side of the page, - and click the [Send] icon to - quote it. -
          - Citing Associated Documents and Tasks -
          • -
        • -

          - Mission Affiliates -

          -
          - Select the corresponding task, - open the task details page, in - the chat window on the right - side of the page in the input - box @ the task associated with - the personnel account nickname, - click on the [Send] icon, the - members of the task instantly - enter the group chat. -
          - Mission Affiliates -
          • -
        • -

          - Task Force Meeting -

          -
          - Select the corresponding task, - open the task details page, and - click the [Expand] icon at the - bottom right of the chat window - on the right side of the page to - launch a group video/voice - conference for all members in - the task group chat. -
          -
          - Group video/voice conferencing - can be initiated for all members - within a task group chat. -
          - Task Force Meeting -
          • -
        • -

          - Project Dynamic Display -

          -
          - In the corresponding task detail - page, click the [Task Dynamics] - icon in the upper right corner - to view the operation history of - task members according to the - date. -
          - Project Dynamic Display -
          • - -
        • -

          - Corporate Governance -

          -
          - Helping organisations to their - corporate goals, connecting - objectives, key results and - individual work, and working - together to drive strategy to - fruition and goals to be - achieved; -
          -
          - Through collaborative authoring, - the progress, completion status - and schedule of all enterprise - work are shared to facilitate - the flow of information, so that - all staff can access key project - information, follow up in a - timely manner and promote - cross-departmental - collaboration. -
          -
          • -
        • -

          - Product Management -

          -
          - Customise the workflow of the - product development process, - assign tasks to different roles - at different stages to promote - the product development process; - archive the history of each - completed project and task, so - that it is easy to call or - discuss at any time, forming a - closed loop of knowledge - precipitation to reuse. -
          -
          • -
        • -

          - Personnel Administration -

          -
          - Obtain multi-dimensional - corporate data through data - visualisation statistical - reports to gain a comprehensive - understanding of employee - performance and make performance - evaluation more objective and - fair; use announcements to - release notices, arrange company - activities, deliver corporate - decisions, facilitate the - shaping of corporate culture and - make employees more engaged. -
          -
          • -
        • -

          - Working Report -

          -
          - 1 My debriefing: -
          -
          - Report Search -
          -
          - Click on the user's avatar in - the upper-left corner → click on - [Work Reports] → click on [My - Reports], select the type of - report/reporting time that needs - to be queried on the upper-left - side of the page, and click on - [Search] to instantly display - the relevant report data. -
          - Report Search -
          - Reporting Record Display -
          -
          - Click the user's avatar in the - upper-left corner → click [Work - Reports] → click [My Reports], - and you can view the - name/type/reporting - time/reporting object/operation - and other information of the - corresponding report on the Work - Reports page. -
          - Reporting Record Display -
          - Additional Reports -
          -
          - (1) Click on the user's avatar - in the upper-left corner → Click - on [Work Reports] → Click on - [Add Report]; -
          -
          - (2) On the New Report page, - select the report type (select - Weekly/Daily)/reporting object - (you can directly use the object - of the last report), enter the - corresponding report content, - and click [Submit] to complete - the report. -
          - Additional Reports - Additional Reports -
          - 2 Report received: -
          -
          - Report Search -
          -
          - Click on the user's avatar in - the upper-left corner → click on - [Work Reports] → click on - [Received Reports], select the - keywords/reporting - type/reporting time that you - need to query on the upper-left - side of the page, and click on - [Search] to instantly display - the relevant report data. -
          - Report Search -
          - Reporting Record Display -
          -
          - Click the user's avatar in the - upper-left corner → click [Work - Reports] → click [Received - Reports], and you can view the - title/type/receipt - time//operation of the - corresponding report on the Work - Reports page. -
          - Reporting Record Display -
          • -
        • -

          - Data Dxport -

          -
          - Click the user's avatar in the - upper-left corner → click [Team - Management], and select [Export - Task Statistics] / [Export - Overdue Tasks] / [Export - Approval Data] / [Export - Check-In Data] according to your - needs to export the associated - data records. -
          - Data Dxport -
          • -
        • -

          - New Sectors -

          -
          - (1) Click on the user's avatar - in the upper-left corner → Click - on the "Team Management" option - in the [Team Management] list, - and then click on [New - Department] in the lower-left - corner of the page; -
          - New Sectors -
          - (2) Enter the name of the - department in the New Department - pop-up window that appears → - Select the parent department → - Add the department head → Choose - to create a departmental group - chat or use an existing group - chat; -
          -
          - (3) Click [New] to complete the - creation of a new department. -
          - New Sectors -
          • -
        • -

          - Search For Members -

          -
          - Click on the user's avatar in - the upper-left corner → Click on - the "Team Management" option in - the [Team Management] list, - select the - keywords/identity/on-the-job - status/email authentication that - you need to query at the top of - the page, and then click on - [Search] to display the relevant - personnel information. -
          - Search For Members -
          • -
        • -

          - Team Member Operation -

          -
          - Click on the user's avatar in - the upper-left corner → Click on - the "Team Management" option in - the [Team Management] list, - click on the corresponding - personnel information - [Operation] button, you can - choose to carry out the member: - set up as an administrator / set - up as a temporary account / - change the mailbox / change the - password / modify the department - / operation of the operation of - the departure / deletion of the - operation. -
          - Team Member Operation -
          • -
        • -

          - Project Members -

          -
          - (1) Select the corresponding - project and click [Member - Management] on the upper right - to add/delete project members; -
          -
          - (2) Click [Cancel] to cancel the - member management settings and - [Save] to save the member - modification management - operation. -
          - Project Members - Project Members -
          • -
        • -

          - Mandate Holder -

          -
          - Select the corresponding - project, click the [New Task] - icon in the upper right corner - of the task list → click - [Advanced Options] to add/delete - the relevant task leader or - assistants. -
          - Mandate Holder - Mandate Holder -
          • -
        • -

          - File Type -

          -
          - (1) Click [File] on the left - side of the DooTask page to - display and view project-related - files. -
          - File Type -
          - (2) Click the [New File] icon - button in the upper right corner - of the page to create a new - folder/upload files/upload - folders, the current system - supports text, icons, mind maps, - Word documents, Excel - worksheets, PPT presentations a - variety of file types. -
          - File Type -
          • -
        • -

          - File Sharing -

          -
          - Click [File] on the left side of - DooTask page, select the - corresponding folder/file and - click the icon in the upper - right corner, then click [Share] - to share the folder/file to - relevant project members. -
          - File Sharing -
          • -
        • -

          - Access Authority -

          -
          - (1) Click [File] on the left - side of DooTask page, select the - corresponding folder/file and - then click the icon on the upper - right corner, click [Share] to - open the sharing settings; -
          -
          - (2) According to the need to - select all people/specified - members visible, shared file - read/write/read-only, click - [Share] to complete the - operation. -
          - Access Authority -
          • -
        • -

          - Document Display -

          -
          - Click [Files] on the left side - of the DooTask page and tick the - [Show My Only] icon at the top - right corner of the page to view - your personal files. -
          - Document Display -
          • -
        -
        -
        + +
        +
        +
        +
        + Help Center + Help Center +
        +
        +
        + + +
        +
        +
        + Just starting out with DooTask? No problem, this primer is for you! + Just starting out with DooTask? No problem, this primer is for you! +
        +

        + User Manual +

        +
        + Just starting out with DooTask? + No problem, this primer is for + you! +
        +
        -
        -
        +
          +
        • +

          + What is DooTask? +

          +
          + DooTask is a lightweight open + source online project task + management tool that provides + various document collaboration + tools, online mind mapping, + online flowcharting, project + management, task distribution, + instant IM, file management and + other tools. It helps teams to + advance their projects + efficiently and makes work + easier. +
          +
          • +
        • +

          + What is task management? +

          +
          + Task management is the process + of monitoring your project's + tasks through their various + stages from start to finish. + This involves actively making + decisions for your tasks to + accommodate changes that can + occur real-time, with your end + goal being the successful + completion of your tasks. + Project task management also + means managing all aspects of a + task like budget, time, scope, + resources, recurrence and so on + effectively. +
          + +
          • +
        • +

          + How to manage tasks? +

          +
          + Here are some key steps involved + in task management: +
          +
          + Prioritization: Whatever tool you use to manage + your tasks, whether a simple + to-do list or a comprehensive + project task management tool, + the most important aspect of + task management is + prioritization. This helps in + efficiently completing all the + tasks involved while maintaining + the planned constraints. +
          +
          + Milestone tracking: The findings of this study + also + show that establishing clear + goals is essential to the + successful completion of a + project. Although for task + management an end goal isn't + necessary, defining milestones + helps motivate teams to execute + tasks successfully. +
          +
          + Schedule management: Making sure your task gets + completed on time is something + that has an impact on the + overall project health. + Attributing the right time frame + by estimating the effort + involved is key here. +
          + +
          • +
        • +

          + How to choose the right task + management software? +

          +
          + Depending on your purpose, price + range, existing work environment + and preferred platform, there + are several project and task + management tools available. From + simple checklists which may not + even require an internet + connection to a full-fledged + project task management + software, the capabilities are + varied. There are also software + options that fit specific + industries like construction, IT + or education or specific + functions like crm task + management. +
          +
          • +
        • +

          + Registered Account +

          +
          + (1) Click [Register Account] to + enter the registration page; +
          + Registered Account +
          + (2) In the corresponding input + box on the registration page, + enter your email + address/password/invitation code + respectively to create a DooTask + account, and click [Register] to + complete the account + registration. +
          + Registered Account +
          • +
        • +

          + Login to your account +

          +
          + Account Password Login +
          +
          + (1) Enter your email + address/password in the + corresponding input box on the + login page; +
          +
          + (2) Click [Login] to access your + account. +
          + Account Password Login +
          + Scan Code To Login +
          +
          + (1) Click the green QR code at + the top right corner of the + login page to enter the code + scanning login page; +
          + Scan Code To Login +
          + (2) Use DooTask Mobile to scan + the QR code to log in to your + account. +
          + Scan Code To Login +
          • +
        • +

          + Task Reminder Robot +

          +
          + Open the [Message] button in the + left navigation bar of DooTask, + you can view the "Task + Reminder", the task reminder + robot according to the + associated task change status + real-time update reminder, such + as the new task prompts, task + modification prompts, task + expiration prompts, and so on. +
          + Task Reminder Robot +
          • +
        • +

          + Check-in And Clock-out Robot +

          +
          + Open the [Message] button in the + left navigation bar of DooTask, + you can view the "Check-in and + Punch-in", Check-in and Punch-in + Robot automatically records the + employee's daily check-in and + punch-in data to help users + achieve effective work progress + management and time planning. +
          + Check-in And Clock-out Robot +
          • +
        • +

          + Personal Information Settings +

          +
          + (1) Click [Avatar] in the upper + right corner of the user → click + [Personal Settings] to select + the personal settings page, you + can modify your personal + avatar/telephone/nickname/position + (title) and other information; +
          +
          + (2) Click [Submit] to confirm + the changes and [Reset] to clear + the current settings. +
          + Personal Information Settings +
          • +
        • +

          + Check-in Settings +

          +
          + (1) Click the user's upper-right + corner [avatar] → click + [Personal Settings] → click + [Sign-in Settings], that is, to + display the last five days of + the sign-in record, click the + bottom of the [View more sign-in + data] to view the history of the + sign-in record; +
          + Check-in Settings +
          + (2) In the corresponding input + box under the check-in setting + column, enter the device MAC + address/remarks information, and + associate the device to connect + to the designated router (WiFi) + to achieve automatic check-in, + if you need to add other + devices, you can click [Add + Device] to add new ones; +
          +
          + (3) Click [Submit] to confirm + the changes and [Reset] to clear + the current settings. +
          + Check-in Settings +
          • +
        • +

          + Shortcut Key Setting +

          +
          + (1) Click [Avatar] in the upper + right corner of the user → click + [Personal Settings] → click + [Shortcut Keys], you can + customise the shortcut key + combinations according to your + personal habits; +
          +
          + (2) Click [Save] to confirm the + changes and [Reset] to clear the + current settings. +
          + Shortcut Key Setting +
          • +
        • +

          + Language Settings +

          +
          + (1) Click [Avatar] in the upper + right corner of the user → click + [Personal Settings] → click + [Language Settings], click the + drop-down icon in the box to the + right of the selected language + to switch between different + languages. The system currently + supports Simplified Chinese, + Traditional Chinese, English, + Korean, Japanese, German, French + and Indonesian; +
          +
          + (2) Click [Submit] to confirm + the changes and [Reset] to clear + the current settings. +
          + Language Settings +
          • +
        • +

          + Theme Setting +

          +
          + (1) Click the user's upper-right + corner [avatar] → click + [Personal Settings] → click + [Theme Settings], click to + select the theme of the right + side of the box drop-down icon, + you can switch to the + corresponding theme, the system + currently supports the bright / + dark two themes; +
          +
          + (2) Click [Submit] to confirm + the changes and [Reset] to clear + the current settings. +
          + Theme Setting +
          • +
        • +

          + Password Setting +

          +
          + (1) Click [Avatar] in the upper + right corner of the user → click + [Personal Settings] → click + [Password Settings], enter the + user's old password → enter the + user's new password → enter the + user's new password again to + confirm; +
          +
          + (2) Click [Submit] to confirm + the changes and [Reset] to clear + the current settings. +
          + Password Setting +
          • +
        • +

          + Modify Mailbox +

          +
          + (1) Click [Avatar] in the upper + left corner of the user → click + [Personal Settings] → click + [Modify Mailbox], enter the new + mailbox address and click [Send + Verification Code] and enter the + verification code; +
          +
          + (2) Click [Submit] to confirm + the changes and [Reset] to clear + the current settings. +
          + Modify Mailbox +
          • +
        • +

          + Multi-style project management + templates +

          +
          + DooTask template to meet a + variety of team collaboration + scenarios, while supporting + custom templates to meet the + team's personalised scenario + management needs, you can + intuitively view the progress of + the project, team collaboration + is more convenient. +
          +
          • +
        • +

          + Visualisation Project Office +

          +
          + Use multiple views such as + Kanban, tables, and lists to + keep the overall project at a + glance; members have the + flexibility to filter, sort, and + group tasks to prioritise the + essentials and stay focused. +
          +
          • +
        • +

          + Real-time monitoring of project + management developments +

          +
          + Real-time changes in project + dynamics, specific task changes + record reminders, so that the + team to control the overall + project process, the development + of appropriate plans. +
          +
          • +
        • +

          + Create A Project +

          +
          + (1) Click [New Project] at the + bottom left corner of the + DooTask page; +
          + Create A Project +
          + (2) In the new project pop-up + window that appears, enter the + project name (required and can + not be less than two words) ¡ú + select the project template + (default blank template) ¡ú + select whether to open the + workflow; +
          +
          + (3) Click [Add] to complete the + project creation. +
          + Create A Project +
          • +
        • +

          + Multi-view Task List +

          +
          + (1) Open DooTask page and click + the corresponding project name + button on the left side to + display the list of all tasks + belonging to the project; +
          + Multi-view Task List +
          + (2) Click the corresponding + [Switch View] icon in the upper + left corner to view the task + classification/task + priority/responsible person/due + time information of the + corresponding task. +
          + Multi-view Task List +
          • +
        • +

          + Completed Tasks Display +

          +
          + (1) Under normal circumstances, + "Completed Tasks" will be + automatically hidden in the task + list and will not be displayed; +
          +
          + (2) Check the [Show Completed] + icon in the upper-right corner + of the project task list to view + the "Completed Tasks". +
          + Completed Tasks Display +
          • +
        • +

          + Project Dynamic Display +

          +
          + (1) On the corresponding project + page, click the [Project + Dynamics] icon in the upper-left + corner to view the operation + history of project members + according to the date. +
          + Project Dynamic Display + Project Dynamic Display +
          • +
        • +

          + Creating Tasks +

          +
          + (1) Select the project name to + enter the task list, and click + the [New Task] icon in the upper + left corner of the corresponding + task list; +
          + Creating Tasks +
          + (2) Enter task + description/detailed + description, select task + priority/task time/task + leader/visibility and other + information in the corresponding + input box, and add subtasks as + required; +
          +
          + (3) Click [Add Task] in the + lower right corner of the Create + Task page to complete the + creation of a new task. +
          + Creating Tasks +
          • +
        • +

          + Mission Dashboard +

          +
          + Click [Dashboard] on the left + side of the DooTask page to + display task statistics (showing + tasks due today, overdue tasks, + and pending tasks). +
          + Mission Dashboard +
          • +
        • +

          + Duration Of The Mission +

          +
          + Select the task that needs to be + modified, open the task detail + page, click [Deadline] to modify + the task time according to the + actual situation. +
          + Duration Of The Mission +
          • +
        • +

          + Task visibility +

          +
          + Select the corresponding task, + open the task detail page, and + click [Visibility] to select + project personnel/task + personnel/specified members to + be visible as needed. +
          + Task Visibility +
          • +
        • +

          + Task Priority +

          +
          + In the task creation window and + task details page, you can set + the task priority as needed. The + system currently supports four + major task priorities: important + and urgent, important and not + urgent, urgent and not + important, and not important and + not urgent. (You can change the + priority according to the task + situation) +
          + Task Priority +
          • +
        • +

          + Citing Associated Documents and + Tasks +

          +
          + Select the corresponding task, + open the task detail page, enter + the associated file link/task in + the input box of the chat window + on the right side of the page, + and click the [Send] icon to + quote it. +
          + Citing Associated Documents and Tasks +
          • +
        • +

          + Mission Affiliates +

          +
          + Select the corresponding task, + open the task details page, in + the chat window on the right + side of the page in the input + box @ the task associated with + the personnel account nickname, + click on the [Send] icon, the + members of the task instantly + enter the group chat. +
          + Mission Affiliates +
          • +
        • +

          + Task Force Meeting +

          +
          + Select the corresponding task, + open the task details page, and + click the [Expand] icon at the + bottom right of the chat window + on the right side of the page to + launch a group video/voice + conference for all members in + the task group chat. +
          +
          + Group video/voice conferencing + can be initiated for all members + within a task group chat. +
          + Task Force Meeting +
          • +
        • +

          + Project Dynamic Display +

          +
          + In the corresponding task detail + page, click the [Task Dynamics] + icon in the upper right corner + to view the operation history of + task members according to the + date. +
          + Project Dynamic Display +
          • + +
        • +

          + Corporate Governance +

          +
          + Helping organisations to their + corporate goals, connecting + objectives, key results and + individual work, and working + together to drive strategy to + fruition and goals to be + achieved; +
          +
          + Through collaborative authoring, + the progress, completion status + and schedule of all enterprise + work are shared to facilitate + the flow of information, so that + all staff can access key project + information, follow up in a + timely manner and promote + cross-departmental + collaboration. +
          +
          • +
        • +

          + Product Management +

          +
          + Customise the workflow of the + product development process, + assign tasks to different roles + at different stages to promote + the product development process; + archive the history of each + completed project and task, so + that it is easy to call or + discuss at any time, forming a + closed loop of knowledge + precipitation to reuse. +
          +
          • +
        • +

          + Personnel Administration +

          +
          + Obtain multi-dimensional + corporate data through data + visualisation statistical + reports to gain a comprehensive + understanding of employee + performance and make performance + evaluation more objective and + fair; use announcements to + release notices, arrange company + activities, deliver corporate + decisions, facilitate the + shaping of corporate culture and + make employees more engaged. +
          +
          • +
        • +

          + Working Report +

          +
          + 1 My debriefing: +
          +
          + Report Search +
          +
          + Click on the user's avatar in + the upper-left corner → click on + [Work Reports] → click on [My + Reports], select the type of + report/reporting time that needs + to be queried on the upper-left + side of the page, and click on + [Search] to instantly display + the relevant report data. +
          + Report Search +
          + Reporting Record Display +
          +
          + Click the user's avatar in the + upper-left corner → click [Work + Reports] → click [My Reports], + and you can view the + name/type/reporting + time/reporting object/operation + and other information of the + corresponding report on the Work + Reports page. +
          + Reporting Record Display +
          + Additional Reports +
          +
          + (1) Click on the user's avatar + in the upper-left corner → Click + on [Work Reports] → Click on + [Add Report]; +
          +
          + (2) On the New Report page, + select the report type (select + Weekly/Daily)/reporting object + (you can directly use the object + of the last report), enter the + corresponding report content, + and click [Submit] to complete + the report. +
          + Additional Reports + Additional Reports +
          + 2 Report received: +
          +
          + Report Search +
          +
          + Click on the user's avatar in + the upper-left corner → click on + [Work Reports] → click on + [Received Reports], select the + keywords/reporting + type/reporting time that you + need to query on the upper-left + side of the page, and click on + [Search] to instantly display + the relevant report data. +
          + Report Search +
          + Reporting Record Display +
          +
          + Click the user's avatar in the + upper-left corner → click [Work + Reports] → click [Received + Reports], and you can view the + title/type/receipt + time//operation of the + corresponding report on the Work + Reports page. +
          + Reporting Record Display +
          • +
        • +

          + Data Dxport +

          +
          + Click the user's avatar in the + upper-left corner → click [Team + Management], and select [Export + Task Statistics] / [Export + Overdue Tasks] / [Export + Approval Data] / [Export + Check-In Data] according to your + needs to export the associated + data records. +
          + Data Dxport +
          • +
        • +

          + New Sectors +

          +
          + (1) Click on the user's avatar + in the upper-left corner → Click + on the "Team Management" option + in the [Team Management] list, + and then click on [New + Department] in the lower-left + corner of the page; +
          + New Sectors +
          + (2) Enter the name of the + department in the New Department + pop-up window that appears → + Select the parent department → + Add the department head → Choose + to create a departmental group + chat or use an existing group + chat; +
          +
          + (3) Click [New] to complete the + creation of a new department. +
          + New Sectors +
          • +
        • +

          + Search For Members +

          +
          + Click on the user's avatar in + the upper-left corner → Click on + the "Team Management" option in + the [Team Management] list, + select the + keywords/identity/on-the-job + status/email authentication that + you need to query at the top of + the page, and then click on + [Search] to display the relevant + personnel information. +
          + Search For Members +
          • +
        • +

          + Team Member Operation +

          +
          + Click on the user's avatar in + the upper-left corner → Click on + the "Team Management" option in + the [Team Management] list, + click on the corresponding + personnel information + [Operation] button, you can + choose to carry out the member: + set up as an administrator / set + up as a temporary account / + change the mailbox / change the + password / modify the department + / operation of the operation of + the departure / deletion of the + operation. +
          + Team Member Operation +
          • +
        • +

          + Project Members +

          +
          + (1) Select the corresponding + project and click [Member + Management] on the upper right + to add/delete project members; +
          +
          + (2) Click [Cancel] to cancel the + member management settings and + [Save] to save the member + modification management + operation. +
          + Project Members + Project Members +
          • +
        • +

          + Mandate Holder +

          +
          + Select the corresponding + project, click the [New Task] + icon in the upper right corner + of the task list → click + [Advanced Options] to add/delete + the relevant task leader or + assistants. +
          + Mandate Holder + Mandate Holder +
          • +
        • +

          + File Type +

          +
          + (1) Click [File] on the left + side of the DooTask page to + display and view project-related + files. +
          + File Type +
          + (2) Click the [New File] icon + button in the upper right corner + of the page to create a new + folder/upload files/upload + folders, the current system + supports text, icons, mind maps, + Word documents, Excel + worksheets, PPT presentations a + variety of file types. +
          + File Type +
          • +
        • +

          + File Sharing +

          +
          + Click [File] on the left side of + DooTask page, select the + corresponding folder/file and + click the icon in the upper + right corner, then click [Share] + to share the folder/file to + relevant project members. +
          + File Sharing +
          • +
        • +

          + Access Authority +

          +
          + (1) Click [File] on the left + side of DooTask page, select the + corresponding folder/file and + then click the icon on the upper + right corner, click [Share] to + open the sharing settings; +
          +
          + (2) According to the need to + select all people/specified + members visible, shared file + read/write/read-only, click + [Share] to complete the + operation. +
          + Access Authority +
          • +
        • +

          + Document Display +

          +
          + Click [Files] on the left side + of the DooTask page and tick the + [Show My Only] icon at the top + right corner of the page to view + your personal files. +
          + Document Display +
          • +
        +
        +
        +
        +
        + -
+
- + + + \ No newline at end of file diff --git a/public/site/en/index.html b/public/site/en/index.html index 39eb3495a..02a7a9025 100644 --- a/public/site/en/index.html +++ b/public/site/en/index.html @@ -1,40 +1,53 @@ + - - DooTask - The most popular open source project collaboration tool - - - - - - - - - + + + DooTask - The most popular open source project collaboration tool + + + + + + + + + + +
- We use first party cookies to improve your browsing experience on our website, to analyze our website traffic and to understand where our visitors are coming from. If you choose to opt-out, only strictly necessary cookies will be used.Our cookie policy + We use first party cookies to improve your browsing + experience on our website, to analyze our website traffic + and to understand where our visitors are coming from. If you + choose to opt-out, only strictly necessary cookies will be + used.Our cookie policy
- - + +
- +
- Language switch + Language switch
  • 简体中文
  • - English + English
- Brighter theme + Brighter theme - Dark theme + Dark theme - github + github - +
- Menu + Menu
@@ -113,26 +130,37 @@ DooTask , - - + + Lightweight task management tool
-

Lightweight open source online project task management tool to help teams efficiently advance their projects and make work easier.

+

+ Lightweight open source online project task + management tool to help teams efficiently + advance their projects and make work easier. +

- - - - - - - - + + + + + + + +
- DooTask,Lightweight open source online project task management tool to help teams efficiently advance their projects and make work easier. + DooTask,Lightweight open source online project task management tool to help teams efficiently advance their projects and make work easier.
@@ -141,7 +169,7 @@
✕ @@ -157,7 +185,7 @@
Support - Support + Support
    @@ -185,28 +213,28 @@
    Theme - Theme + Theme
    -
      -
    1. +
        +
      1. Light
        2. -
      2. +
      3. Dark
      Language - Language + Language
      -
        -
      1. +
          +
        1. 简体中文
          2. -
        2. +
        3. English
        @@ -225,19 +253,21 @@
        -

        Trusted by many companies

        +

        + Trusted by many companies +

        • - 陕建集团 + 陕建集团
        • - 艾特科 + 艾特科
        • - 中国联通 + 中国联通
        • - 旗雲科技 + 旗雲科技
        @@ -245,116 +275,201 @@
        -

        Our Features you cab get

        +

        + Our Features you cab get +

        • - Project Management + Project Management
          -

          Project Management

          - Project Management -
          -
          -
          -

          Project Management

          - Support a variety of project management modes, suitable for all sizes and types of project management, real-time control of project progress, optimize work. -
          - Support a variety of project management modes, suitable for all sizes and types of project management, real-time control of project progress, optimize work. -
          -
          • -
        • - Teamwork -
          -

          Teamwork

          - Teamwork +

          + Project Management +

          + Project Management
          -

          Teamwork

          - Provide rich and practical online document collaboration tools to facilitate communication and collaboration among team members and improve work efficiency. +

          + Project Management +

          + Support a variety of project management modes, suitable for all sizes and types of project management, real-time control of project progress, optimize work.
          - Provide rich and practical online document collaboration tools to facilitate communication and collaboration among team members and improve work efficiency. + Support a variety + of project + management modes, suitable for + all sizes and types of project + management, real-time control of + project progress, optimize + work.
        • - Task Synergy + Teamwork
          -

          Task Synergy

          - Task Synergy +

          + Teamwork +

          + Teamwork
          -

          Task Synergy

          - A task-oriented approach keeps the team's work organized and ensures efficient teamwork and a clear division of tasks. +

          + Teamwork +

          + Provide rich and practical online document collaboration tools to facilitate communication and collaboration among team members and improve work efficiency.
          - A task-oriented approach keeps the team's work organized and ensures efficient teamwork and a clear division of tasks. + Provide rich and + practical + online document collaboration + tools to facilitate + communication and collaboration + among team members and improve + work efficiency.
        • - Performance Measurement + Task Synergy
          -

          Performance Measurement

          - Performance Measurement +

          + Task Synergy +

          + Task Synergy
          -

          Performance Measurement

          - Establishing quantifiable evaluation standards, data presentation of work effectiveness, and cohesion of core talents. +

          + Task Synergy +

          + A task-oriented approach keeps the team's work organized and ensures efficient teamwork and a clear division of tasks.
          - Establishing quantifiable evaluation standards, data presentation of work effectiveness, and cohesion of core talents. + A task-oriented + approach keeps + the team's work organized and + ensures efficient teamwork and a + clear division of tasks.
        • - Communication Report + Performance Measurement
          -

          Communication Report

          - Communication Report +

          + Performance Measurement +

          + Performance Measurement
          -

          Communication Report

          - Instant messaging and sharing based on work scenarios for better team communication. +

          + Performance Measurement +

          + Establishing quantifiable evaluation standards, data presentation of work effectiveness, and cohesion of core talents.
          - Instant messaging and sharing based on work scenarios for better team communication. + Establishing + quantifiable + evaluation standards, data + presentation of work + effectiveness, and cohesion of + core talents. +
          +
          • +
        • + Communication Report +
          +

          + Communication Report +

          + Communication Report +
          +
          +
          +

          + Communication Report +

          + Instant messaging and sharing based on work scenarios for better team communication. +
          + Instant messaging + and sharing + based on work scenarios for + better team communication.
        - Support a variety of project management modes, suitable for all sizes and types of project management, real-time control of project progress, optimize work. + Support a variety of project management modes, suitable for all sizes and types of project management, real-time control of project progress, optimize work.
        -

        Our Features you cab get

        +

        + Our Features you cab get +

          -
        • - Project Management -

          Project Management

          - Support a variety of project management modes, suitable for all sizes and types of project management, real-time control of project progress, optimize work. - Support a variety of project management modes, suitable for all sizes and types of project management, real-time control of project progress, optimize work. +
        • + Project Management +

          + Project Management +

          + Support a variety of project + management modes, suitable for all + sizes and types of project + management, real-time control of + project progress, optimize work. + Support a variety of project management modes, suitable for all sizes and types of project management, real-time control of project progress, optimize work.
          • -
        • - Teamwork -

          Teamwork

          - Provide rich and practical online document collaboration tools to facilitate communication and collaboration among team members and improve work efficiency. - Provide rich and practical online document collaboration tools to facilitate communication and collaboration among team members and improve work efficiency. +
        • + Teamwork +

          + Teamwork +

          + Provide rich and practical online + document collaboration tools to + facilitate communication and + collaboration among team members and + improve work efficiency. + Provide rich and practical online document collaboration tools to facilitate communication and collaboration among team members and improve work efficiency.
          • -
        • - Task Synergy -

          Task Synergy

          - A task-oriented approach keeps the team's work organized and ensures efficient teamwork and a clear division of tasks. - A task-oriented approach keeps the team's work organized and ensures efficient teamwork and a clear division of tasks. +
        • + Task Synergy +

          + Task Synergy +

          + A task-oriented approach keeps the + team's work organized and ensures + efficient teamwork and a clear + division of tasks. + A task-oriented approach keeps the team's work organized and ensures efficient teamwork and a clear division of tasks.
          • -
        • - Performance Measurement -

          Performance Measurement

          - Establishing quantifiable evaluation standards, data presentation of work effectiveness, and cohesion of core talents. - Establishing quantifiable evaluation standards, data presentation of work effectiveness, and cohesion of core talents. +
        • + Performance Measurement +

          + Performance Measurement +

          + Establishing quantifiable + evaluation standards, data + presentation of work effectiveness, + and cohesion of core talents. + Establishing quantifiable evaluation standards, data presentation of work effectiveness, and cohesion of core talents.
          • -
        • - Communication Report -

          Communication Report

          - Instant messaging and sharing based on work scenarios for better team communication. - Instant messaging and sharing based on work scenarios for better team communication. +
        • + Communication Report +

          + Communication Report +

          + Instant messaging and sharing based + on work scenarios for better team + communication. + Instant messaging and sharing based on work scenarios for better team communication.
        @@ -367,68 +482,190 @@

      2. Why Choose Us - - + +

        3. -
      3. -

        01

        -
        Efficient and convenient team communication tools
        -
        Establish groups for projects and tasks, work issues can be communicated in a timely manner to promote rapid teamwork and improve team efficiency.
        +
      4. +

        + 01 +

        +
        + Efficient and convenient team + communication tools +
        +
        + Establish groups for projects and tasks, + work issues can be communicated in a + timely manner to promote rapid teamwork + and improve team efficiency. +
        5. -
      5. -

        02

        -
        Powerful and easy-to-use collaborative document creation
        -
        It brings together a variety of online tools such as documents, spreadsheets, thinking notes, etc., bringing together corporate knowledge resources in one place and supporting real-time collaborative editing by multiple people, making teamwork more convenient.
        +
      6. +

        + 02 +

        +
        + Powerful and easy-to-use collaborative + document creation +
        +
        + It brings together a variety of online + tools such as documents, spreadsheets, + thinking notes, etc., bringing together + corporate knowledge resources in one + place and supporting real-time + collaborative editing by multiple + people, making teamwork more convenient. +
          7. -
        • -

          03

          -
          Convenient and diverse project management templates
          -
          Template to meet a variety of team collaboration scenarios, while supporting custom templates to meet the team's personalized scenario management needs, you can intuitively view the progress of the project, team collaboration more convenient.
          +
        • +

          + 03 +

          +
          + Convenient and diverse project + management templates +
          +
          + Template to meet a variety of team + collaboration scenarios, while + supporting custom templates to meet the + team's personalized scenario management + needs, you can intuitively view the + progress of the project, team + collaboration more convenient. +
          • -
        • -

          04

          -
          Clear and intuitive task calendar
          -
          Easily schedule each day with a flexible task calendar that breaks down tasks to each day, allowing for clearer work goals and more reasonable time allocation.
          +
        • +

          + 04 +

          +
          + Clear and intuitive task calendar +
          +
          + Easily schedule each day with a flexible + task calendar that breaks down tasks to + each day, allowing for clearer work + goals and more reasonable time + allocation. +
          • -
        • -

          05

          -
          Support for multi-platform applications
          -
          With multi-platform application support, you can track the progress of your project anytime, anywhere while having a more efficient and enjoyable experience at every step of your work.
          +
        • +

          + 05 +

          +
          + Support for multi-platform applications +
          +
          + With multi-platform application support, + you can track the progress of your + project anytime, anywhere while having a + more efficient and enjoyable experience + at every step of your work. +
        -

        Why Choose Us

        +

        + Why Choose Us +

        • -

          01

          -
          Efficient and convenient team communication tools
          -
          Establish groups for projects and tasks, work issues can be communicated in a timely manner to promote rapid teamwork and improve team efficiency.
          +

          + 01 +

          +
          + Efficient and convenient team + communication tools +
          +
          + Establish groups for projects and + tasks, work issues can be + communicated in a timely manner to + promote rapid teamwork and improve + team efficiency. +
        • -

          02

          -
          Powerful and easy-to-use collaborative document creation
          -
          It brings together a variety of online tools such as documents, spreadsheets, thinking notes, etc., bringing together corporate knowledge resources in one place and supporting real-time collaborative editing by multiple people, making teamwork more convenient.
          +

          + 02 +

          +
          + Powerful and easy-to-use + collaborative document creation +
          +
          + It brings together a variety of + online tools such as documents, + spreadsheets, thinking notes, etc., + bringing together corporate + knowledge resources in one place and + supporting real-time collaborative + editing by multiple people, making + teamwork more convenient. +
        • -

          03

          -
          Convenient and diverse project management templates
          -
          Template to meet a variety of team collaboration scenarios, while supporting custom templates to meet the team's personalized scenario management needs, you can intuitively view the progress of the project, team collaboration more convenient.
          +

          + 03 +

          +
          + Convenient and diverse project + management templates +
          +
          + Template to meet a variety of team + collaboration scenarios, while + supporting custom templates to meet + the team's personalized scenario + management needs, you can + intuitively view the progress of the + project, team collaboration more + convenient. +
        • -

          04

          -
          Clear and intuitive task calendar
          -
          Easily schedule each day with a flexible task calendar that breaks down tasks to each day, allowing for clearer work goals and more reasonable time allocation.
          +

          + 04 +

          +
          + Clear and intuitive task calendar +
          +
          + Easily schedule each day with a + flexible task calendar that breaks + down tasks to each day, allowing for + clearer work goals and more + reasonable time allocation. +
        • -

          05

          -
          Support for multi-platform applications
          -
          With multi-platform application support, you can track the progress of your project anytime, anywhere while having a more efficient and enjoyable experience at every step of your work.
          +

          + 05 +

          +
          + Support for multi-platform + applications +
          +
          + With multi-platform application + support, you can track the progress + of your project anytime, anywhere + while having a more efficient and + enjoyable experience at every step + of your work. +
        @@ -442,14 +679,20 @@
        - Turn on your DooTask team collaboration - Turn on your DooTask team collaboration + Turn on your DooTask team collaboration + Turn on your DooTask team collaboration
        -

        Turn on your DooTask team collaboration

        -
        - +

        + Turn on your DooTask team collaboration +

        + @@ -460,19 +703,22 @@