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);
}
.get-started{
width: 123px;
display: inline-block;
}
.login-btn{

View File

@ -1,158 +1,189 @@
/* 头部样式 */
.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);
}
.help{
position: relative;
margin: 56px 0 96px 0;
padding-top: 80px;
.help {
position: relative;
margin: 56px 0 96px 0;
padding-top: 80px;
}
.help-con{
width: 100%;
max-width: 1280px;
margin: 0 auto;
.help-con {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.help-layout{
display: flex;
align-items: flex-start;
.help-layout {
display: flex;
align-items: flex-start;
}
.help-l{
padding: 24px;
background: var(--bg-fa-color);
border-radius: 8px;
margin-right: 32px;
height: 95%;
.help-l {
display: none;
padding: 24px;
background: var(--bg-fa-color);
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;
overflow: auto;
height: 82vh;
.help-l-ul {
width: 240px;
overflow: auto;
height: 82vh;
}
.l-ul-item{
padding: 9px 16px;
cursor: pointer;
height: 22px;
.l-ul-item {
padding: 9px 16px;
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);
border-radius: 8px;
.l-ul-item.active {
background-color: var(--bg-hover-color);
border-radius: 8px;
}
.l-ul-item:hover{
background: var(--bg-hover-color);
border-radius: 8px;
.l-ul-item:hover {
background: 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);
}
.help-r{
border-left: 1px solid var(--border-color);
padding-left: 32px;
position: relative;
.help-r {
padding-left: 32px;
position: relative;
}
.help-r::-webkit-scrollbar{
width: 0 !important
.help-r::-webkit-scrollbar {
width: 0 !important
}
.help-pic1{
position: relative;
padding-left: 34px;
width: auto;
height: 240px;
background: var(--txt-theme-color);
border-radius: 8px;
display: flex;
align-items: center;
overflow: hidden;
.help-pic1 {
position: relative;
padding-left: 34px;
width: auto;
height: 240px;
background: var(--txt-theme-color);
border-radius: 8px;
display: flex;
align-items: center;
overflow: hidden;
}
#help-pic1-svg{
height: 100%;
position: absolute;
top: 0;
right: 0;
#help-pic1-svg {
height: 100%;
position: absolute;
top: 0;
right: 0;
}
.help-pic1-tips{
max-width: 360px;
.help-pic1-tips {
max-width: 360px;
}
.help-pic1-tips-h2{
color: #fff;
margin-bottom: 16px;
.help-pic1-tips-h2 {
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;
height: 316px;
.r-ul-item-pic1 {
display: block;
height: 316px;
}
.r-ul-item-pic2{
display: block;
height: 418px;
.r-ul-item-pic2 {
display: block;
height: 418px;
}
.dots{
background: url(../img/dots.svg) no-repeat;
width: 4px;
height: 4px;
display: block;
position: absolute;
left: 10px;
top: 10px;
.dots {
background: url(../img/dots.svg) no-repeat;
width: 4px;
height: 4px;
display: block;
position: absolute;
left: 10px;
top: 10px;
}
.help-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;
.help-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;
}
.help-t-prev{
display: inline-block;
width: 14px;
margin-right: 8px;
.help-t-prev {
display: inline-block;
width: 14px;
margin-right: 8px;
}
.help-t-tit{
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: var(--txt-theme-color);
.help-t-tit {
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: var(--txt-theme-color);
}
.help-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;
.help-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-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{
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>
<span class="get-started">
<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>
</span>
</div>
@ -262,12 +262,12 @@
<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>
<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">
<h6 class="footer-t-contact-h6">13471168831</h6>
<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">0771-3164099</h6>
</div>
<div class="footer-t-contact">
<img class="footer-t-contact-icon mr-12" src="../img/about_icon2.svg" alt="E-mail,hitosea@gmail.com">
<h6 class="footer-t-contact-h6">hitosea@gmail.com</h6>
<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">service@hitosea.com</h6>
</div>
</div>
<form class="from">

View File

@ -76,7 +76,7 @@
<i class="line-1"></i>
<span class="get-started">
<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>
</span>
</div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i>
<span class="get-started">
<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>
</span>
</div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i>
<span class="get-started">
<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>
</span>
</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>
<div class="topics-btn flex-cc">
<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>
</a>
</span>
@ -418,7 +418,7 @@
<h1 class="collaboration-txt txt-5002835 mb-32">Turn on your DooTask team collaboration</h1>
<div style="display: flex;">
<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>
</a>
</span>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i>
<span class="get-started">
<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>
</span>
</div>

View File

@ -13,6 +13,20 @@
<link rel="stylesheet" href="../css/price.css">
</head>
<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">
<!-- 页头区域 -->
<header class="head price">
@ -76,7 +90,7 @@
<i class="line-1"></i>
<span class="get-started">
<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>
</span>
</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>
<ul class="price-card">
<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">
<h2 class="txt-6003645 price-card-h2">¥0</h2>
<i class="txt-5001628 price-card-unit">/month</i>
</div>
<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>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">No limit to the number of people</h6>
<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">
<li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment">
@ -109,13 +123,13 @@
</ol>
</li>
<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">
<h2 class="txt-6003645 price-card-h2">¥3,000</h2>
<i class="txt-5001628 price-card-unit">/year</i>
<h2 class="txt-6003645 price-card-h2">¥0</h2>
<i class="txt-5001628 price-card-unit">/month</i>
</div>
<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>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">Up to 3 persons</h6>
<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">
<li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment">
@ -132,12 +146,12 @@
</ol>
</li>
<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">
<h2 class="txt-6003645 price-card-h2">¥18,888</h2>
</div>
<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">
<li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment">
@ -162,12 +176,12 @@
</ol>
</li>
<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">
<h2 class="txt-6003645 price-card-h2">Custom</h2>
</div>
<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">
<li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="Support for private deployment">
@ -283,9 +297,9 @@
<ul class="plans-ul-t">
<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">Free</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">Annual</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">Lifetime</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">Professional Edition</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">Professional Edition</h4>
<h4 class="txt-5002024 plans-ul-t-item-h4">customised version</h4>
</li>
<li class="plans-ul-t-item grid-4" style="padding: 32px 24px;">
<h4 class="txt-5001616 plans-ul-t-item-h4">Pricing</h4>
@ -295,16 +309,7 @@
<i class="txt-5001628 price-card-unit">/month</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>
</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>
<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">
@ -312,7 +317,15 @@
<h2 class="txt-6003645 price-card-h2">¥18,888</h2>
</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>
<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>
</div>
</li>
@ -413,17 +426,17 @@
<h4 class="plans-ul-t-item-h4"></h4>
<div class="plans-ul-t-item-h4">
<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">
<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">
<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>
</div>
</li>
@ -754,5 +767,17 @@
})
timerId = null; // 执行完后将定时器置空
}, 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>
</html>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i>
<span class="get-started">
<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>
</span>
</div>

View File

@ -76,7 +76,7 @@
<i class="line-1"></i>
<span class="get-started">
<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>
</span>
</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -13,6 +13,20 @@
<link rel="stylesheet" href="../css/price.css">
</head>
<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">
<!-- 页头区域 -->
<header class="head price">
@ -76,7 +90,7 @@
<i class="line-1"></i>
<span class="get-started">
<a href="https://www.dootask.com/manage/dashboard" target="_blank">
<button class="btn btn-primary" >开始使用</button>
<button class="btn btn-primary" >立即体验</button>
</a>
</span>
</div>
@ -94,13 +108,13 @@
<h4 class="txt-4001830 topics-h4 mb-64">根据你的企业的规模和需求,有不同的版本可供选择</h4>
<ul class="price-card">
<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">
<h2 class="txt-6003645 price-card-h2">¥0</h2>
<i class="txt-5001628 price-card-unit">/月</i>
</div>
<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>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">数无限制</h6>
<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">
<li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署">
@ -109,13 +123,13 @@
</ol>
</li>
<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">
<h2 class="txt-6003645 price-card-h2">¥3,000</h2>
<i class="txt-5001628 price-card-unit">/</i>
<h2 class="txt-6003645 price-card-h2">¥0</h2>
<i class="txt-5001628 price-card-unit">/</i>
</div>
<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>
<h6 class="txt-4001624 price-card-h6 mb-24" style="height: 48px;">最多3</h6>
<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">
<li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署">
@ -132,12 +146,12 @@
</ol>
</li>
<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">
<h2 class="txt-6003645 price-card-h2">¥18,888</h2>
</div>
<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">
<li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署">
@ -167,7 +181,7 @@
<h2 class="txt-6003645 price-card-h2">定制</h2>
</div>
<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">
<li class="price-card-ol-item mb-12">
<img class="icon mr-12" src="../img/price_icon1.svg" alt="支持私有化部署">
@ -283,9 +297,9 @@
<ul class="plans-ul-t">
<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>
</li>
<li class="plans-ul-t-item grid-4" style="padding: 32px 24px;">
<h4 class="txt-5001616 plans-ul-t-item-h4">定价</h4>
@ -295,16 +309,7 @@
<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>
</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>
<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">
@ -312,7 +317,15 @@
<h2 class="txt-6003645 price-card-h2">¥18,888</h2>
</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>
<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>
</div>
</li>
@ -418,12 +431,12 @@
</div>
<div class="plans-ul-t-item-h4">
<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">
<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>
</li>
@ -753,5 +766,17 @@
})
timerId = null; // 执行完后将定时器置空
}, 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>
</html>

View File

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

View File

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