feat: 立即体验按钮、价格页面等样式调整

This commit is contained in:
gwokwong 2023-07-11 19:52:07 +08:00
parent 6185082311
commit c2215452d6
20 changed files with 350 additions and 214 deletions

View File

@ -760,7 +760,6 @@ img {
color: var(--text-color); color: var(--text-color);
} }
.get-started{ .get-started{
width: 123px;
display: inline-block; display: inline-block;
} }
.login-btn{ .login-btn{

View File

@ -1,158 +1,189 @@
/* 头部样式 */ /* 头部样式 */
.nav{ .nav {
background-color: var(--pop-bg-color); background-color: var(--pop-bg-color);
box-shadow: 0px 4px 9px var(--box-shadow-color); box-shadow: 0px 4px 9px var(--box-shadow-color);
} }
.help{
position: relative; .help {
margin: 56px 0 96px 0; position: relative;
padding-top: 80px; margin: 56px 0 96px 0;
padding-top: 80px;
} }
.help-con{
width: 100%; .help-con {
max-width: 1280px; width: 100%;
margin: 0 auto; max-width: 1280px;
margin: 0 auto;
} }
.help-layout{
display: flex; .help-layout {
align-items: flex-start; display: flex;
align-items: flex-start;
} }
.help-l{
padding: 24px; .help-l {
background: var(--bg-fa-color); display: none;
border-radius: 8px; padding: 24px;
margin-right: 32px; background: var(--bg-fa-color);
height: 95%; border-radius: 8px;
margin-right: 32px;
height: 95%;
} }
.help-h5{
color: var(--text-color); .help-h5 {
color: var(--text-color);
} }
.help-l-ul{
width: 240px; .help-l-ul {
overflow: auto; width: 240px;
height: 82vh; overflow: auto;
height: 82vh;
} }
.l-ul-item{
padding: 9px 16px; .l-ul-item {
cursor: pointer; padding: 9px 16px;
height: 22px; cursor: pointer;
height: 22px;
} }
.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); .l-ul-item.active {
border-radius: 8px; background-color: var(--bg-hover-color);
border-radius: 8px;
} }
.l-ul-item:hover{
background: var(--bg-hover-color); .l-ul-item:hover {
border-radius: 8px; background: var(--bg-hover-color);
border-radius: 8px;
} }
.txt{
/* display: inline-block; */ .txt {
color: var(--txt-gray-color); /* display: inline-block; */
color: var(--txt-gray-color);
} }
.help-r{
border-left: 1px solid var(--border-color); .help-r {
padding-left: 32px; padding-left: 32px;
position: relative; position: relative;
} }
.help-r::-webkit-scrollbar{
width: 0 !important .help-r::-webkit-scrollbar {
width: 0 !important
} }
.help-pic1{
position: relative; .help-pic1 {
padding-left: 34px; position: relative;
width: auto; padding-left: 34px;
height: 240px; width: auto;
background: var(--txt-theme-color); height: 240px;
border-radius: 8px; background: var(--txt-theme-color);
display: flex; border-radius: 8px;
align-items: center; display: flex;
overflow: hidden; align-items: center;
overflow: hidden;
} }
#help-pic1-svg{
height: 100%; #help-pic1-svg {
position: absolute; height: 100%;
top: 0; position: absolute;
right: 0; top: 0;
right: 0;
} }
.help-pic1-tips{
max-width: 360px; .help-pic1-tips {
max-width: 360px;
} }
.help-pic1-tips-h2{
color: #fff; .help-pic1-tips-h2 {
margin-bottom: 16px; color: #fff;
margin-bottom: 16px;
} }
.help-pic1-tips-h6{
color: #fff; .help-pic1-tips-h6 {
color: #fff;
} }
.help-h4{
color: var(--text-color) !important; .help-h4 {
color: var(--text-color) !important;
} }
.help-h6{
color: var(--txt-gray-color); .help-h6 {
color: var(--txt-gray-color);
} }
.help-h6-bold{
color: var(--text-color) !important; .help-h6-bold {
color: var(--text-color) !important;
} }
.r-ul-item-pic1{
display: block; .r-ul-item-pic1 {
height: 316px; display: block;
height: 316px;
} }
.r-ul-item-pic2{
display: block; .r-ul-item-pic2 {
height: 418px; display: block;
height: 418px;
} }
.dots{
background: url(../img/dots.svg) no-repeat; .dots {
width: 4px; background: url(../img/dots.svg) no-repeat;
height: 4px; width: 4px;
display: block; height: 4px;
position: absolute; display: block;
left: 10px; position: absolute;
top: 10px; left: 10px;
top: 10px;
} }
.help-t-768{
display: flex; .help-t-768 {
align-items: center; display: flex;
padding: 14px 16px; align-items: center;
background: var(--bg-fa-color); padding: 14px 16px;
border-radius: 8px; background: var(--bg-fa-color);
margin-top: 16px; border-radius: 8px;
cursor: pointer; margin-top: 16px;
margin-bottom: 40px; cursor: pointer;
margin-bottom: 40px;
} }
.help-t-prev{
display: inline-block; .help-t-prev {
width: 14px; display: inline-block;
margin-right: 8px; width: 14px;
margin-right: 8px;
} }
.help-t-tit{
font-weight: 400; .help-t-tit {
font-size: 16px; font-weight: 400;
line-height: 20px; font-size: 16px;
color: var(--txt-theme-color); line-height: 20px;
color: var(--txt-theme-color);
} }
.help-drawer{
position: fixed; .help-drawer {
top: 0; position: fixed;
left: -90vw; top: 0;
width: 75vw; left: -90vw;
height: 100%; width: 75vw;
padding: 22px 24px; height: 100%;
background-color: var(--pop-bg-color); padding: 22px 24px;
border: 1px solid var(--box-shadow-color); background-color: var(--pop-bg-color);
box-shadow: var(--pop-box-shadow); border: 1px solid var(--box-shadow-color);
transition: all 0.5s ease-in-out; box-shadow: var(--pop-box-shadow);
z-index: 999; transition: all 0.5s ease-in-out;
z-index: 999;
} }
.open-help-drawer{
left: 0; .open-help-drawer {
left: 0;
} }
.help-t-768{
display: none; .help-t-768 {
display: none;
}
.filings {
border-top: 1px solid var(--border-color);
} }
.filings{
border-top: 1px solid var(--border-color);
}

View File

@ -186,4 +186,60 @@
/* 底部样式 */ /* 底部样式 */
.footer-layut{ .footer-layut{
border-top: var(--border-color) solid 1px; 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 .top{
width: 382px;
line-height: 20px;
padding: 22px 24px 20px 24px;
font-size: 18px;
color: #303133;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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 .bottom{
width: 370px;
height: 34px;
padding: 20px 30px 22px 30px;
position: relative;
}
.BulletBox1 .bottom .BulletBox1Btn{
position: absolute;
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;
}

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >Get Started</button> <button class="btn btn-primary" >Experience it now</button>
</a> </a>
</span> </span>
</div> </div>
@ -262,12 +262,12 @@
<h1 class="footer-t-h1 mb-56">We'd love to hear from you</h1> <h1 class="footer-t-h1 mb-56">We'd love to hear from you</h1>
<h6 class="footer-t-h6 mb-56">Have questions about pricing, plans or products? Please fill out the form and we will contact you.</h6> <h6 class="footer-t-h6 mb-56">Have questions about pricing, plans or products? Please fill out the form and we will contact you.</h6>
<div class="footer-t-contact mb-24"> <div class="footer-t-contact mb-24">
<img class="footer-t-contact-icon mr-12" src="../img/about_icon1.svg" alt="Contact telephone number,13471168831"> <img class="footer-t-contact-icon mr-12" src="../img/about_icon1.svg" alt="Contact telephone number,0771-3164099">
<h6 class="footer-t-contact-h6">13471168831</h6> <h6 class="footer-t-contact-h6">0771-3164099</h6>
</div> </div>
<div class="footer-t-contact"> <div class="footer-t-contact">
<img class="footer-t-contact-icon mr-12" src="../img/about_icon2.svg" alt="E-mail,hitosea@gmail.com"> <img class="footer-t-contact-icon mr-12" src="../img/about_icon2.svg" alt="E-mail,service@hitosea.com">
<h6 class="footer-t-contact-h6">hitosea@gmail.com</h6> <h6 class="footer-t-contact-h6">service@hitosea.com</h6>
</div> </div>
</div> </div>
<form class="from"> <form class="from">

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >Get Started</button> <button class="btn btn-primary" >Experience it now</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >Get Started</button> <button class="btn btn-primary" >Experience it now</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >Get Started</button> <button class="btn btn-primary" >Experience it now</button>
</a> </a>
</span> </span>
</div> </div>
@ -101,7 +101,7 @@
<h4 class="txt-4001830 topics-h4 mb-32">Lightweight open source online project task management tool to help teams efficiently advance their projects and make work easier.</h4> <h4 class="txt-4001830 topics-h4 mb-32">Lightweight open source online project task management tool to help teams efficiently advance their projects and make work easier.</h4>
<div class="topics-btn flex-cc"> <div class="topics-btn flex-cc">
<span class="mr-24 get-started"> <span class="mr-24 get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="file:///Users/mac-023/Downloads/site/en/price.html">
<button class="btn btn-primary mr-20">Get Started</button> <button class="btn btn-primary mr-20">Get Started</button>
</a> </a>
</span> </span>
@ -418,7 +418,7 @@
<h1 class="collaboration-txt txt-5002835 mb-32">Turn on your DooTask team collaboration</h1> <h1 class="collaboration-txt txt-5002835 mb-32">Turn on your DooTask team collaboration</h1>
<div style="display: flex;"> <div style="display: flex;">
<span class="mr-24" style="width: 123px; display: inline-block;"> <span class="mr-24" style="width: 123px; display: inline-block;">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="file:///Users/mac-023/Downloads/site/en/price.html">
<button class="btn btn-gw mr-20">Get Started</button> <button class="btn btn-gw mr-20">Get Started</button>
</a> </a>
</span> </span>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >Get Started</button> <button class="btn btn-primary" >Experience it now</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -13,6 +13,20 @@
<link rel="stylesheet" href="../css/price.css"> <link rel="stylesheet" href="../css/price.css">
</head> </head>
<body> <body>
<div class="BulletBox1">
<div class="top">
<div class="name BulletBox1Name"></div>
<div class="close"></div>
</div>
<div class="content">
<p>If you have any questions, please feel free to contact us using the following methods.</p>
<p>landline telephone:0771-3164099</p>
<p>Email Address:service@hitosea.com</p>
</div>
<div class="bottom">
<div class="BulletBox1Btn">make certain</div>
</div>
</div>
<div id="layout"> <div id="layout">
<!-- 页头区域 --> <!-- 页头区域 -->
<header class="head price"> <header class="head price">
@ -76,7 +90,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >Get Started</button> <button class="btn btn-primary" >Experience it now</button>
</a> </a>
</span> </span>
</div> </div>
@ -94,13 +108,13 @@
<h4 class="txt-4001830 topics-h4 mb-64 topics-h4-en">Different versions are available depending on the size and needs of your business</h4> <h4 class="txt-4001830 topics-h4 mb-64 topics-h4-en">Different versions are available depending on the size and needs of your business</h4>
<ul class="price-card"> <ul class="price-card">
<li class="price-card-item price-animate-box" style="--delay: 0s;"> <li class="price-card-item price-animate-box" style="--delay: 0s;">
<h4 class="txt-5002025 price-card-h4 mb-24">Free</h4> <h4 class="txt-5002025 price-card-h4 mb-24">Regular version</h4>
<div class="price-card-money mb-12"> <div class="price-card-money mb-12">
<h2 class="txt-6003645 price-card-h2">¥0</h2> <h2 class="txt-6003645 price-card-h2">¥0</h2>
<i class="txt-5001628 price-card-unit">/month</i> <i class="txt-5001628 price-card-unit">/month</i>
</div> </div>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">Up to 3 persons</h6> <h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">No limit to the number of people</h6>
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-green mb-24">Get Started</button> </a> <a href="https://github.com/kuaifan/dootask/tree/v0.13.0" target="_blank"> <button class="btn btn-green mb-24">Get Started</button> </a>
<ol class="price-card-ol"> <ol class="price-card-ol">
<li class="price-card-ol-item mb-12"> <li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment"> <img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment">
@ -109,13 +123,13 @@
</ol> </ol>
</li> </li>
<li class="price-card-item price-animate-box" style="--delay: 0.1s;"> <li class="price-card-item price-animate-box" style="--delay: 0.1s;">
<h4 class="txt-5002025 price-card-h4 mb-24">Annual</h4> <h4 class="txt-5002025 price-card-h4 mb-24">Professional Edition</h4>
<div class="price-card-money mb-12"> <div class="price-card-money mb-12">
<h2 class="txt-6003645 price-card-h2">¥3,000</h2> <h2 class="txt-6003645 price-card-h2">¥0</h2>
<i class="txt-5001628 price-card-unit">/year</i> <i class="txt-5001628 price-card-unit">/month</i>
</div> </div>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">No limit to the number of people</h6> <h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">Up to 3 persons</h6>
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-green mb-24">Get Started</button> </a> <a href="https://github.com/kuaifan/dootask/tree/pro" target="_blank"> <button class="btn btn-green mb-24">Get Started</button> </a>
<ol class="price-card-ol"> <ol class="price-card-ol">
<li class="price-card-ol-item mb-12"> <li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment"> <img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment">
@ -132,12 +146,12 @@
</ol> </ol>
</li> </li>
<li class="price-card-item active price-animate-box" style="--delay: 0.2s;"> <li class="price-card-item active price-animate-box" style="--delay: 0.2s;">
<h4 class="txt-5002025 price-card-h4 mb-24">Lifetime<i class="rec-icon">Rec.</i></h4> <h4 class="txt-5002025 price-card-h4 mb-24">Professional Edition<i class="rec-icon">Rec.</i></h4>
<div class="price-card-money mb-12"> <div class="price-card-money mb-12">
<h2 class="txt-6003645 price-card-h2">¥18,888</h2> <h2 class="txt-6003645 price-card-h2">¥18,888</h2>
</div> </div>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">No limit to the number of people</h6> <h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">No limit to the number of people</h6>
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-green mb-24">Get Started</button> </a> <button class="btn btn-green mb-24" onclick="showBox('Contact Us')">Contact Us</button>
<ol class="price-card-ol"> <ol class="price-card-ol">
<li class="price-card-ol-item mb-12"> <li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment"> <img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment">
@ -162,12 +176,12 @@
</ol> </ol>
</li> </li>
<li class="price-card-item price-animate-box" style="--delay: 0.3s;"> <li class="price-card-item price-animate-box" style="--delay: 0.3s;">
<h4 class="txt-5002025 price-card-h4 mb-24">Customized Versions</h4> <h4 class="txt-5002025 price-card-h4 mb-24">customised version</h4>
<div class="price-card-money mb-12"> <div class="price-card-money mb-12">
<h2 class="txt-6003645 price-card-h2">Custom</h2> <h2 class="txt-6003645 price-card-h2">Custom</h2>
</div> </div>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">No limit to the number of people</h6> <h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">No limit to the number of people</h6>
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-green mb-24">Get Started</button></a> <button class="btn btn-green mb-24" onclick="showBox('Customised consultancy')">Customised consultancy</button>
<ol class="price-card-ol"> <ol class="price-card-ol">
<li class="price-card-ol-item mb-12"> <li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment"> <img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment">
@ -283,9 +297,9 @@
<ul class="plans-ul-t"> <ul class="plans-ul-t">
<li class="plans-ul-t-item grid-4" style="padding: 20px 24px;"> <li class="plans-ul-t-item grid-4" style="padding: 20px 24px;">
<h4 class="txt-5002024 plans-ul-t-item-h4">Feature</h4> <h4 class="txt-5002024 plans-ul-t-item-h4">Feature</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">Free</h4> <h4 class="txt-5002024 plans-ul-t-item-h4">Professional Edition</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">Annual</h4> <h4 class="txt-5002024 plans-ul-t-item-h4">Professional Edition</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">Lifetime</h4> <h4 class="txt-5002024 plans-ul-t-item-h4">customised version</h4>
</li> </li>
<li class="plans-ul-t-item grid-4" style="padding: 32px 24px;"> <li class="plans-ul-t-item grid-4" style="padding: 32px 24px;">
<h4 class="txt-5001616 plans-ul-t-item-h4">Pricing</h4> <h4 class="txt-5001616 plans-ul-t-item-h4">Pricing</h4>
@ -295,16 +309,7 @@
<i class="txt-5001628 price-card-unit">/month</i> <i class="txt-5001628 price-card-unit">/month</i>
</div> </div>
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">Get Started</button></a> <a href="https://github.com/kuaifan/dootask/tree/pro" target="_blank"> <button class="btn btn-primary">Get Started</button></a>
</span>
</div>
<div class="plans-ul-t-item-h4">
<div class="price-card-money mb-24">
<h2 class="txt-6003645 price-card-h2">¥3,000</h2>
<i class="txt-5001628 price-card-unit">/year</i>
</div>
<span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">Get Started</button></a>
</span> </span>
</div> </div>
<div class="plans-ul-t-item-h4"> <div class="plans-ul-t-item-h4">
@ -312,7 +317,15 @@
<h2 class="txt-6003645 price-card-h2">¥18,888</h2> <h2 class="txt-6003645 price-card-h2">¥18,888</h2>
</div> </div>
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">Get Started</button></a> <button class="btn btn-primary" onclick="showBox('Contact Us')">Contact Us</button>
</span>
</div>
<div class="plans-ul-t-item-h4">
<div class="price-card-money mb-24">
<h2 class="txt-6003645 price-card-h2">Custom</h2>
</div>
<span class="plans-ul-b-item-btn">
<button class="btn btn-primary" onclick="showBox('Customised consultancy')">Customised consultancy</button>
</span> </span>
</div> </div>
</li> </li>
@ -413,17 +426,17 @@
<h4 class="plans-ul-t-item-h4"></h4> <h4 class="plans-ul-t-item-h4"></h4>
<div class="plans-ul-t-item-h4"> <div class="plans-ul-t-item-h4">
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">Get Started</button></a> <a href="https://github.com/kuaifan/dootask/tree/pro" target="_blank"> <button class="btn btn-primary">Get Started</button></a>
</span> </span>
</div> </div>
<div class="plans-ul-t-item-h4"> <div class="plans-ul-t-item-h4">
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">Get Started</button></a> <button class="btn btn-primary" onclick="showBox('Contact Us')">Contact Us</button>
</span> </span>
</div> </div>
<div class="plans-ul-t-item-h4"> <div class="plans-ul-t-item-h4">
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">Get Started</button></a> <button class="btn btn-primary" onclick="showBox('Customised consultancy')">Customised consultancy</button>
</span> </span>
</div> </div>
</li> </li>
@ -754,5 +767,17 @@
}) })
timerId = null; // 执行完后将定时器置空 timerId = null; // 执行完后将定时器置空
}, 1200); }, 1200);
// 联系我们和定制咨询弹框
function showBox(text){
const box = document.querySelector('.BulletBox1')
box.style.display = 'block'
const name = document.querySelector('.BulletBox1Name')
name.innerHTML = text
}
document.querySelector('.BulletBox1Btn').addEventListener('click',function(){
console.log("aaaaa");
const box = document.querySelector('.BulletBox1')
box.style.display = 'none'
})
</script> </script>
</html> </html>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >Get Started</button> <button class="btn btn-primary" >Experience it now</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >Get Started</button> <button class="btn btn-primary" >Experience it now</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>
@ -100,7 +100,7 @@
<h4 class="txt-4001830 topics-h4 mb-32">DooTask是一款轻量级的开源在线项目任务管理工具提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM文件管理等工具。助力团队高效推进项目让工作更简单。</h4> <h4 class="txt-4001830 topics-h4 mb-32">DooTask是一款轻量级的开源在线项目任务管理工具提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM文件管理等工具。助力团队高效推进项目让工作更简单。</h4>
<div class="flex-cc topics-btn"> <div class="flex-cc topics-btn">
<span class="mr-24 get-started"> <span class="mr-24 get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="file:///Users/mac-023/Downloads/site/zh/price.html" >
<button class="btn btn-primary mr-20">开始使用</button> <button class="btn btn-primary mr-20">开始使用</button>
</a> </a>
</span> </span>
@ -419,7 +419,7 @@
<h1 class="collaboration-txt txt-5002835 mb-32">开启您的DooTask团队协作</h1> <h1 class="collaboration-txt txt-5002835 mb-32">开启您的DooTask团队协作</h1>
<div style="display: flex;"> <div style="display: flex;">
<span class="mr-24 get-started"> <span class="mr-24 get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="file:///Users/mac-023/Downloads/site/zh/price.html" >
<button class="btn btn-gw mr-20">开始使用</button> <button class="btn btn-gw mr-20">开始使用</button>
</a> </a>
</span> </span>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>
@ -261,11 +261,11 @@
<h6 class="footer-t-h6 mb-56">对价格、计划或产品有疑问吗?请填写表格,我们将与您联系。</h6> <h6 class="footer-t-h6 mb-56">对价格、计划或产品有疑问吗?请填写表格,我们将与您联系。</h6>
<div class="footer-t-contact mb-24"> <div class="footer-t-contact mb-24">
<img class="footer-t-contact-icon mr-12" src="../img/about_icon1.svg" alt="联系手机,13471168831"> <img class="footer-t-contact-icon mr-12" src="../img/about_icon1.svg" alt="联系手机,13471168831">
<h6 class="footer-t-contact-h6">13471168831</h6> <h6 class="footer-t-contact-h6">0771-3164099</h6>
</div> </div>
<div class="footer-t-contact"> <div class="footer-t-contact">
<img class="footer-t-contact-icon mr-12" src="../img/about_icon2.svg" alt="邮箱,hitosea@gmail.com"> <img class="footer-t-contact-icon mr-12" src="../img/about_icon2.svg" alt="邮箱,service@hitosea.com">
<h6 class="footer-t-contact-h6">hitosea@gmail.com</h6> <h6 class="footer-t-contact-h6">hservice@hitosea.com</h6>
</div> </div>
</div> </div>
<form class="from"> <form class="from">

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>
@ -100,7 +100,7 @@
<h4 class="txt-4001830 topics-h4 mb-32">DooTask是一款轻量级的开源在线项目任务管理工具提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM文件管理等工具。助力团队高效推进项目让工作更简单。</h4> <h4 class="txt-4001830 topics-h4 mb-32">DooTask是一款轻量级的开源在线项目任务管理工具提供各类文档协作工具、在线思维导图、在线流程图、项目管理、任务分发、即时IM文件管理等工具。助力团队高效推进项目让工作更简单。</h4>
<div class="flex-cc topics-btn"> <div class="flex-cc topics-btn">
<span class="mr-24 get-started"> <span class="mr-24 get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="file:///Users/mac-023/Downloads/site/zh/price.html" >
<button class="btn btn-primary mr-20">开始使用</button> <button class="btn btn-primary mr-20">开始使用</button>
</a> </a>
</span> </span>
@ -418,7 +418,7 @@
<h1 class="collaboration-txt txt-5002835 mb-32">开启您的DooTask团队协作</h1> <h1 class="collaboration-txt txt-5002835 mb-32">开启您的DooTask团队协作</h1>
<div style="display: flex;"> <div style="display: flex;">
<span class="mr-24 get-started"> <span class="mr-24 get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="file:///Users/mac-023/Downloads/site/zh/price.html" >
<button class="btn btn-gw mr-20">开始使用</button> <button class="btn btn-gw mr-20">开始使用</button>
</a> </a>
</span> </span>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -13,6 +13,20 @@
<link rel="stylesheet" href="../css/price.css"> <link rel="stylesheet" href="../css/price.css">
</head> </head>
<body> <body>
<div class="BulletBox1">
<div class="top">
<div class="name BulletBox1Name">联系我们</div>
<div class="close"></div>
</div>
<div class="content">
<p>如果有任何问题,欢迎使用以下方式与我们联系。</p>
<p>座机电话0771-3164099</p>
<p>邮箱地址service@hitosea.com</p>
</div>
<div class="bottom">
<div class="BulletBox1Btn">确定</div>
</div>
</div>
<div id="layout"> <div id="layout">
<!-- 页头区域 --> <!-- 页头区域 -->
<header class="head price"> <header class="head price">
@ -76,7 +90,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>
@ -94,13 +108,13 @@
<h4 class="txt-4001830 topics-h4 mb-64">根据你的企业的规模和需求,有不同的版本可供选择</h4> <h4 class="txt-4001830 topics-h4 mb-64">根据你的企业的规模和需求,有不同的版本可供选择</h4>
<ul class="price-card"> <ul class="price-card">
<li class="price-card-item price-animate-box" style="--delay: 0s;"> <li class="price-card-item price-animate-box" style="--delay: 0s;">
<h4 class="txt-5002025 price-card-h4 mb-24">免费</h4> <h4 class="txt-5002025 price-card-h4 mb-24">普通版</h4>
<div class="price-card-money mb-12"> <div class="price-card-money mb-12">
<h2 class="txt-6003645 price-card-h2">¥0</h2> <h2 class="txt-6003645 price-card-h2">¥0</h2>
<i class="txt-5001628 price-card-unit">/月</i> <i class="txt-5001628 price-card-unit">/月</i>
</div> </div>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">最多3</h6> <h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">数无限制</h6>
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-green mb-24">开始使用</button> </a> <a href="https://github.com/kuaifan/dootask/tree/v0.13.0" target="_blank"> <button class="btn btn-green mb-24">开始使用</button> </a>
<ol class="price-card-ol"> <ol class="price-card-ol">
<li class="price-card-ol-item mb-12"> <li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署"> <img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署">
@ -109,13 +123,13 @@
</ol> </ol>
</li> </li>
<li class="price-card-item price-animate-box" style="--delay: 0.1s;"> <li class="price-card-item price-animate-box" style="--delay: 0.1s;">
<h4 class="txt-5002025 price-card-h4 mb-24">年度</h4> <h4 class="txt-5002025 price-card-h4 mb-24">专业版</h4>
<div class="price-card-money mb-12"> <div class="price-card-money mb-12">
<h2 class="txt-6003645 price-card-h2">¥3,000</h2> <h2 class="txt-6003645 price-card-h2">¥0</h2>
<i class="txt-5001628 price-card-unit">/</i> <i class="txt-5001628 price-card-unit">/</i>
</div> </div>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">数无限制</h6> <h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">最多3</h6>
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-green mb-24">开始使用</button> </a> <a href="https://github.com/kuaifan/dootask/tree/pro" target="_blank"> <button class="btn btn-green mb-24">开始使用</button> </a>
<ol class="price-card-ol"> <ol class="price-card-ol">
<li class="price-card-ol-item mb-12"> <li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署"> <img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署">
@ -132,12 +146,12 @@
</ol> </ol>
</li> </li>
<li class="price-card-item price-animate-box active" style="--delay: 0.2s;"> <li class="price-card-item price-animate-box active" style="--delay: 0.2s;">
<h4 class="txt-5002025 price-card-h4 mb-24">终身<i class="rec-icon">Rec.</i></h4> <h4 class="txt-5002025 price-card-h4 mb-24">专业版<i class="rec-icon">Rec.</i></h4>
<div class="price-card-money mb-12"> <div class="price-card-money mb-12">
<h2 class="txt-6003645 price-card-h2">¥18,888</h2> <h2 class="txt-6003645 price-card-h2">¥18,888</h2>
</div> </div>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">人数无限制</h6> <h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">人数无限制</h6>
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-green mb-24">开始使用</button> </a> <button class="btn btn-green mb-24" onclick="showBox('联系我们')">联系我们</button>
<ol class="price-card-ol"> <ol class="price-card-ol">
<li class="price-card-ol-item mb-12"> <li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署"> <img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署">
@ -167,7 +181,7 @@
<h2 class="txt-6003645 price-card-h2">定制</h2> <h2 class="txt-6003645 price-card-h2">定制</h2>
</div> </div>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">人数无限制</h6> <h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">人数无限制</h6>
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-green mb-24">开始使用</button></a> <button class="btn btn-green mb-24" onclick="showBox('定制咨询')">定制咨询</button>
<ol class="price-card-ol"> <ol class="price-card-ol">
<li class="price-card-ol-item mb-12"> <li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署"> <img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署">
@ -283,9 +297,9 @@
<ul class="plans-ul-t"> <ul class="plans-ul-t">
<li class="plans-ul-t-item grid-4" style="padding: 20px 24px;"> <li class="plans-ul-t-item grid-4" style="padding: 20px 24px;">
<h4 class="txt-5002024 plans-ul-t-item-h4">特点</h4> <h4 class="txt-5002024 plans-ul-t-item-h4">特点</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">免费</h4> <h4 class="txt-5002024 plans-ul-t-item-h4">专业版</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">年度</h4> <h4 class="txt-5002024 plans-ul-t-item-h4">专业版</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">终身</h4> <h4 class="txt-5002024 plans-ul-t-item-h4">定制版</h4>
</li> </li>
<li class="plans-ul-t-item grid-4" style="padding: 32px 24px;"> <li class="plans-ul-t-item grid-4" style="padding: 32px 24px;">
<h4 class="txt-5001616 plans-ul-t-item-h4">定价</h4> <h4 class="txt-5001616 plans-ul-t-item-h4">定价</h4>
@ -295,16 +309,7 @@
<i class="txt-5001628 price-card-unit">/月</i> <i class="txt-5001628 price-card-unit">/月</i>
</div> </div>
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">开始使用</button> </a> <a href="https://github.com/kuaifan/dootask/tree/pro" target="_blank"> <button class="btn btn-primary">开始使用</button> </a>
</span>
</div>
<div class="plans-ul-t-item-h4">
<div class="price-card-money mb-24">
<h2 class="txt-6003645 price-card-h2">¥3,000</h2>
<i class="txt-5001628 price-card-unit">/年</i>
</div>
<span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">开始使用</button> </a>
</span> </span>
</div> </div>
<div class="plans-ul-t-item-h4"> <div class="plans-ul-t-item-h4">
@ -312,7 +317,15 @@
<h2 class="txt-6003645 price-card-h2">¥18,888</h2> <h2 class="txt-6003645 price-card-h2">¥18,888</h2>
</div> </div>
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">开始使用</button> </a> <button class="btn btn-primary" onclick="showBox('联系我们')">联系我们</button>
</span>
</div>
<div class="plans-ul-t-item-h4">
<div class="price-card-money mb-24">
<h2 class="txt-6003645 price-card-h2">定制</h2>
</div>
<span class="plans-ul-b-item-btn">
<button class="btn btn-primary" onclick="showBox('定制咨询')">定制咨询</button>
</span> </span>
</div> </div>
</li> </li>
@ -418,12 +431,12 @@
</div> </div>
<div class="plans-ul-t-item-h4"> <div class="plans-ul-t-item-h4">
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">开始使用</button> </a> <button class="btn btn-primary" onclick="showBox('联系我们')">联系我们</button>
</span> </span>
</div> </div>
<div class="plans-ul-t-item-h4"> <div class="plans-ul-t-item-h4">
<span class="plans-ul-b-item-btn"> <span class="plans-ul-b-item-btn">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <button class="btn btn-primary">开始使用</button></a> <button class="btn btn-primary" onclick="showBox('定制咨询')">定制咨询</button>
</span> </span>
</div> </div>
</li> </li>
@ -753,5 +766,17 @@
}) })
timerId = null; // 执行完后将定时器置空 timerId = null; // 执行完后将定时器置空
}, 1200); }, 1200);
// 联系我们和定制咨询弹框
function showBox(text){
const box = document.querySelector('.BulletBox1')
box.style.display = 'block'
const name = document.querySelector('.BulletBox1Name')
name.innerHTML = text
}
document.querySelector('.BulletBox1Btn').addEventListener('click',function(){
console.log("aaaaa");
const box = document.querySelector('.BulletBox1')
box.style.display = 'none'
})
</script> </script>
</html> </html>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i> <i class="line-1"></i>
<span class="get-started"> <span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank"> <a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button> <button class="btn btn-primary" >立即体验</button>
</a> </a>
</span> </span>
</div> </div>