Tenlion/copyright-official-website
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

APP电子软著页面实现

Browse Source
This commit is contained in:
zhangyong 2025-05-16 18:28:16 +08:00
parent 31539aeb77
commit b746c3f05c
8 changed files with 412 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/img/as-bottom1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
public/assets/img/as-bottom2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
public/assets/img/as-box1img.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
public/assets/img/as-tdbj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/assets/img/as-tdtp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 385 KiB

BIN
public/assets/img/as-topbj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 371 KiB

BIN
public/assets/img/as-yh.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 415 B

445
src/components/AppDZSoftware.vue
View File

@ -1,25 +1,99 @@
<template>
<div class="appdz-software">
<div class="box-top">
<div class="top-content">
<div class="title">
<h4>电子版权认证联合服务平台</h4>
<p>基于区块链技术提供电子版权认证服务</p>
<p>为APP上架应用市场提供有效的版权证明</p>
<p><i></i>基于区块链技术提供电子版权认证服务</p>
<p><i></i>为APP上架应用市场提供有效的版权证明</p>
</div>
<div class="right-box">
<img src="/assets/img/as-tdtp.png" alt="" class="floatimg">
</div>
</div>
</div>
<div class="box-bottom">
<div class="box">
<div class="box1">
<a href="https://www.aimzhu.com/operator/">查看详情</a>
</div>
<div class="box2">
<div class="left">
<img src="/assets/img/zhengshu.png" alt="">
<div class="shadow"></div>
</div>
<div class="right">
<h3>什么是APP软著认证电子版权？</h3>
<ul>
<li>App软著认证电子版权主要用于APP上架,可以大大缩短了认证时间,能够让您的APP更快地通过审核并上架应用商店,抢占市场先机。</li>
<li>App办理软著认证电子版权,可无需获得软件著作权登记证书。</li>
<li>在华为、应用宝、小米、OPPO、VIVO、阿里、360、百度、荣耀、穿山甲等 App应用市场,App软著认证电子版权都可作为 App上架时的有效版权证明。</li>
</ul>
<span>
<a href="#">立即申请<i>→</i></a>
<a href="#">联系客服<i>→</i></a>
</span>
</div>
</div>
<div class="box3">
<h3>下证时间及价格</h3>
<ul>
<li>
<span>10工作日</span>
<div class="price">
<p>￥<em>500</em>元/件</p>
</div>
</li>
<li>
<span>3工作日</span>
<div class="price">
<p>￥<em>900</em>元/件</p>
</div>
</li>
<li>
<span>1工作日</span>
<div class="price">
<p>￥<em>2599</em>元/件</p>
</div>
</li>
<li>
<span>当天下证</span>
<div class="price">
<p>￥<em>3699</em>元/件</p>
</div>
</li>
</ul>
<div class="clause">
<h5>延迟履约保障条款：</h5>
<div class="content">
<p>1.若未按约定时间交付,每延迟1天,按订单金额的10%向您退还费用;</p>
<p>2.若延迟达到 3天,除全额退还订单费用外,我方承诺无条件完成相关证书办理并交付。</p>
</div>
</div>
</div>
</div>
<div class="box-bottom">
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="hzhb">
<h5>合作伙伴</h5>
<div class="scroll-container">
<!-- 第一行：向左滚动 -->
<div class="scroll-row row1">
<img src="/assets/img/as-bottom1.png" alt="合作伙伴" class="scroll-img">
<img src="/assets/img/as-bottom1.png" alt="合作伙伴" class="scroll-img">
</div>
<!-- 第二行：向右滚动 -->
<div class="scroll-row row2">
<img src="/assets/img/as-bottom2.png" alt="合作伙伴" class="scroll-img">
<img src="/assets/img/as-bottom2.png" alt="合作伙伴" class="scroll-img">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
@ -34,72 +108,377 @@ export default {
position: relative;
}
.appdz-software .box-top {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
height: 7.5625rem;
background: url(/assets/img/zhengshu-bj.png) no-repeat;
height: 5rem;
background: url(/assets/img/as-topbj.png) no-repeat;
background-size: cover;
}
.appdz-software .box-top .title {
.appdz-software .box-top .top-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
display: flex;
flex-direction: row;
width: 14rem;
height: 3rem;
}
.appdz-software .box-top .top-content .title {
display: flex;
flex-direction: column;
justify-content: center;
width: 12.5rem;
height: 1.875rem;
margin: 0 auto;
width: 7rem;
height: 100%;
/* margin: 0 auto; */
/* border: 2px solid red; */
}
.appdz-software .box-top h4 {
.appdz-software .box-top .top-content h4 {
width: 6.25rem;
font-size: .375rem;
font-weight: 700;
color: #74491a;
margin-bottom: .125rem;
}
.appdz-software .box-top p {
.appdz-software .box-top .top-content p {
display: flex;
width: 6.25rem;
height: .375rem;
line-height: .375rem;
font-size: .2rem;
letter-spacing: .0125rem;
color: #9a7148;
margin-bottom: 0.1rem;
}
.appdz-software .box-top .top-content p i {
display: block;
width: .2rem;
height: .2rem;
margin: .1rem;
border-radius: .1rem;
background-color: #f2f2f2;
background: url(/assets/img/as-yh.png) no-repeat;
background-size: cover;
}
.appdz-software .box-top .top-content .right-box {
position: relative;
display: block;
width: 7rem;
height: 3.1rem;
background: url(/assets/img/as-tdbj.png) no-repeat;
background-size: contain;
}
.appdz-software .box-top .top-content .right-box .floatimg {
position: absolute;
width: 3.7rem;
height: 2.4rem;
margin: 0.6rem 1.65rem 0 1.65rem;
animation: floatJump 2s ease-in-out infinite alternate;
}
@keyframes floatJump {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-.2rem);
}
}
.appdz-software .box-bottom {
position: relative;
display: flex;
justify-content: center;
width: 100%;
height: 13rem;
background-color: #f5f5f5;
height: 16rem;
background-color: #ffffff;
}
.appdz-software .box-bottom .box {
/* position: absolute; */
position: relative;
top: -2.5rem;
position: absolute;
top: -0.7rem;
bottom: .625rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 12.5rem;
height: 13rem;
background-color: #FFF;
padding: .5rem;
-webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
justify-content: start;
width: 15rem;
height: 11.7rem;
/* border: 1px solid red; */
/* background-color: #FFF; */
/* padding: .5rem; */
/* -webkit-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
-moz-box-shadow: 0 0 .125rem rgba(0,0,0,.1);
box-shadow: 0 0 .125rem rgba(0,0,0,.1);
box-shadow: 0 0 .125rem rgba(0,0,0,.1); */
}
.appdz-software .box-bottom .box .box1 {
position: relative;
width: 100%;
height: 3rem;
background-color: pink;
height: 2rem;
background: url(/assets/img/as-box1img.png) no-repeat;
background-size: contain;
margin-bottom: .3rem;
}
.appdz-software .box-bottom .box .box1 a {
position: absolute;
top: .875rem;
right: .4rem;
padding: .1rem .3rem;
border: 1px solid #d35330;
border-radius: .4rem;
color: #d35330;
}
.appdz-software .box-bottom .box .box1 a:hover {
opacity: 0.8;
}
.appdz-software .box-bottom .box .box2 {
display: flex;
width: 100%;
height: 3rem;
background-color: pink;
height: 4.5rem;
/* background-color: pink; */
margin-bottom: .3rem;
}
.appdz-software .box-bottom .box .box2 .left {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 3rem;
height: 4.5rem;
margin: 0 .3rem;
}
.appdz-software .box-bottom .box .box2 .left img {
width: 2.8rem;
height: 3.8rem;
}
.appdz-software .box-bottom .box .box2 .left .shadow {
width: 2.8rem;
height: .4rem;
background-color: #e6e6e6;
border-radius: 50%;
}
.appdz-software .box-bottom .box .box2 .right {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 11.2rem;
height: 4.5rem;
margin-left: .2rem;
/* background-color: skyblue; */
}
.appdz-software .box-bottom .box .box2 .right h3 {
width: 100%;
height: .6rem;
font-size: 26px;
color: #5f3712;
}
.appdz-software .box-bottom .box .box2 .right ul li {
width: 100%;
height: .8rem;
font-size: 17px;
}
.appdz-software .box-bottom .box .box2 .right span {
display: flex;
width: 100%;
height: .8rem;
}
.appdz-software .box-bottom .box .box2 .right span a {
display: flex;
align-content: center;
height: .4rem;
line-height: .4rem;
font-size: 17px;
color: #2971e1;
margin-right: .4rem;
}
.appdz-software .box-bottom .box .box2 .right span a i {
display: inline-block;
width: .3rem;
font-size: 17px;
font-weight: 700;
margin-left: .05rem;
}
.appdz-software .box-bottom .box .box3 {
width: 100%;
height: 3rem;
background-color: pink;
height: 4.6rem;
/* background-color: pink; */
}
.appdz-software .box-bottom .box .box3 h3 {
width: 100%;
height: .8rem;
line-height: .8rem;
text-align: center;
font-size: 26px;
color: #5f3712;
}
.appdz-software .box-bottom .box .box3 ul {
display: flex;
justify-content: space-between;
width: 14.4rem;
margin: 0 .3rem;
}
.appdz-software .box-bottom .box .box3 ul li {
width: 3.3rem;
height: 2rem;
padding: 0 0.4rem;
background-color: #f2f2f2;
}
.appdz-software .box-bottom .box .box3 ul li span {
display: block;
width: 2.5rem;
height: .6rem;
line-height: .6rem;
text-align: center;
font-size: 18px;
font-weight: 700;
background-color: #2e1f00;
color: #FFF;
border-bottom-left-radius: .08rem;
border-bottom-right-radius: .08rem;
}
.appdz-software .box-bottom .box .box3 ul li .price {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
width: 2.5rem;
height: 1.4rem;
/* background-color: skyblue; */
}
.appdz-software .box-bottom .box .box3 ul li .price p {
display: flex;
width: 2.5rem;
height: .6rem;
justify-content: center;
align-items: flex-end;
font-size: .175rem;
color: #d35330;
}
.appdz-software .box-bottom .box .box3 ul li .price p em {
font-size: 0.4rem;
font-weight: 700;
display: block;
text-align: center;
line-height: normal;
padding-top: 0.3em;
padding-bottom: 0;
height: 100%;
margin: 0 .025rem;
}
.appdz-software .box-bottom .box .box3 .clause {
width: 100%;
padding: .3rem .35rem;
}
.appdz-software .box-bottom .box .box3 .clause h5 {
font-size: .2rem;
font-weight: 700;
}
.appdz-software .box-bottom .box .box3 .clause .content {
width: 100%;
margin-top: .15rem;
}
.appdz-software .box-bottom .box .box3 .clause .content p {
font-size: 0.1875rem;
height: .35rem;
line-height: .35rem;
}
.appdz-software .box-bottom .hzhb {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5rem;
background-color: #f6f6f8;
}
.appdz-software .box-bottom .hzhb h5 {
width: 100%;
height: 1rem;
line-height: 1rem;
font-size: 0.25rem;
text-align: center;
}
/* 新增滚动容器阴影样式 */
.scroll-container {
position: relative; /* 用于定位伪元素 */
width: 15rem;
height: 3rem;
overflow: hidden;
display: flex;
flex-direction: column;
margin: 0 auto;
}
/* 左侧阴影 */
.scroll-container:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1.5rem; /* 阴影宽度 */
height: 100%;
background: linear-gradient(to right, rgba(246, 246, 248, 0.9) 0%, transparent 100%);
pointer-events: none; /* 不影响交互 */
z-index: 1;
}
/* 右侧阴影 */
.scroll-container:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 1.5rem; /* 阴影宽度 */
height: 100%;
background: linear-gradient(to left, rgba(246, 246, 248,0.9) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.scroll-row {
display: flex;
width: 100%; /* 父容器宽度 */
flex: 1; /* 每行占50%高度 */
}
.row1, .row2 {
display: flex; /* 水平排列图片 */
width: 200%; /* 双倍宽度容纳两张图片 */
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.row1 {
animation-name: scrollLeft;
animation-duration: 45s;
}
.row2 {
animation-name: scrollRight;
animation-duration: 40s;
margin-top: 0; /* 第二行下移一个图片高度 */
}
/* 关键：使用实际图片宽度计算平移距离 */
@keyframes scrollLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-30.2875rem); } /* 第一行单图宽度 */
}
@keyframes scrollRight {
0% { transform: translateX(-22.6125rem); } /* 第二行单图宽度 */
100% { transform: translateX(0); }
}
.scroll-img {
flex-shrink: 0;
width: 30.2875rem; /* 第一行单图实际宽度 */
height: 1.3rem; /* 单图高度 */
object-fit: contain;
margin: 0 .2rem;
}
.row2 .scroll-img {
width: 22.6125rem; /* 第二行单图实际宽度 */
}
</style>