0914提交
This commit is contained in:
zhangyong
parent
3acb556f87
commit
db3f25690c
@ -109,7 +109,7 @@ export default {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 605px;
|
||||
height: 7.5625rem;
|
||||
background: url(/assets/img/aboutus-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -124,27 +124,27 @@ export default {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
width: 3.75rem;
|
||||
height: 1.875rem;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
.about-us .box-top h4 {
|
||||
font-size: 30px;
|
||||
font-size: .375rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.about-us .box-top span {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 5px;
|
||||
margin: 10px 0 10px 110px;
|
||||
width: 1rem;
|
||||
height: .0625rem;
|
||||
margin: .125rem 0 .125rem 1.375rem;
|
||||
background-color: #faa234;
|
||||
}
|
||||
.about-us .box-top p {
|
||||
font-size: 18px;
|
||||
letter-spacing: 5px;
|
||||
font-size: .225rem;
|
||||
letter-spacing: .0625rem;
|
||||
/* color: #9a7148; */
|
||||
}
|
||||
.about-us .box-bottom {
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
/* top: -100px; */
|
||||
width: 1000px;
|
||||
/* height: 520px; */
|
||||
padding: 50px;
|
||||
padding: .625rem;
|
||||
background-color: #FFF;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
@ -171,44 +171,44 @@ export default {
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
width: 900px;
|
||||
width: 11.25rem;
|
||||
/* height: 260px; */
|
||||
/* background-color: pink; */
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.content .content-left {
|
||||
width: 380px;
|
||||
height: 260px;
|
||||
margin-right: 40px;
|
||||
width: 4.75rem;
|
||||
height: 3.25rem;
|
||||
margin-right: .5rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.content .content-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 480px;
|
||||
width: 6rem;
|
||||
/* height: 260px; */
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.content-right i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: .375rem;
|
||||
height: .375rem;
|
||||
background: url(/assets/img/aboutus-syh.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.content-right h4 {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 28px;
|
||||
height: .6rem;
|
||||
line-height: .6rem;
|
||||
font-size: .35rem;
|
||||
}
|
||||
.content-right span {
|
||||
margin: 12px 0;
|
||||
font-size: 16px;
|
||||
margin: .15rem 0;
|
||||
font-size: .2rem;
|
||||
color: #faa332;
|
||||
}
|
||||
.content-right p {
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
font-weight: 300;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: .0125rem;
|
||||
}
|
||||
/* .dataList {
|
||||
display: flex;
|
||||
@ -258,17 +258,17 @@ export default {
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
background-color: #f1f1f1;
|
||||
margin-top: 20px;
|
||||
margin-top: .25rem;
|
||||
/* height: 120px; */
|
||||
}
|
||||
.content-left ul li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 180px;
|
||||
width: 2.25rem;
|
||||
/* margin-right: 60px;
|
||||
margin-bottom: 15px; */
|
||||
margin: 20px 20px 20px 0;
|
||||
margin: .25rem .25rem .25rem 0;
|
||||
/* background-color: pink; */
|
||||
/* align-content: center;
|
||||
flex-wrap: wrap; */
|
||||
@ -279,22 +279,22 @@ export default {
|
||||
.content-left ul li .row1 {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
height: 46px;
|
||||
height: .575rem;
|
||||
}
|
||||
.content-left ul li .row1 h4 {
|
||||
height: 46px;
|
||||
font-size: 30px;
|
||||
height: .575rem;
|
||||
font-size: .375rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.content-left ul li .row1 em {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
width: .225rem;
|
||||
height: .225rem;
|
||||
line-height: .225rem;
|
||||
text-align: center;
|
||||
border-radius: 9px;
|
||||
margin: 18px 0 0 -2px;
|
||||
border-radius: .1125rem;
|
||||
margin: .225rem 0 0 -0.025rem;
|
||||
background-color: #fcbb53;
|
||||
font-size: 12px;
|
||||
font-size: .15rem;
|
||||
color: #FFF;
|
||||
}
|
||||
.content-left ul li .row2 p {
|
||||
|
||||
222
src/components/Footer copy.vue
Normal file
222
src/components/Footer copy.vue
Normal file
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="box">
|
||||
<div class="box-top">
|
||||
<div class="box-left-logo">
|
||||
<!-- <a href="#"> -->
|
||||
<a href="https://www.aimzhu.com">
|
||||
<img src="/assets/img/footerlogo1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-right-content">
|
||||
<div class="box1">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link to="/KeFu">客服中心</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/HelpCenter">帮助中心</router-link>
|
||||
</li>
|
||||
<li><router-link to="/AboutUs">关于我们</router-link></li>
|
||||
<li><router-link to="/ProductsNews">产品动态</router-link></li>
|
||||
<!-- <li>联系我们</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<ul class="left">
|
||||
<!-- <li>
|
||||
联系我们
|
||||
</li> -->
|
||||
<li>
|
||||
<img src="/assets/img/1.png" alt="">
|
||||
400-086-1633
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/2.png" alt="">
|
||||
kefu@tenlion.com.cn
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="right">
|
||||
<li>
|
||||
<a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">服务协议</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">隐私条款</a>
|
||||
</li>
|
||||
<li><router-link to="/Report">举报</router-link></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="box-bottom">
|
||||
<span class="row1">
|
||||
<ul>
|
||||
<li>山西腾狮科技有限公司 版权所有</li>
|
||||
<li>晋ICP备14004820号</li>
|
||||
<li>晋公网安备 14010502050897号</li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.footer {
|
||||
/* position: relative;
|
||||
top: 80px; */
|
||||
/* position: absolute; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
height: 320px;
|
||||
background-color: #4a4e59;
|
||||
color: #FFF;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1200px;
|
||||
height: 280px;
|
||||
margin: 40px auto;
|
||||
padding: 5px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box-top {
|
||||
display: flex;
|
||||
height: 120px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box-top .box-left-logo {
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
/* margin-right: 15px; */
|
||||
/* margin: 27px 50px 27px 0; */
|
||||
margin: auto 40px;
|
||||
/* border: 1px solid red; */
|
||||
|
||||
}
|
||||
.box-top .box-right-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
/* border: 1px solid red; */
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
height: 40px;
|
||||
/* line-height: 40px; */
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box1 ul {
|
||||
display: flex;
|
||||
}
|
||||
.box1 ul li {
|
||||
margin-right: 80px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.box1 ul li a:link,
|
||||
.box1 ul li a:visited {
|
||||
color: #FFF;
|
||||
font-weight: 400;
|
||||
}
|
||||
.box1 ul li:first-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.box2 {
|
||||
display: flex;
|
||||
position: relative;
|
||||
/* flex-wrap: wrap;
|
||||
align-content: flex-end; */
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box2 .left {
|
||||
height: 70px;
|
||||
width: 240px;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box2 .left li {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 15px;
|
||||
/* margin-right: 50px; */
|
||||
}
|
||||
.box2 .left li:nth-child(1) {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.box2 .left li img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: auto 5px;
|
||||
}
|
||||
.box2 .right {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
/* display: flex; */
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 300px;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.box2 .right li {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.box2 .right li a {
|
||||
color: #FFF;
|
||||
}
|
||||
.box-bottom {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 50;
|
||||
margin-top: 25px;
|
||||
border-top: 1px solid #7a7d85;
|
||||
/* border-top: 1px solid #4b4e56; */
|
||||
|
||||
}
|
||||
.box-bottom .row1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* margin-top: 15px; */
|
||||
|
||||
}
|
||||
.box-bottom .row1 ul {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.box-bottom .row1 ul li {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -87,30 +87,30 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
height: 320px;
|
||||
height: 4rem;
|
||||
background-color: #4a4e59;
|
||||
color: #FFF;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1200px;
|
||||
height: 280px;
|
||||
margin: 40px auto;
|
||||
padding: 5px;
|
||||
width: 15rem;
|
||||
height: 3.5rem;
|
||||
margin: .5rem auto;
|
||||
padding: .0625rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box-top {
|
||||
display: flex;
|
||||
height: 120px;
|
||||
height: 1.5rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box-top .box-left-logo {
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
width: 3.25rem;
|
||||
height: .575rem;
|
||||
/* margin-right: 15px; */
|
||||
/* margin: 27px 50px 27px 0; */
|
||||
margin: auto 40px;
|
||||
margin: auto .5rem;
|
||||
/* border: 1px solid red; */
|
||||
|
||||
}
|
||||
@ -119,11 +119,11 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
/* border: 1px solid red; */
|
||||
margin-left: 20px;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
height: 40px;
|
||||
height: .5rem;
|
||||
/* line-height: 40px; */
|
||||
/* background-color: pink; */
|
||||
}
|
||||
@ -131,10 +131,10 @@ export default {
|
||||
display: flex;
|
||||
}
|
||||
.box1 ul li {
|
||||
margin-right: 80px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 15px;
|
||||
margin-right: 1rem;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
font-size: .1875rem;
|
||||
}
|
||||
.box1 ul li a:link,
|
||||
.box1 ul li a:visited {
|
||||
@ -142,7 +142,7 @@ export default {
|
||||
font-weight: 400;
|
||||
}
|
||||
.box1 ul li:first-child {
|
||||
margin-left: 5px;
|
||||
margin-left: .0625rem;
|
||||
}
|
||||
.box2 {
|
||||
display: flex;
|
||||
@ -152,26 +152,26 @@ export default {
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box2 .left {
|
||||
height: 70px;
|
||||
width: 240px;
|
||||
height: .875rem;
|
||||
width: 3rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box2 .left li {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 15px;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
font-size: .1875rem;
|
||||
/* margin-right: 50px; */
|
||||
}
|
||||
.box2 .left li:nth-child(1) {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 5px;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
padding-left: .0625rem;
|
||||
}
|
||||
|
||||
.box2 .left li img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: auto 5px;
|
||||
width: .2rem;
|
||||
height: .2rem;
|
||||
margin: auto .0625rem;
|
||||
}
|
||||
.box2 .right {
|
||||
position: absolute;
|
||||
@ -179,27 +179,27 @@ export default {
|
||||
right: 0;
|
||||
/* display: flex; */
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 300px;
|
||||
height: .375rem;
|
||||
width: 3.75rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.box2 .right li {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 30px;
|
||||
font-size: 15px;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
margin-right: .375rem;
|
||||
font-size: .1875rem;
|
||||
}
|
||||
.box2 .right li a {
|
||||
color: #FFF;
|
||||
}
|
||||
.box-bottom {
|
||||
height: 60px;
|
||||
height: .75rem;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-size: .175rem;
|
||||
font-weight: 50;
|
||||
margin-top: 25px;
|
||||
border-top: 1px solid #7a7d85;
|
||||
margin-top: .3125rem;
|
||||
border-top: .0125rem solid #7a7d85;
|
||||
/* border-top: 1px solid #4b4e56; */
|
||||
|
||||
}
|
||||
@ -214,9 +214,9 @@ export default {
|
||||
|
||||
}
|
||||
.box-bottom .row1 ul li {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin-right: 40px;
|
||||
height: .75rem;
|
||||
line-height: .75rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
281
src/components/HeaderNav copy.vue
Normal file
281
src/components/HeaderNav copy.vue
Normal file
@ -0,0 +1,281 @@
|
||||
<template>
|
||||
|
||||
<div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }">
|
||||
<div class="box">
|
||||
<a href="https://www.aimzhu.com" @click="gotoHomePage">
|
||||
<img :src="logoSrc" alt="首页logo">
|
||||
</a>
|
||||
<!-- <router-link to="/HomePage" @click="gotoHomePage">
|
||||
<img :src="logoSrc" alt="首页logo">
|
||||
</router-link> -->
|
||||
<div class="nav router-container" :class="routerColor">
|
||||
<ul>
|
||||
|
||||
<li><router-link to="/HomePage" replace @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
|
||||
<li><router-link to="/ShouFei" @click="activate" :class="{ active: $route.path === '/ShouFei' }">收费介绍</router-link></li>
|
||||
<li><router-link to="/KeFu" @click="activate" :class="{ active: $route.path === '/KeFu' }">客服中心</router-link></li>
|
||||
<li><router-link to="/ZhengShu" @click="activate" :class="{ active: $route.path === '/ZhengShu' }">证书展示</router-link></li>
|
||||
<!-- <li><router-link to="/DaiLiShang" @click="activate" :class="{ active: $route.path === '/DaiLiShang' }">代理商展示</router-link></li> -->
|
||||
<!-- <li><router-link to="/TransactionCenter" @click="activate" :class="{ active: $route.path === '/TransactionCenter' }">交易中心</router-link></li> -->
|
||||
<li><router-link to="/HelpCenter" @click="activate" :class="{ active: $route.path === '/HelpCenter' }">帮助中心</router-link></li>
|
||||
<!-- <li><router-link to="/AboutUs" @click="aa()" class="acss">关于我们</router-link></li> -->
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
|
||||
<a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
|
||||
</div>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// logoSrc: '/src/assets/img/headicon1.png',
|
||||
logoSrc: '/assets/img/headicon1.png',
|
||||
isFixed: false,
|
||||
shouldReloadHomePage: false, // 添加标志，用于判断是否需要刷新首页
|
||||
// isHomePage: true, // 用于跟踪是否在首页
|
||||
// logoSrc: import('/assets/img/headicon1.png'), // 默认的logo图片
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
gotoHomePage() {
|
||||
this.$router.push('/HomePage');
|
||||
// window.location.reload(); // 刷新页面
|
||||
|
||||
},
|
||||
activateHomePage() {
|
||||
this.isFixed = false; // 重置为默认样式
|
||||
this.logoSrc = '/assets/img/headicon1.png';
|
||||
// his.shouldReloadHomePage = true; // 设置刷新标志
|
||||
// 如果当前不是在首页，则设置标志以刷新
|
||||
// if (this.$route.path !== '/HomePage') {
|
||||
// this.shouldRefreshHome = true; // 设置刷新标志
|
||||
// }
|
||||
},
|
||||
// refreshHomePage() {
|
||||
// window.location.href = window.location.href
|
||||
// alert(11)
|
||||
// },
|
||||
activate() {
|
||||
this.isFixed = true; // 激活固定样式
|
||||
this.logoSrc = '/assets/img/headicon2.png';
|
||||
},
|
||||
handleScroll() {
|
||||
if (this.$route.path === '/HomePage') {
|
||||
this.isFixed = window.scrollY > 0; // 仅在首页路由时，滚动时更新样式
|
||||
// this.logoSrc = ('window.scrollY > 0' ? '/src/assets/img/headicon2.png': '/src/assets/img/headicon1.png')
|
||||
|
||||
if(window.scrollY > 0) {
|
||||
this.logoSrc = '/assets/img/headicon2.png';
|
||||
} else {
|
||||
this.logoSrc = '/assets/img/headicon1.png';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
|
||||
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
if (to.path !== '/HomePage') {
|
||||
this.activate(); // 点击非首页路由时激活固定样式
|
||||
|
||||
} else {
|
||||
this.activateHomePage(); // 点击首页路由时重置为默认样式
|
||||
|
||||
}
|
||||
},
|
||||
// $route(to, from) {
|
||||
// // 当路由跳转到首页且设置了刷新标志时，刷新页面
|
||||
// if (to.path === '/HomePage' && this.shouldRefreshHome) {
|
||||
// this.activateHomePage(); // 点击首页路由时重置为默认样式
|
||||
// window.location.reload(); // 刷新页面
|
||||
// this.shouldRefreshHome = false; // 重置刷新标志
|
||||
// } else {
|
||||
// this.activate(); // 点击非首页路由时激活固定样式
|
||||
// }
|
||||
// }
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
navClass() {
|
||||
return {
|
||||
'fixed-nav': this.isFixed || this.$route.path === '/HomePage',
|
||||
};
|
||||
},
|
||||
loginClass() {
|
||||
return {
|
||||
'border-login': this.isFixed,
|
||||
'line-height-login': this.isFixed,
|
||||
};
|
||||
},
|
||||
routerColor() {
|
||||
return {
|
||||
'active-color': this.$route.path === '/HomePage',
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.border-login {
|
||||
border: 0.75px solid #42210B;
|
||||
}
|
||||
.line-height-login {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.activeHomePage {
|
||||
color: #333;
|
||||
}
|
||||
.active {
|
||||
color: #F7931E;
|
||||
font-weight: 700;
|
||||
}
|
||||
.active1 {
|
||||
position: fixed;
|
||||
/* top: 0; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin: 0 auto ;
|
||||
background-color: #fff;
|
||||
transition: all .5s ease-in-out;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
|
||||
z-index: 9999999;
|
||||
|
||||
}
|
||||
.active2 {
|
||||
border: 2px solid #42210B;
|
||||
}
|
||||
.header-nav {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
margin: 0 auto ;
|
||||
background-color: transparent;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.fixed-nav {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
transition: all 0 ease-in-out;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
|
||||
}
|
||||
.header-nav .box {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
/* width: 1500px; */
|
||||
width: 1500px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
/* .header-nav h2 {
|
||||
font-size: 36px;
|
||||
margin: auto 20px auto 50px;
|
||||
}
|
||||
.header-nav p {
|
||||
font-size: 14px;
|
||||
margin: auto 0;
|
||||
height: 20px;
|
||||
width: 180px;
|
||||
padding: 0 15px;
|
||||
border-left: 2px solid #dedede;
|
||||
} */
|
||||
.header-nav a {
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
margin-left: 50px;
|
||||
margin-top: 17px;
|
||||
/* border: 1px solid blue; */
|
||||
}
|
||||
.header-nav .nav {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
/* border: 1px solid blue; */
|
||||
}
|
||||
.header-nav .nav ul {
|
||||
display: flex;
|
||||
}
|
||||
.header-nav .nav ul li {
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
font-size: 15px;
|
||||
/* letter-spacing: 3px; */
|
||||
color: #42210B;
|
||||
/* color: #FFF!; */
|
||||
}
|
||||
/* .header-nav .nav ul li a {
|
||||
color: #FFF;
|
||||
font-weight: 400;
|
||||
} */
|
||||
.header-nav .nav ul .router-link-active {
|
||||
color: #42210B!;
|
||||
/* color: #FFF; */
|
||||
}
|
||||
|
||||
.header-nav #login {
|
||||
width: 70px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
padding: auto;
|
||||
text-align: center;
|
||||
margin: auto 10px auto auto ;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background-color: rgba(255,255,255,.4);
|
||||
}
|
||||
#register {
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
margin: auto 30px auto 0 ;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background-color: #42210B;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#login:hover {
|
||||
background-color: #42210B;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
#register:hover {
|
||||
background-color: #332817;
|
||||
}
|
||||
a:hover {
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }">
|
||||
<div class="box">
|
||||
<a href="https://www.aimzhu.com" @click="gotoHomePage">
|
||||
<a class="nav-icon" href="https://www.aimzhu.com" @click="gotoHomePage">
|
||||
<img :src="logoSrc" alt="首页logo">
|
||||
</a>
|
||||
<!-- <router-link to="/HomePage" @click="gotoHomePage">
|
||||
@ -23,8 +23,11 @@
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
|
||||
<a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
|
||||
<div class="login-register">
|
||||
<a id="login" href="https://www.aimzhu.com/operator/" :class="loginClass">登录</a>
|
||||
<a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
@ -143,10 +146,10 @@ export default {
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.border-login {
|
||||
border: 0.75px solid #42210B;
|
||||
border: .0094rem solid #42210B;
|
||||
}
|
||||
.line-height-login {
|
||||
line-height: 24px;
|
||||
line-height: .3rem;
|
||||
}
|
||||
|
||||
.activeHomePage {
|
||||
@ -162,23 +165,23 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 1rem;
|
||||
margin: 0 auto ;
|
||||
background-color: #fff;
|
||||
transition: all .5s ease-in-out;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
|
||||
box-shadow: 0 .025rem .15rem 0 rgba(0,60,103,.15);
|
||||
z-index: 9999999;
|
||||
|
||||
}
|
||||
.active2 {
|
||||
border: 2px solid #42210B;
|
||||
border: .025rem solid #42210B;
|
||||
}
|
||||
.header-nav {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 1rem;
|
||||
margin: 0 auto ;
|
||||
background-color: transparent;
|
||||
z-index: 99999;
|
||||
@ -188,50 +191,58 @@ export default {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
transition: all 0 ease-in-out;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,60,103,.15);
|
||||
box-shadow: 0 .025rem .15rem 0 rgba(0,60,103,.15);
|
||||
}
|
||||
.header-nav .box {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 1500px;
|
||||
height: 80px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
/* width: 1500px; */
|
||||
/* width: 18.75rem; */
|
||||
height: 1rem;
|
||||
margin: 0 auto;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
/* .header-nav h2 {
|
||||
font-size: 36px;
|
||||
margin: auto 20px auto 50px;
|
||||
}
|
||||
.header-nav p {
|
||||
font-size: 14px;
|
||||
margin: auto 0;
|
||||
height: 20px;
|
||||
width: 180px;
|
||||
padding: 0 15px;
|
||||
border-left: 2px solid #dedede;
|
||||
} */
|
||||
.header-nav a {
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
margin-left: 50px;
|
||||
margin-top: 17px;
|
||||
|
||||
.header-nav .nav-icon {
|
||||
width: 3.25rem;
|
||||
height: .575rem;
|
||||
margin-left: .625rem;
|
||||
margin-top: .2125rem;
|
||||
/* border: 1px solid blue; */
|
||||
}
|
||||
.header-nav .nav {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
/* border: 1px solid blue; */
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
width: 8.4rem;
|
||||
}
|
||||
.header-nav .nav ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
.header-nav .nav ul li {
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
font-size: 15px;
|
||||
/* letter-spacing: 3px; */
|
||||
/* margin-right: .25rem;
|
||||
margin-left: .25rem; */
|
||||
/* width: 1rem; */
|
||||
/* padding: 0 0.2rem; */
|
||||
/* margin: 0 .5rem; */
|
||||
font-size: .1875rem;
|
||||
color: #42210B;
|
||||
/* color: #FFF!; */
|
||||
text-align: center;
|
||||
}
|
||||
/* .header-nav .nav ul li:first-child {
|
||||
margin-left: 0.1px;
|
||||
}
|
||||
.header-nav .nav ul li:last-child {
|
||||
margin-right: 0.1px;
|
||||
} */
|
||||
.header-nav .nav ul li a {
|
||||
width: 1rem;
|
||||
}
|
||||
/* .header-nav .nav ul li a {
|
||||
color: #FFF;
|
||||
@ -242,25 +253,30 @@ export default {
|
||||
/* color: #FFF; */
|
||||
}
|
||||
|
||||
.header-nav .login-register {
|
||||
display: flex;
|
||||
width: 3.5rem;
|
||||
height: 1rem;
|
||||
}
|
||||
.header-nav #login {
|
||||
width: 70px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
width: .875rem;
|
||||
height: .325rem;
|
||||
line-height: .3rem;
|
||||
padding: auto;
|
||||
text-align: center;
|
||||
margin: auto 10px auto auto ;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
margin: auto .125rem auto auto ;
|
||||
border-radius: .25rem;
|
||||
font-size: .175rem;
|
||||
background-color: rgba(255,255,255,.4);
|
||||
}
|
||||
#register {
|
||||
width: 100px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
width: 1.25rem;
|
||||
height: .325rem;
|
||||
line-height: .3rem;
|
||||
text-align: center;
|
||||
margin: auto 30px auto 0 ;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
margin: .3375rem .375rem;
|
||||
border-radius: .25rem;
|
||||
font-size: .175rem;
|
||||
background-color: #42210B;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
@ -376,7 +376,7 @@ export default {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 605px;
|
||||
height: 7.5625rem;
|
||||
background: url(/assets/img/helpcenter-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -385,23 +385,23 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 1000px;
|
||||
height: 150px;
|
||||
width: 12.5rem;
|
||||
height: 1.875rem;
|
||||
margin: 0 auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
|
||||
.help-center .box-top h4 {
|
||||
width: 500px;
|
||||
font-size: 30px;
|
||||
width: 6.25rem;
|
||||
font-size: .375rem;
|
||||
color: #74491a;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: .125rem;
|
||||
}
|
||||
|
||||
.help-center .box-top p {
|
||||
width: 500px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 5px;
|
||||
width: 6.25rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
|
||||
@ -418,9 +418,9 @@ export default {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: -200px;
|
||||
bottom: 50px;
|
||||
width: 1000px;
|
||||
top: -2.5rem;
|
||||
bottom: .625rem;
|
||||
width: 12.5rem;
|
||||
background-color: #FFF;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
@ -431,47 +431,47 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
margin: 25px;
|
||||
height: .75rem;
|
||||
line-height: .75rem;
|
||||
margin: .3125rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
.help-center .box-bottom .box .boxTitle h3 {
|
||||
display: flex;
|
||||
font-size: 24px;
|
||||
font-size: .3rem;
|
||||
color: #333;
|
||||
padding-left: 15px;
|
||||
padding-left: .1875rem;
|
||||
}
|
||||
|
||||
.help-center .box-bottom .box .boxTitle span {
|
||||
display: flex;
|
||||
height: 38px;
|
||||
height: .475rem;
|
||||
margin: auto 0;
|
||||
/* align-content: center; */
|
||||
}
|
||||
|
||||
.help-center .box-bottom .box .boxTitle span #txtInput {
|
||||
display: block;
|
||||
width: 380px;
|
||||
height: 38px;
|
||||
width: 4.75rem;
|
||||
height: .475rem;
|
||||
margin-top: 0;
|
||||
padding-left: 14px;
|
||||
font-size: 14px;
|
||||
padding-left: .175rem;
|
||||
font-size: .175rem;
|
||||
border: 0;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 3px 0 0 3px,
|
||||
box-shadow: 0 .0125rem .0625rem rgba(0, 0, 0, 0.15);
|
||||
border-radius: .0375rem 0 0 .0375rem,
|
||||
|
||||
}
|
||||
|
||||
.help-center .box-bottom .box .boxTitle span #search {
|
||||
display: block;
|
||||
width: 85px;
|
||||
height: 38px;
|
||||
width: 1.0625rem;
|
||||
height: .475rem;
|
||||
border: none;
|
||||
background-color: #febe54;
|
||||
font-size: 15px;
|
||||
letter-spacing: 2px;
|
||||
font-size: .1875rem;
|
||||
letter-spacing: .025rem;
|
||||
color: #FFF;
|
||||
}
|
||||
.help-center .box-bottom .box .boxTitle span #search:hover {
|
||||
@ -493,8 +493,8 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
.searchXS .dataList li {
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid #CCC;
|
||||
margin-bottom: .15rem;
|
||||
border-bottom: .0125rem solid #CCC;
|
||||
}
|
||||
.searchXS .dataList .list h4 {
|
||||
/* margin-bottom: 6px; */
|
||||
@ -506,7 +506,7 @@ export default {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.searchXS .dataList .list p {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: .15rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* position: relative; */
|
||||
@ -517,16 +517,16 @@ export default {
|
||||
}
|
||||
.searchXS .noData {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px solid #CCC;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
height: .5rem;
|
||||
border: .0125rem solid #CCC;
|
||||
line-height: .5rem;
|
||||
font-size: .2rem;
|
||||
color: #474747;
|
||||
padding-left: 10px;
|
||||
padding-left: .125rem;
|
||||
}
|
||||
.searchXS .dataList .pagin {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin-top: 20px;
|
||||
right: .125rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
</style>
|
||||
@ -172,10 +172,9 @@ export default {
|
||||
return {
|
||||
oneData: '',
|
||||
twoData: '',
|
||||
titles: ['生成真实系统 | 可下载安装包', '生成申报材料 | 提供一键导出', '价格明码标价 | 提供价格担保', '提供代理服务 | 也可自行申报'],
|
||||
titles: ['生成真实系统 | 可下载安装包', '提供材料撰写 | 提供一键导出', '不下证书就退款 | 免费补正也退款', '全托管包下证 | 也可自行申报'],
|
||||
intervalId: null,
|
||||
currentTitleIndex: 0,
|
||||
|
||||
currentStepIndex1: 0,
|
||||
currentStepIndex2: 0,
|
||||
currentStepIndex3: 0,
|
||||
@ -388,7 +387,7 @@ export default {
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
border: .0125rem solid rgba(0,0,0,.2);
|
||||
background-color: #FFF !important;
|
||||
}
|
||||
.home-page {
|
||||
@ -407,70 +406,69 @@ export default {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* position: absolute;
|
||||
left: 50%;
|
||||
top: 50%; */
|
||||
width: 900px;
|
||||
height: 300px;
|
||||
/* border: 2px solid red; */
|
||||
/* width: 900px;
|
||||
height: 300px; */
|
||||
width: 11.25rem;
|
||||
height: 3.75rem;
|
||||
margin: auto;
|
||||
/* margin: auto 300px; */
|
||||
|
||||
}
|
||||
|
||||
.home-page .box-top .headline h2 {
|
||||
font-size: 50px;
|
||||
/* font-size: 50px; */
|
||||
font-size: 0.625rem;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
}
|
||||
.home-page .box-top .headline #title-container {
|
||||
position: relative;
|
||||
height: 80px; /* 根据需要调整 */
|
||||
/* height: 80px; */
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
/* border: 1px solid blue; */
|
||||
}
|
||||
.home-page .box-top .headline .title {
|
||||
position: relative;
|
||||
top: 0;
|
||||
font-size: 50px;
|
||||
/* font-size: 50px; */
|
||||
font-size: 0.625rem;
|
||||
color: #FFF;
|
||||
width: 860px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin: auto 20px;
|
||||
padding: 0 10px;
|
||||
letter-spacing: 6px;
|
||||
/* width: 900px; */
|
||||
width: 11.25rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
letter-spacing: .075rem;
|
||||
text-align: center;
|
||||
/* border: 1px solid red; */
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
.home-page .box-top .headline p {
|
||||
font-size: 18px;
|
||||
font-size: .225rem;
|
||||
color: #FFF;
|
||||
/* margin: 5px auto; */
|
||||
margin: auto;
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: .025rem;
|
||||
}
|
||||
.home-page .box-top .headline p em {
|
||||
font-size: 30px;
|
||||
font-size: .375rem;
|
||||
}
|
||||
.home-page .box-top .headline .button-box {
|
||||
font-size: 26px;
|
||||
font-size: .325rem;
|
||||
/* margin: 20px auto; */
|
||||
margin: auto;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button {
|
||||
/* padding: 10px 45px; */
|
||||
height: 40px;
|
||||
width: 140px;
|
||||
margin-left: 20px;
|
||||
height: .5rem;
|
||||
width: 1.75rem;
|
||||
margin-left: .25rem;
|
||||
border: none;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button a {
|
||||
display: block;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: 1.75rem;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button:first-child {
|
||||
background-color: #39C7C1;
|
||||
@ -494,49 +492,48 @@ export default {
|
||||
/* 飘窗 */
|
||||
.float-window {
|
||||
position: fixed;
|
||||
/* width: 120px;
|
||||
height: 120px; */
|
||||
width: 171.25px;
|
||||
height: 214.25px;
|
||||
/* background-color: black; */
|
||||
/* width: 171.25px;
|
||||
height: 214.25px; */
|
||||
width: 2.1406rem;
|
||||
height: 2.6781rem;
|
||||
z-index: 99999999;
|
||||
}
|
||||
.home-page #sport_wrap {
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page #sport_wrap .deleteImg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: .2rem;
|
||||
height: .2rem;
|
||||
position:absolute;
|
||||
right: 12px;
|
||||
top: 9px;
|
||||
right: .15rem;
|
||||
top: .1125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page #sport_wrap .deleteImg .close {
|
||||
width:16px !important;
|
||||
height: 16px !important;
|
||||
width:.2rem !important;
|
||||
height: .2rem !important;
|
||||
}
|
||||
|
||||
.home-page .box-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 2100px;
|
||||
height: 26.25rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
.home-page .box-bottom .box1 {
|
||||
height: 450px;
|
||||
margin: 70px auto;
|
||||
height: 5.625rem;
|
||||
margin: .875rem auto;
|
||||
text-align: center;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box1 h4 {
|
||||
margin-top: 15px;
|
||||
font-size: 28px;
|
||||
margin-top: .1875rem;
|
||||
font-size: .35rem;
|
||||
}
|
||||
.home-page .box-bottom .box1 p {
|
||||
font-size: 14px;
|
||||
margin: 15px auto;
|
||||
font-size: .175rem;
|
||||
margin: .1875rem auto;
|
||||
color: #a2a2a2;
|
||||
}
|
||||
.home-page .box-bottom .box1 ul {
|
||||
@ -545,30 +542,30 @@ export default {
|
||||
.home-page .box-bottom .box1 ul li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 130px;
|
||||
margin: 40px 40px;
|
||||
width: 1.625rem;
|
||||
margin: 40px .5rem;
|
||||
/* padding: 0 30px; */
|
||||
}
|
||||
.home-page .box-bottom .box1 ul li img {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
width: 1.375rem;
|
||||
height: 1.375rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.home-page .box-bottom .box1 ul li em {
|
||||
font-size: 16px;
|
||||
margin: 20px auto 0px auto;
|
||||
font-size: .2rem;
|
||||
margin: .25rem auto 0rem auto;
|
||||
font-weight: 700;
|
||||
}
|
||||
.home-page .box-bottom .box1 ul li p {
|
||||
/* font-size: 14px; */
|
||||
line-height: 30px;
|
||||
line-height: .375rem;
|
||||
}
|
||||
/* 软著申请步骤--------------------------------------- */
|
||||
.home-page .box-bottom .box2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1500px;
|
||||
margin: 20px auto;
|
||||
height: 18.75rem;
|
||||
margin: .25rem auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .icon {
|
||||
@ -576,60 +573,59 @@ export default {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
bottom: .125rem;
|
||||
right: .125rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .location1{
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
top: 2rem;
|
||||
/* right: -150px; */
|
||||
right: 0;
|
||||
width: 270px;
|
||||
height: 330px;
|
||||
width: 3.375rem;
|
||||
height: 4.125rem;
|
||||
/* border: 2px solid red; */
|
||||
/* z-index: 100; */
|
||||
}
|
||||
.home-page .box-bottom .location2{
|
||||
position: absolute;
|
||||
top: 380px;
|
||||
top: 4.75rem;
|
||||
/* left: -180px; */
|
||||
left: 0;
|
||||
width: 240px;
|
||||
height: 320px;
|
||||
width: 3rem;
|
||||
height: 4rem;
|
||||
/* border: 2px solid red; */
|
||||
/* z-index: 100; */
|
||||
}
|
||||
.home-page .box-bottom .location3{
|
||||
position: absolute;
|
||||
top: 830px;
|
||||
top: 10.375rem;
|
||||
/* right: -150px; */
|
||||
right: 0;
|
||||
width: 270px;
|
||||
height: 330px;
|
||||
width: 3.375rem;
|
||||
height: 4.125rem;
|
||||
/* border: 2px solid red; */
|
||||
/* z-index: 100; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step {
|
||||
margin: 10px;
|
||||
margin: .125rem;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step h4 {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
padding: 20px 30px;
|
||||
padding: .25rem .375rem;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step .step_head_tab {
|
||||
/* position: fixed;
|
||||
backdrop-filter: blur(10px); */
|
||||
top: 90px;
|
||||
top: 1.125rem;
|
||||
left: 0;
|
||||
z-index: 9999999;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
height: .75rem;
|
||||
background-color: rgba(255,255,255,.6);
|
||||
}
|
||||
|
||||
@ -643,19 +639,19 @@ export default {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
width: 600px;
|
||||
height: 60px;
|
||||
width: 7.5rem;
|
||||
height: .75rem;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.home-page .box-bottom .box2 .step ul li {
|
||||
/* padding: 10px 35px; */
|
||||
width: 200px;
|
||||
height: 52px;
|
||||
line-height: 42px;
|
||||
width: 2.5rem;
|
||||
height: .65rem;
|
||||
line-height: .525rem;
|
||||
text-align: center;
|
||||
background-color: #FFF;
|
||||
border: 5px solid #f8fbfd;
|
||||
border: .0625rem solid #f8fbfd;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step ul li:nth-child(2) {
|
||||
@ -668,85 +664,85 @@ export default {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
width: 1100px;
|
||||
height: 380px;
|
||||
width: 13.75rem;
|
||||
height: 4.75rem;
|
||||
/* border: 2px solid red; */
|
||||
margin: 30px auto;
|
||||
margin: .375rem auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box {
|
||||
position: relative;
|
||||
width: 370px;
|
||||
height: 360px;
|
||||
margin: 10px;
|
||||
width: 4.625rem;
|
||||
height: 4.5rem;
|
||||
margin: .125rem;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
/* 步骤一二三上方题目 */
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
width: 2.25rem;
|
||||
height: 1.875rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 110px;
|
||||
height: 100px;
|
||||
width: 1.375rem;
|
||||
height: 1.25rem;
|
||||
background: url(/assets/img/step-top1.png) no-repeat;
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box p {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
left: .3125rem;
|
||||
bottom: 0;
|
||||
width: 60px;
|
||||
font-size: 22px;
|
||||
width: .75rem;
|
||||
font-size: .275rem;
|
||||
/* border: 1px solid blue; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box p em {
|
||||
font-size: 36px;
|
||||
font-size: .45rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 .title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
top: 1.25rem;
|
||||
width: 2.25rem;
|
||||
height: .625rem;
|
||||
text-align: center;
|
||||
/* border: 1px solid green; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 h4 {
|
||||
font-size: 28px;
|
||||
font-size: .35rem;
|
||||
font-weight: 700;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box ul li {
|
||||
display: flex;
|
||||
height: 42.5px;
|
||||
border-radius: 7px;
|
||||
margin: 8px;
|
||||
height: .5313rem;
|
||||
border-radius: .0875rem;
|
||||
margin: .1rem;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box ul .newStyle {
|
||||
border: 0.25px solid #B3B3B3;
|
||||
border: .0031rem solid #B3B3B3;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.home-page .box-bottom .box2 .step1 .left-box ul li img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto 10px;
|
||||
width: .3125rem;
|
||||
height: .3125rem;
|
||||
margin: auto .125rem;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box ul li p {
|
||||
font-size: 16px;
|
||||
margin: auto 5px;
|
||||
font-size: .2rem;
|
||||
margin: auto .0625rem;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .right-box {
|
||||
z-index: 999;
|
||||
width: 650px;
|
||||
height: 360px;
|
||||
margin: 10px 10px 10px auto;
|
||||
width: 8.125rem;
|
||||
height: 4.5rem;
|
||||
margin: .125rem .125rem .125rem auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
/* 步骤2----------------------------------------- */
|
||||
@ -754,167 +750,167 @@ export default {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
width: 1100px;
|
||||
height: 380px;
|
||||
width: 13.75rem;
|
||||
height: 4.75rem;
|
||||
/* border: 2px solid red; */
|
||||
margin: 30px auto;
|
||||
margin: .375rem auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .left-box {
|
||||
position: relative;
|
||||
width: 650px;
|
||||
height: 360px;
|
||||
margin: 10px auto 10px 10px;
|
||||
width: 8.125rem;
|
||||
height: 4.5rem;
|
||||
margin: .125rem auto .125rem .125rem;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step2 .right-box {
|
||||
position: relative;
|
||||
width: 370px;
|
||||
height: 360px;
|
||||
margin: 10px;
|
||||
width: 4.625rem;
|
||||
height: 4.5rem;
|
||||
margin: .125rem;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 {
|
||||
/* position: absolute; */
|
||||
right: 0;
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
width: 2.25rem;
|
||||
height: 1.875rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 110px;
|
||||
height: 100px;
|
||||
width: 1.375rem;
|
||||
height: 1.25rem;
|
||||
background: url(/assets/img/step-top2.png) no-repeat;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box p {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
right: .25rem;
|
||||
bottom: 0;
|
||||
width: 60px;
|
||||
font-size: 22px;
|
||||
width: .75rem;
|
||||
font-size: .275rem;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box p em {
|
||||
font-size: 36px;
|
||||
font-size: .45rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
top: 1.25rem;
|
||||
right: 0;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
width: 2.25rem;
|
||||
height: .625rem;
|
||||
text-align: center;
|
||||
/* border: 1px solid green; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .title h4 {
|
||||
font-size: 28px;
|
||||
font-size: .35rem;
|
||||
font-weight: 700;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step2 .right-box ul li {
|
||||
display: flex;
|
||||
height: 42.5px;
|
||||
border-radius: 7px;
|
||||
margin: 8px;
|
||||
height: .5313rem;
|
||||
border-radius: .0875rem;
|
||||
margin: .1rem;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box ul .newStyle {
|
||||
border: 0.25px solid #B3B3B3;
|
||||
border: .0031rem solid #B3B3B3;
|
||||
background-color: transparent;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box ul li img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto 10px;
|
||||
width: .3125rem;
|
||||
height: .3125rem;
|
||||
margin: auto .125rem;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box ul li p {
|
||||
font-size: 16px;
|
||||
margin: auto 5px;
|
||||
font-size: .2rem;
|
||||
margin: auto .0625rem;
|
||||
}
|
||||
/* 步骤3--------------------------------------- */
|
||||
.home-page .box-bottom .box2 .step3 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
width: 1100px;
|
||||
height: 380px;
|
||||
width: 13.75rem;
|
||||
height: 4.75rem;
|
||||
/* border: 2px solid red; */
|
||||
margin: 30px auto;
|
||||
margin: .375rem auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box {
|
||||
width: 370px;
|
||||
height: 360px;
|
||||
margin: 10px;
|
||||
width: 4.625rem;
|
||||
height: 4.5rem;
|
||||
margin: .125rem;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
width: 2.25rem;
|
||||
height: 1.875rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 110px;
|
||||
height: 100px;
|
||||
width: 1.375rem;
|
||||
height: 1.25rem;
|
||||
background: url(/assets/img/step-top3.png) no-repeat;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box p {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
left: .3125rem;
|
||||
bottom: 0;
|
||||
width: 60px;
|
||||
font-size: 22px;
|
||||
width: .75rem;
|
||||
font-size: .275rem;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box p em {
|
||||
font-size: 36px;
|
||||
font-size: .45rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
top: 1.25rem;
|
||||
width: 2.25rem;
|
||||
height: .625rem;
|
||||
text-align: center;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .title h4 {
|
||||
font-size: 28px;
|
||||
font-size: .35rem;
|
||||
font-weight: 700;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box ul li {
|
||||
display: flex;
|
||||
height: 42.5px;
|
||||
border-radius: 7px;
|
||||
margin: 8px;
|
||||
height: .5313rem;
|
||||
border-radius: .0875rem;
|
||||
margin: .1rem;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box ul .newStyle {
|
||||
border: 0.25px solid #B3B3B3;
|
||||
border: .0031rem solid #B3B3B3;
|
||||
background-color: transparent;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box ul li img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto 10px;
|
||||
width: .3125rem;
|
||||
height: .3125rem;
|
||||
margin: auto .125rem;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box ul li p {
|
||||
font-size: 16px;
|
||||
margin: auto 5px;
|
||||
font-size: .2rem;
|
||||
margin: auto .0625rem;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .right-box {
|
||||
position: relative;
|
||||
width: 650px;
|
||||
height: 360px;
|
||||
margin: 10px 10px 10px auto;
|
||||
width: 8.125rem;
|
||||
height: 4.5rem;
|
||||
margin: .125rem .125rem .125rem auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
</style>
|
||||
919
src/components/HomePage3.vue
Normal file
919
src/components/HomePage3.vue
Normal file
@ -0,0 +1,919 @@
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<!-- 飘窗 -->
|
||||
<div id="sport_wrap" v-if="sportStatus" class="float-window" :style="{left: `${floatWindow.left}px`, top: `${floatWindow.top}px`}" @mouseover="mouseOver" @mouseleave="mouseLeave">
|
||||
<div class="deleteImg" @click="showSport">
|
||||
<img class="close" src="/assets/img/close.png" alt="">
|
||||
</div>
|
||||
<img :src="floatImg" @click="windowSkip" alt="">
|
||||
</div>
|
||||
|
||||
<div class="box-top">
|
||||
<div class="headline">
|
||||
<h2>不止</h2>
|
||||
|
||||
<!-- <div id="title-container" >
|
||||
<h3 v-for="(title, index) in titles" :key="index" class="title" :style="{transform: `translateY(-${currentTitleIndex * 100}%)`}">{{ title }}</h3>
|
||||
</div> -->
|
||||
|
||||
<div id="title-container" >
|
||||
<h3 v-for="(title, index) in titles" :key="index" class="title" :style="titleContainerStyle">{{ title }}</h3>
|
||||
</div>
|
||||
<p>AI软著引擎平台累计辅助编写资料<em>{{number1}}</em>万套，通过平台代办下发证书<em>{{number2}}</em>万件</p>
|
||||
<div class="button-box">
|
||||
<button><a href="https://www.aimzhu.com/operator/">免费试用</a></button>
|
||||
<button><a href="https://www.aimzhu.com/operator/">立即前往</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box1">
|
||||
<h4>软件著作权的重要性</h4>
|
||||
<p>没有被保护的作品随时面临被抄袭，侵权的风险</p>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="/assets/img/box1-1.jpg" alt="logo图片">
|
||||
<em style="color: #8281e9;">帮助宣传</em>
|
||||
<p>已登记的版权可以向社会宣传自己的产品</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/box1-2.jpg" alt="logo图片">
|
||||
<em style="color: #4193f9;">防止抄袭</em>
|
||||
<p>当自己的版权被侵犯时，可以采取法律措施，维护自己的权益</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/box1-3.jpg" alt="logo图片">
|
||||
<em style="color: #ff8217;">提升无形资产</em>
|
||||
<p>帮助企业增资，提升递延纳税优惠</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/box1-4.jpg" alt="logo图片">
|
||||
<em style="color: #7daafa;">平台入住</em>
|
||||
<p>腾讯/阿里/百度等大平台入住必备条件</p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/box1-5.jpg" alt="logo图片">
|
||||
<em style="color: #ffc15d;">减免税收</em>
|
||||
<p>办理高新技术企业认定的前提条件，并且享受百万政府补贴</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="box2">
|
||||
<!-- 背景定位图片 -->
|
||||
<a href="">
|
||||
<img class="icon" src="/assets/img/icon.png" alt="">
|
||||
</a>
|
||||
<div class="location1">
|
||||
<img src="/assets/img/location1.jpg" alt="">
|
||||
</div>
|
||||
<div class="location2">
|
||||
<img src="/assets/img/location2.jpg" alt="">
|
||||
</div>
|
||||
<div class="location3">
|
||||
<img src="/assets/img/location3.jpg" alt="">
|
||||
</div>
|
||||
<!-- 软著申请步骤 -->
|
||||
<div class="step">
|
||||
<h4>简单三步，完成您的软件著作权登记证书申请</h4>
|
||||
<div class="step_head_tab" ref="boxRef">
|
||||
<ul>
|
||||
<li v-scroll-to="{ el: '.step1', offset: -100}">系统搭建</li>
|
||||
<li v-scroll-to="{ el: '.step2', offset: -100}">资料下载</li>
|
||||
<li v-scroll-to="{ el: '.step3', offset: -100}">网上申报</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 步骤1 -->
|
||||
<div class="step1">
|
||||
<div class="left-box">
|
||||
<div class="top1">
|
||||
<div class="box">
|
||||
<p>
|
||||
<em>1</em>/<i>3</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h4>系统搭建</h4>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li id="step1" v-for="(item1, index) in stepsContent1" :key="index" @click="selectStep1(index)" :class="{ active: currentStepIndex1 === index }" @mouseover="selectStep1(index)">
|
||||
<img :src="getStepImage1(item1, index)" alt="">
|
||||
<p>{{ item1.text }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<img :src="getRightBoxImage1(currentStepIndex1)" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 步骤2 -->
|
||||
<div class="step2">
|
||||
<div class="left-box">
|
||||
<img :src="getRightBoxImage2(currentStepIndex2)" alt="">
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="top2">
|
||||
<div class="box">
|
||||
<p>
|
||||
<em>2</em>/<i>3</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h4>资料下载</h4>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li id="step5" v-for="(item2, index) in stepsContent2" :key="index" @click="selectStep2(index)" :class="{ active: currentStepIndex2 === index }" @mouseover="selectStep2(index)">
|
||||
<img :src="getStepImage2(item2, index)" alt="">
|
||||
<p>{{ item2.text }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 步骤3 -->
|
||||
<div class="step3">
|
||||
<div class="left-box">
|
||||
<div class="top3">
|
||||
<div class="box">
|
||||
<p>
|
||||
<em>3</em>/<i>3</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title">
|
||||
<h4>网上申报</h4>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li id="step9" v-for="(item3, index) in stepsContent3" :key="index" @click="selectStep3(index)" :class="{ active: currentStepIndex3 === index }" @mouseover="selectStep3(index)">
|
||||
<img :src="getStepImage3(item3, index)" alt="">
|
||||
<p>{{ item3.text }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<img :src="getRightBoxImage3(currentStepIndex3)" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
oneData: '',
|
||||
twoData: '',
|
||||
titles: ['生成真实系统 | 可下载安装包', '提供材料撰写 | 提供一键导出', '不下证书就退款 | 免费补正也退款', '全托管包下证 | 也可自行申报'],
|
||||
intervalId: null,
|
||||
currentTitleIndex: 0,
|
||||
currentStepIndex1: 0,
|
||||
currentStepIndex2: 0,
|
||||
currentStepIndex3: 0,
|
||||
stepsContent1: [
|
||||
{ text: '填写系统名称并签署委托开发协议',images: ['step-1.png', 'step-1-1.png'] },
|
||||
{ text: '由AI生成系统功能与系统简介',images: ['step-2.png', 'step-2-2.png'] },
|
||||
{ text: '填写系统相关所属权信息并生成系统', images: ['step-3.png', 'step-3-3.png'] },
|
||||
{ text: '提供灵活的安装包支持公有或私有部署', images: ['step-4.png', 'step-4-4.png'] },
|
||||
],
|
||||
stepsContent2: [
|
||||
{ text: '一键生成软著申请所需的所有材料', images: ['step-5.png', 'step-5-5.png']},
|
||||
{ text: '提供源代码审查与查重保证原创性', images: ['step-6.png', 'step-6-6.png']},
|
||||
{ text: '提供多种风格的系统皮肤与框架', images: ['step-7.png', 'step-7-7.png']},
|
||||
{ text: '提供多种风格和行业的用户操作手册模板', images: ['step-8.png', 'step-8-8.png']},
|
||||
],
|
||||
stepsContent3: [
|
||||
{ text: '提供国家版权登记平台填报服务', images: ['step-9.png', 'step-9-9.png']},
|
||||
{ text: '提供申报环节动态实时通知服务', images: ['step-10.png', 'step-10-10.png']},
|
||||
{ text: '提供软著材料重新编写与补正服务', images: ['step-11.png', 'step-11-11.png']},
|
||||
{ text: '提供申报担保及包下证服务', images: ['step-12.png', 'step-12-12.png']},
|
||||
],
|
||||
rightBoxImages1: ['1-1.png', '1-2.png', '1-3.png', '1-4.png'],
|
||||
rightBoxImages2: ['2-1.png', '2-2.png', '2-3.png', '2-4.png'],
|
||||
rightBoxImages3: ['3-1.png', '3-2.png', '3-3.png', '3-4.png'],
|
||||
|
||||
number1: '',
|
||||
number2: '' ,
|
||||
|
||||
imgFloat: '',
|
||||
floatImg: '',
|
||||
contentId: '',
|
||||
title: '',
|
||||
|
||||
sportStatus: false,
|
||||
timer: null,
|
||||
floatWindow: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
direction: {
|
||||
top: 1,
|
||||
left: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectStep1(index) {
|
||||
this.currentStepIndex1 = index; // 设置当前选中的步骤索引
|
||||
},
|
||||
getStepImage1(item1, index) {
|
||||
// 拼接完整的图片路径
|
||||
const activeIndex = this.currentStepIndex1 === index ? 1 : 0;
|
||||
return `assets/img/${item1.images[activeIndex]}`;
|
||||
},
|
||||
getRightBoxImage1(index) {
|
||||
// 拼接右侧盒子图片的完整路径
|
||||
return `assets/img/${this.rightBoxImages1[index]}`;
|
||||
},
|
||||
|
||||
selectStep2(index) {
|
||||
this.currentStepIndex2 = index; // 设置当前选中的步骤索引
|
||||
},
|
||||
getStepImage2(item2, index) {
|
||||
// 拼接完整的图片路径
|
||||
const activeIndex = this.currentStepIndex2 === index ? 1 : 0;
|
||||
return `assets/img/${item2.images[activeIndex]}`;
|
||||
},
|
||||
getRightBoxImage2(index) {
|
||||
// 拼接右侧盒子图片的完整路径
|
||||
return `assets/img/${this.rightBoxImages2[index]}`;
|
||||
},
|
||||
|
||||
selectStep3(index) {
|
||||
this.currentStepIndex3 = index; // 设置当前选中的步骤索引
|
||||
},
|
||||
getStepImage3(item3, index) {
|
||||
// 拼接完整的图片路径
|
||||
const activeIndex = this.currentStepIndex3 === index ? 1 : 0;
|
||||
return `assets/img/${item3.images[activeIndex]}`;
|
||||
},
|
||||
getRightBoxImage3(index) {
|
||||
// 拼接右侧盒子图片的完整路径
|
||||
return `assets/img/${this.rightBoxImages3[index]}`;
|
||||
},
|
||||
|
||||
startData() {
|
||||
const dataUrl = 'https://www.aimzhu.com/copyright/api/env/custom/get-proj-counts'
|
||||
axios.get(dataUrl).then(response => {
|
||||
// console.log(response.data.data);
|
||||
this.number1 = response.data.data[0]
|
||||
this.number2 = response.data.data[1]
|
||||
})
|
||||
},
|
||||
startScroll() {
|
||||
this.intervalId = setInterval(() => {
|
||||
this.currentTitleIndex = (this.currentTitleIndex + 1) % this.titles.length;
|
||||
if (this.currentTitleIndex === 0) {
|
||||
// 使用Vue的nextTick来在DOM更新后重置过渡效果
|
||||
this.$nextTick(() => {
|
||||
// this.resetTransition();
|
||||
});
|
||||
}
|
||||
}, 3000);
|
||||
},
|
||||
stopScroll() {
|
||||
clearInterval(this.intervalId);
|
||||
},
|
||||
// 飘窗所需图片内容
|
||||
floatContent() {
|
||||
axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
|
||||
// console.log(response.data)
|
||||
if (response.data.length != 0) {
|
||||
const imgFolat = response.data[0].photo
|
||||
this.floatImg = `https://www.aimzhu.com/operator/route/file/download/true/${imgFolat}`
|
||||
this.contentId = response.data[0].contentId
|
||||
this.title = response.data[0].title
|
||||
this.sportStatus = true
|
||||
this.floatWindowMove();
|
||||
} else {
|
||||
this.sportStatus = false
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('There was an error!', error)
|
||||
})
|
||||
},
|
||||
// 飘窗移动
|
||||
floatWindowMove() {
|
||||
let self = this;
|
||||
let winWidth = window.innerWidth;
|
||||
let winHeight = window.innerHeight;
|
||||
this.timer = setInterval(() => {
|
||||
if(self.floatWindow.top + 200 >= winHeight) {
|
||||
self.floatWindow.direction.top = -1;
|
||||
} else if(self.floatWindow.top <= 0) {
|
||||
self.floatWindow.direction.top = 1;
|
||||
}
|
||||
|
||||
if(self.floatWindow.left + 200 >= winWidth) {
|
||||
self.floatWindow.direction.left = -1;
|
||||
} else if(self.floatWindow.left <= 0) {
|
||||
self.floatWindow.direction.left = 1;
|
||||
}
|
||||
self.floatWindow.top += self.floatWindow.direction.top * 2;
|
||||
self.floatWindow.left += self.floatWindow.direction.left * 2;
|
||||
}, 20);
|
||||
},
|
||||
showSport(){
|
||||
//关闭漂浮窗
|
||||
this.sportStatus = false
|
||||
// clearInterval(this.timer)
|
||||
},
|
||||
// 鼠标移入
|
||||
mouseOver(){
|
||||
clearInterval(this.timer); // 清除定时器
|
||||
},
|
||||
// 鼠标移出
|
||||
mouseLeave(){
|
||||
this.floatWindowMove();
|
||||
},
|
||||
// 飘窗跳转
|
||||
windowSkip() {
|
||||
window.open(`https://www.aimzhu.com/operator/route/content/view?contentId=${this.contentId}&title=${this.title}`);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
titleContainerStyle() {
|
||||
return {
|
||||
transform: `translateY(-${this.currentTitleIndex * 100}%)`,
|
||||
transition: 'transform 0.5s ease-in-out',
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.startScroll();
|
||||
this.startData();
|
||||
this.floatContent();
|
||||
// this.goToLink();
|
||||
axios.get(``).then(Response => {
|
||||
this.oneData = Response.data
|
||||
this.twoData = Response.data
|
||||
}).catch(error => {
|
||||
console.error('Error fetching data:', error)
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
// beforeUnmount() {
|
||||
// clearInterval(this.intervalId);
|
||||
// },
|
||||
beforeDestroy() {
|
||||
this.stopScroll();
|
||||
// this.startData();
|
||||
clearInterval(this.timer); // 清除定时器
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
border: 0px solid transparent !important ;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
background-color: #FFF !important;
|
||||
}
|
||||
.home-page {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.home-page .box-top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: pink; */
|
||||
background: url(/assets/img/home-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.home-page .box-top .headline {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* position: absolute;
|
||||
left: 50%;
|
||||
top: 50%; */
|
||||
width: 900px;
|
||||
height: 300px;
|
||||
/* border: 2px solid red; */
|
||||
margin: auto;
|
||||
/* margin: auto 300px; */
|
||||
|
||||
}
|
||||
|
||||
.home-page .box-top .headline h2 {
|
||||
font-size: 50px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
}
|
||||
.home-page .box-top .headline #title-container {
|
||||
position: relative;
|
||||
height: 80px; /* 根据需要调整 */
|
||||
overflow: hidden;
|
||||
/* border: 1px solid blue; */
|
||||
}
|
||||
.home-page .box-top .headline .title {
|
||||
position: relative;
|
||||
top: 0;
|
||||
font-size: 50px;
|
||||
color: #FFF;
|
||||
width: 900px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
/* margin: auto 20px; */
|
||||
/* padding: 0 10px; */
|
||||
letter-spacing: 6px;
|
||||
text-align: center;
|
||||
/* border: 1px solid red; */
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
.home-page .box-top .headline p {
|
||||
font-size: 18px;
|
||||
color: #FFF;
|
||||
/* margin: 5px auto; */
|
||||
margin: auto;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.home-page .box-top .headline p em {
|
||||
font-size: 30px;
|
||||
}
|
||||
.home-page .box-top .headline .button-box {
|
||||
font-size: 26px;
|
||||
/* margin: 20px auto; */
|
||||
margin: auto;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button {
|
||||
/* padding: 10px 45px; */
|
||||
height: 40px;
|
||||
width: 140px;
|
||||
margin-left: 20px;
|
||||
border: none;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button a {
|
||||
display: block;
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button:first-child {
|
||||
background-color: #39C7C1;
|
||||
/* color: #FFF; */
|
||||
}
|
||||
.home-page .box-top .headline .button-box button:first-child a {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.home-page .box-top .headline.button-box button:first-child:hover {
|
||||
background-color: #00A99D;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-top .headline .button-box button:last-child:hover {
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 飘窗 */
|
||||
.float-window {
|
||||
position: fixed;
|
||||
/* width: 120px;
|
||||
height: 120px; */
|
||||
width: 171.25px;
|
||||
height: 214.25px;
|
||||
/* background-color: black; */
|
||||
z-index: 99999999;
|
||||
}
|
||||
.home-page #sport_wrap {
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page #sport_wrap .deleteImg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position:absolute;
|
||||
right: 12px;
|
||||
top: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page #sport_wrap .deleteImg .close {
|
||||
width:16px !important;
|
||||
height: 16px !important;
|
||||
}
|
||||
|
||||
.home-page .box-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 2100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.home-page .box-bottom .box1 {
|
||||
height: 450px;
|
||||
margin: 70px auto;
|
||||
text-align: center;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box1 h4 {
|
||||
margin-top: 15px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.home-page .box-bottom .box1 p {
|
||||
font-size: 14px;
|
||||
margin: 15px auto;
|
||||
color: #a2a2a2;
|
||||
}
|
||||
.home-page .box-bottom .box1 ul {
|
||||
display: flex;
|
||||
}
|
||||
.home-page .box-bottom .box1 ul li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 130px;
|
||||
margin: 40px 40px;
|
||||
/* padding: 0 30px; */
|
||||
}
|
||||
.home-page .box-bottom .box1 ul li img {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.home-page .box-bottom .box1 ul li em {
|
||||
font-size: 16px;
|
||||
margin: 20px auto 0px auto;
|
||||
font-weight: 700;
|
||||
}
|
||||
.home-page .box-bottom .box1 ul li p {
|
||||
/* font-size: 14px; */
|
||||
line-height: 30px;
|
||||
}
|
||||
/* 软著申请步骤--------------------------------------- */
|
||||
.home-page .box-bottom .box2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 1500px;
|
||||
margin: 20px auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .icon {
|
||||
/* position: absolute; */
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .location1{
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
/* right: -150px; */
|
||||
right: 0;
|
||||
width: 270px;
|
||||
height: 330px;
|
||||
/* border: 2px solid red; */
|
||||
/* z-index: 100; */
|
||||
}
|
||||
.home-page .box-bottom .location2{
|
||||
position: absolute;
|
||||
top: 380px;
|
||||
/* left: -180px; */
|
||||
left: 0;
|
||||
width: 240px;
|
||||
height: 320px;
|
||||
/* border: 2px solid red; */
|
||||
/* z-index: 100; */
|
||||
}
|
||||
.home-page .box-bottom .location3{
|
||||
position: absolute;
|
||||
top: 830px;
|
||||
/* right: -150px; */
|
||||
right: 0;
|
||||
width: 270px;
|
||||
height: 330px;
|
||||
/* border: 2px solid red; */
|
||||
/* z-index: 100; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step {
|
||||
margin: 10px;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step h4 {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step .step_head_tab {
|
||||
/* position: fixed;
|
||||
backdrop-filter: blur(10px); */
|
||||
top: 90px;
|
||||
left: 0;
|
||||
z-index: 9999999;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: rgba(255,255,255,.6);
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step .stepscrollfix {
|
||||
position: fixed;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.home-page .box-bottom .box2 .step ul {
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
width: 600px;
|
||||
height: 60px;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.home-page .box-bottom .box2 .step ul li {
|
||||
/* padding: 10px 35px; */
|
||||
width: 200px;
|
||||
height: 52px;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
background-color: #FFF;
|
||||
border: 5px solid #f8fbfd;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step ul li:nth-child(2) {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
/* 步骤1------------------- */
|
||||
.home-page .box-bottom .box2 .step1 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
width: 1100px;
|
||||
height: 380px;
|
||||
/* border: 2px solid red; */
|
||||
margin: 30px auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box {
|
||||
position: relative;
|
||||
width: 370px;
|
||||
height: 360px;
|
||||
margin: 10px;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
/* 步骤一二三上方题目 */
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 {
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 110px;
|
||||
height: 100px;
|
||||
background: url(/assets/img/step-top1.png) no-repeat;
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box p {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
bottom: 0;
|
||||
width: 60px;
|
||||
font-size: 22px;
|
||||
/* border: 1px solid blue; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 .box p em {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 .title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
/* border: 1px solid green; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box .top1 h4 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box ul li {
|
||||
display: flex;
|
||||
height: 42.5px;
|
||||
border-radius: 7px;
|
||||
margin: 8px;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box ul .newStyle {
|
||||
border: 0.25px solid #B3B3B3;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.home-page .box-bottom .box2 .step1 .left-box ul li img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .left-box ul li p {
|
||||
font-size: 16px;
|
||||
margin: auto 5px;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step1 .right-box {
|
||||
z-index: 999;
|
||||
width: 650px;
|
||||
height: 360px;
|
||||
margin: 10px 10px 10px auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
/* 步骤2----------------------------------------- */
|
||||
.home-page .box-bottom .box2 .step2 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
width: 1100px;
|
||||
height: 380px;
|
||||
/* border: 2px solid red; */
|
||||
margin: 30px auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .left-box {
|
||||
position: relative;
|
||||
width: 650px;
|
||||
height: 360px;
|
||||
margin: 10px auto 10px 10px;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step2 .right-box {
|
||||
position: relative;
|
||||
width: 370px;
|
||||
height: 360px;
|
||||
margin: 10px;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 {
|
||||
/* position: absolute; */
|
||||
right: 0;
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 110px;
|
||||
height: 100px;
|
||||
background: url(/assets/img/step-top2.png) no-repeat;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box p {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
width: 60px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .box p em {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 0;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
/* border: 1px solid green; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box .top2 .title h4 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.home-page .box-bottom .box2 .step2 .right-box ul li {
|
||||
display: flex;
|
||||
height: 42.5px;
|
||||
border-radius: 7px;
|
||||
margin: 8px;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box ul .newStyle {
|
||||
border: 0.25px solid #B3B3B3;
|
||||
background-color: transparent;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box ul li img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step2 .right-box ul li p {
|
||||
font-size: 16px;
|
||||
margin: auto 5px;
|
||||
}
|
||||
/* 步骤3--------------------------------------- */
|
||||
.home-page .box-bottom .box2 .step3 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
width: 1100px;
|
||||
height: 380px;
|
||||
/* border: 2px solid red; */
|
||||
margin: 30px auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box {
|
||||
width: 370px;
|
||||
height: 360px;
|
||||
margin: 10px;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 150px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 110px;
|
||||
height: 100px;
|
||||
background: url(/assets/img/step-top3.png) no-repeat;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box p {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
bottom: 0;
|
||||
width: 60px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .box p em {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box .top3 .title h4 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box ul li {
|
||||
display: flex;
|
||||
height: 42.5px;
|
||||
border-radius: 7px;
|
||||
margin: 8px;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box ul .newStyle {
|
||||
border: 0.25px solid #B3B3B3;
|
||||
background-color: transparent;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box ul li img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .left-box ul li p {
|
||||
font-size: 16px;
|
||||
margin: auto 5px;
|
||||
}
|
||||
.home-page .box-bottom .box2 .step3 .right-box {
|
||||
position: relative;
|
||||
width: 650px;
|
||||
height: 360px;
|
||||
margin: 10px 10px 10px auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
</style>
|
||||
@ -147,7 +147,7 @@ export default {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 605px;
|
||||
height: 7.5625rem;
|
||||
background: url(/assets/img/kefu-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -155,8 +155,8 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 1000px;
|
||||
height: 150px;
|
||||
width: 12.5rem;
|
||||
height: 1.875rem;
|
||||
margin: 0 auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
@ -164,18 +164,18 @@ export default {
|
||||
/* position: absolute;
|
||||
top: 220px;
|
||||
left: 300px; */
|
||||
width: 500px;
|
||||
font-size: 30px;
|
||||
width: 6.25rem;
|
||||
font-size: .375rem;
|
||||
color: #74491a;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: .125rem;
|
||||
}
|
||||
.ke-fu .box-top p {
|
||||
/* position: absolute;
|
||||
top: 270px;
|
||||
left: 300px; */
|
||||
width: 500px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 5px;
|
||||
width: 6.25rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
.ke-fu .box-bottom {
|
||||
@ -183,18 +183,18 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
height: 5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.ke-fu .box-bottom .box {
|
||||
position: absolute;
|
||||
/* display: flex;
|
||||
justify-content:center; */
|
||||
top: -200px;
|
||||
top: -2.5rem;
|
||||
/* left: 18%; */
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
height: 550px;
|
||||
width: 12.5rem;
|
||||
height: 6.875rem;
|
||||
/* border: 2px solid red; */
|
||||
/* background-color: #FFF; */
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
@ -204,48 +204,48 @@ export default {
|
||||
.ke-fu .box-bottom .box .left-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 680px;
|
||||
margin-right: 10px;
|
||||
width: 8.5rem;
|
||||
margin-right: .125rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 25px;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
margin: .3125rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub h4 {
|
||||
font-size: 18px;
|
||||
font-size: .225rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
/* width: 350px; */
|
||||
height: 50px;
|
||||
height: .625rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput {
|
||||
display: inline-block;
|
||||
margin: auto 0;
|
||||
padding-left: 14px;
|
||||
height: 34px;
|
||||
width: 280px;
|
||||
font-size: 13px;
|
||||
padding-left: .175rem;
|
||||
height: .425rem;
|
||||
width: 3.5rem;
|
||||
font-size: .1625rem;
|
||||
color: #333;
|
||||
border: 1px solid #ededed;
|
||||
border: .0125rem solid #ededed;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #txtInput:focus {
|
||||
border: 1px solid #febe54;
|
||||
border: .0125rem solid #febe54;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box .kefu-sub .kefu-search #search {
|
||||
display: inline-block;
|
||||
margin: auto 0;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
width: 60px;
|
||||
font-size: 13px;
|
||||
height: .425rem;
|
||||
line-height: .425rem;
|
||||
width: .75rem;
|
||||
font-size: .1625rem;
|
||||
background-color: #fda633;
|
||||
color: #FFF;
|
||||
border: none;
|
||||
@ -256,31 +256,31 @@ export default {
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul {
|
||||
display: flex;
|
||||
height: 140px;
|
||||
margin: 25px;
|
||||
height: 1.75rem;
|
||||
margin: .3125rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: .5rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
height: 120px;
|
||||
margin: 10px auto;
|
||||
width: 3.5rem;
|
||||
height: 1.5rem;
|
||||
margin: .125rem auto;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline {
|
||||
display: flex;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 5px;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
margin-bottom: .0625rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline i {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: auto 10px;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
margin: auto .125rem;
|
||||
background: url(/assets/img/kefu-1.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -300,13 +300,13 @@ export default {
|
||||
|
||||
|
||||
.ke-fu .box-bottom .box .left-box ul li .headline h5 {
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p {
|
||||
height: 30px;
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 14px;
|
||||
height: .375rem;
|
||||
margin: .0625rem 0 0 0;
|
||||
font-size: .175rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul li p a {
|
||||
color: #0095ff;
|
||||
@ -319,42 +319,42 @@ export default {
|
||||
}
|
||||
.ke-fu .box-bottom .box .left-box ul:last-child li:first-child p span {
|
||||
display: inline-block;
|
||||
width: 78px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
width: .975rem;
|
||||
height: .35rem;
|
||||
line-height: .35rem;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #d9d9d9;
|
||||
margin-right: .125rem;
|
||||
border: .0125rem solid #d9d9d9;
|
||||
}
|
||||
|
||||
|
||||
.ke-fu .box-bottom .box .right-box {
|
||||
width: 310px;
|
||||
width: 3.875rem;
|
||||
/* margin-right: 2%; */
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius:10px;
|
||||
border-top-left-radius: .125rem;
|
||||
border-top-right-radius:.125rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box h5 {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: .175rem;
|
||||
background-color: #febe54;
|
||||
border-radius: 10px;
|
||||
border-radius: .125rem;
|
||||
color: #FFF;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 15px 5px 0 10px;
|
||||
margin: .1875rem .0625rem 0 .125rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul li{
|
||||
display: flex;
|
||||
align-content: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
margin-bottom: .125rem;
|
||||
/* background-color: pink; */
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
@ -362,27 +362,27 @@ export default {
|
||||
text-align: center;
|
||||
margin: auto 0;
|
||||
/* line-height: 30px; */
|
||||
width: 80px;
|
||||
width: 1rem;
|
||||
/* padding: 2px 5px; */
|
||||
border-radius: 12px;
|
||||
border-radius: .15rem;
|
||||
background-color: #febe54;
|
||||
font-size: 13px;
|
||||
font-size: .1625rem;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box ul li i {
|
||||
margin: auto 0;
|
||||
width: 100%;
|
||||
padding: 0 25px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
padding: 0 .3125rem;
|
||||
border-top-left-radius: .125rem;
|
||||
border-bottom-left-radius: .125rem;
|
||||
background-color: #ebebeb;
|
||||
color: #8f673d;
|
||||
}
|
||||
.ke-fu .box-bottom .box .right-box .rengong-kefu {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
right: .25rem;
|
||||
bottom: 0;
|
||||
width: 220px;
|
||||
height: 280px;
|
||||
width: 2.75rem;
|
||||
height: 3.5rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
</style>
|
||||
@ -478,13 +478,13 @@ export default {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
height: 7.5rem;
|
||||
background: url(/assets/img/products-news-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.box-top .title {
|
||||
width: 1000px;
|
||||
height: 120px;
|
||||
width: 12.5rem;
|
||||
height: 1.5rem;
|
||||
/* border: 1px solid red; */
|
||||
margin: auto;
|
||||
color: #FFF;
|
||||
@ -494,15 +494,15 @@ export default {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 30px solid #fec14e;
|
||||
border-right: 30px solid transparent;
|
||||
border-top: .375rem solid #fec14e;
|
||||
border-right: .375rem solid transparent;
|
||||
}
|
||||
.title h3 {
|
||||
height: 60px;
|
||||
width: 200px;
|
||||
line-height: 60px;
|
||||
padding-left: 30px;
|
||||
font-size: 36px;
|
||||
height: .75rem;
|
||||
width: 2.5rem;
|
||||
line-height: .75rem;
|
||||
padding-left: .375rem;
|
||||
font-size: .45rem;
|
||||
font-weight: 700;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
@ -510,10 +510,10 @@ export default {
|
||||
display: inline-block;
|
||||
/* height: 20px; */
|
||||
/* line-height: 20px; */
|
||||
margin-left: 30px;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
margin-left: .375rem;
|
||||
margin-top: .125rem;
|
||||
font-size: .175rem;
|
||||
padding: .0625rem;
|
||||
background-color: rgba(255,255,255,.4);
|
||||
}
|
||||
.box-bottom,
|
||||
@ -524,10 +524,10 @@ export default {
|
||||
}
|
||||
.box-bottom .box1 {
|
||||
position: relative;
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
width: 12.5rem;
|
||||
height: 6.25rem;
|
||||
margin: 0 auto;
|
||||
margin-top: -150px;
|
||||
margin-top: -1.875rem;
|
||||
z-index: 99;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
@ -536,28 +536,28 @@ export default {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.box1 ul li {
|
||||
width: 320px;
|
||||
height: 500px;
|
||||
width: 4rem;
|
||||
height: 6.25rem;
|
||||
background-color: #fff;
|
||||
/* background-color: pink; */
|
||||
-webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 0 0 15px rgba(0,0,0,.2);
|
||||
box-shadow: 0 0 15px rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 0 0 .1875rem rgba(0,0,0,.2);
|
||||
-moz-box-shadow: 0 0 .1875rem rgba(0,0,0,.2);
|
||||
box-shadow: 0 0 .1875rem rgba(0,0,0,.2);
|
||||
}
|
||||
.box1 ul li img {
|
||||
width: 316px;
|
||||
height: 196px;
|
||||
margin: 2px;
|
||||
width: 3.95rem;
|
||||
height: 2.45rem;
|
||||
margin: .025rem;
|
||||
}
|
||||
.box1 ul li h4 {
|
||||
height: 100px;
|
||||
line-height: 30px;
|
||||
width: 280px;
|
||||
font-size: 18px;
|
||||
height: 1.25rem;
|
||||
line-height: .375rem;
|
||||
width: 3.5rem;
|
||||
font-size: .225rem;
|
||||
font-weight: 700;
|
||||
margin: 0 20px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f9f9f9;
|
||||
margin: 0 .25rem;
|
||||
padding: .125rem 0;
|
||||
border-bottom: .0125rem solid #f9f9f9;
|
||||
color: #2b2939;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -568,11 +568,11 @@ export default {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
.box1 ul li p{
|
||||
margin-top: 10px;
|
||||
padding: 5px 20px;
|
||||
height: 100px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
margin-top: .125rem;
|
||||
padding: .0625rem .25rem;
|
||||
height: 1.25rem;
|
||||
line-height: .3125rem;
|
||||
font-size: .175rem;
|
||||
color: #433c55ad;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -586,38 +586,38 @@ export default {
|
||||
.box2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
margin: 80px auto;
|
||||
padding: 0 15px;
|
||||
width: 12.5rem;
|
||||
height: 6.25rem;
|
||||
margin: 1rem auto;
|
||||
padding: 0 .1875rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box2 .row1 {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 22px;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
font-size: .275rem;
|
||||
color: #e0e0e0;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box2 .row2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.box2 .row2 h3 {
|
||||
font-size: 26px;
|
||||
font-size: .325rem;
|
||||
font-weight: 700;
|
||||
color: #656972;
|
||||
}
|
||||
.box2 .row2 a {
|
||||
font-size: 14px;
|
||||
font-size: .175rem;
|
||||
}
|
||||
.box2 .row3 {
|
||||
width: 970px;
|
||||
height: 400px;
|
||||
margin-top: 20px;
|
||||
width: 12.125rem;
|
||||
height: 5rem;
|
||||
margin-top: .25rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box2 .row3 ul {
|
||||
@ -627,9 +627,9 @@ export default {
|
||||
}
|
||||
.box2 .row3 ul li {
|
||||
display: flex;
|
||||
width: 470px;
|
||||
height: 180px;
|
||||
margin-bottom: 20px;
|
||||
width: 5.875rem;
|
||||
height: 2.25rem;
|
||||
margin-bottom: .25rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.box2 .row3 ul li a {
|
||||
@ -640,38 +640,38 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 120px;
|
||||
height: 150px;
|
||||
margin: 15px 5px;
|
||||
width: 1.5rem;
|
||||
height: 1.875rem;
|
||||
margin: .1875rem .0625rem;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.box2 .row3 ul li .date .year-month {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-size: .225rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box2 .row3 ul li .date .day {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-size: .325rem;
|
||||
/* background-color: gray; */
|
||||
}
|
||||
.box2 .row3 ul li .content {
|
||||
width: 320px;
|
||||
height: 150px;
|
||||
margin: 15px 0;
|
||||
margin-left: 10px;
|
||||
width: 4rem;
|
||||
height: 1.875rem;
|
||||
margin: .1875rem 0;
|
||||
margin-left: .125rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box2 .row3 ul li .content h4 {
|
||||
/* height: 60px; */
|
||||
line-height: 30px;
|
||||
font-size: 18px;
|
||||
line-height: .375rem;
|
||||
font-size: .225rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: .125rem;
|
||||
color: #2b2939;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -682,9 +682,9 @@ export default {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.box2 .row3 ul li .content p {
|
||||
height: 75px;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
height: .9375rem;
|
||||
line-height: .3125rem;
|
||||
font-size: .175rem;
|
||||
font-weight: 300;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -697,63 +697,63 @@ export default {
|
||||
.box3 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
height: 7.5rem;
|
||||
background-color: #fcfcfc;
|
||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 5px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 5px rgba(0,0,0,.1);
|
||||
-webkit-box-shadow: 0 0 .0625rem rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 .0625rem rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 .0625rem rgba(0,0,0,.1);
|
||||
}
|
||||
.box3 .box3Content {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
top: .625rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
width: 12.5rem;
|
||||
height: 6.25rem;
|
||||
margin: auto;
|
||||
padding: 0 15px;
|
||||
padding: 0 .1875rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box3 .box3Content .row1 {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 22px;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
font-size: .275rem;
|
||||
color: #e0e0e0;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box3 .box3Content .row2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.box3 .box3Content .row2 h3 {
|
||||
font-size: 26px;
|
||||
font-size: .325rem;
|
||||
font-weight: 700;
|
||||
color: #656972;
|
||||
}
|
||||
.box3 .box3Content .row2 a {
|
||||
font-size: 14px;
|
||||
font-size: .175rem;
|
||||
}
|
||||
.box3 .box3Content .row3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 970px;
|
||||
height: 350px;
|
||||
margin-top: 20px;
|
||||
width: 12.125rem;
|
||||
height: 4.375rem;
|
||||
margin-top: .25rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box3 .box3Content .row3 .column1 {
|
||||
position: relative;
|
||||
width: 430px;
|
||||
width: 5.375rem;
|
||||
/* background-color: #FFF; */
|
||||
/* border: 1px solid red; */
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-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);
|
||||
}
|
||||
.box3 .box3Content .row3 .column1 img {
|
||||
position: absolute;
|
||||
@ -762,11 +762,11 @@ export default {
|
||||
.box3 .box3Content .row3 .column1 span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
width: 430px;
|
||||
line-height: 50px;
|
||||
height: .625rem;
|
||||
width: 5.375rem;
|
||||
line-height: .625rem;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
color: #FFF;
|
||||
background-color: rgba(0,0,0,.3);
|
||||
white-space: nowrap;
|
||||
@ -776,26 +776,26 @@ export default {
|
||||
.box3 .box3Content .row3 ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 350px;
|
||||
width: 520px;
|
||||
height: 4.375rem;
|
||||
width: 6.5rem;
|
||||
}
|
||||
.box3 .box3Content .row3 ul .col {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 25px;
|
||||
width: 250px;
|
||||
height: 350px;
|
||||
padding: .25rem .3125rem;
|
||||
width: 3.125rem;
|
||||
height: 4.375rem;
|
||||
/* border: 1px solid red; */
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-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);
|
||||
}
|
||||
.box3 .box3Content .row3 ul .col h4 {
|
||||
height: 81px;
|
||||
line-height: 27px;
|
||||
font-size: 18px;
|
||||
height: 1.0125rem;
|
||||
line-height: .3375rem;
|
||||
font-size: .225rem;
|
||||
font-weight: 700;
|
||||
/* margin-bottom: 10px;
|
||||
padding-bottom: 10px; */
|
||||
@ -813,14 +813,14 @@ export default {
|
||||
}
|
||||
.box3 .box3Content .row3 ul .col span {
|
||||
display: block;
|
||||
height: 1px;
|
||||
height: .0125rem;
|
||||
width: 100%;
|
||||
margin: 10px 0 15px 0;
|
||||
margin: .125rem 0 .1875rem 0;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.box3 .box3Content .row3 ul .col .text {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
line-height: .3rem;
|
||||
font-size: .175rem;
|
||||
color: #433c55ad;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -834,26 +834,26 @@ export default {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 20px;
|
||||
height: 60px;
|
||||
width: 200px;
|
||||
bottom: .25rem;
|
||||
height: .75rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
.box3 .box3Content .row3 ul .col .date .row1 .year-month {
|
||||
height: 20px;
|
||||
width: 200px;
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
height: .25rem;
|
||||
width: 2.5rem;
|
||||
line-height: .25rem;
|
||||
font-size: .2rem;
|
||||
color: #d0d0d3;
|
||||
}
|
||||
.box3 .box3Content .row3 ul .col .date .row2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
font-size: 22px;
|
||||
height: .5rem;
|
||||
font-size: .275rem;
|
||||
color: #b1b0b6;
|
||||
}
|
||||
.box3 .box3Content .row3 ul .col .date .row2 a {
|
||||
font-size: 26px;
|
||||
font-size: .325rem;
|
||||
color: #b1b0b6;
|
||||
}
|
||||
/* .box1, .box2, .box3 {
|
||||
@ -877,29 +877,29 @@ export default {
|
||||
.more .nav {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
font-size: 18px;
|
||||
height: .75rem;
|
||||
line-height: .75rem;
|
||||
font-size: .225rem;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
|
||||
box-shadow: 0 .0125rem .05rem 0 rgba(0,0,0,.2);
|
||||
background-color: #fff;
|
||||
}
|
||||
.details .nav span ,
|
||||
.more .nav span {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 1000px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
font-size: 18px;
|
||||
width: 12.5rem;
|
||||
height: .75rem;
|
||||
line-height: .75rem;
|
||||
font-size: .225rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.details .articel,
|
||||
.more .list {
|
||||
position: relative;
|
||||
/* display: flex; */
|
||||
width: 1000px;
|
||||
margin: 20px auto;
|
||||
width: 12.5rem;
|
||||
margin: .25rem auto;
|
||||
|
||||
/* border: 1px solid red; */
|
||||
/* background-color: #fff; */
|
||||
@ -909,9 +909,9 @@ export default {
|
||||
.more .list .left {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 720px;
|
||||
margin-right: 20px;
|
||||
padding: 10px 40px;
|
||||
width: 9rem;
|
||||
margin-right: .25rem;
|
||||
padding: .125rem .5rem;
|
||||
background-color: #fff;
|
||||
/* border: 1px solid red; */
|
||||
/* -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
@ -919,12 +919,12 @@ export default {
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1); */
|
||||
}
|
||||
.details .articel .left h4 {
|
||||
margin-top: 10px;
|
||||
margin-top: .125rem;
|
||||
display: block;
|
||||
/* height: 60px; */
|
||||
line-height: 40px;
|
||||
line-height: .5rem;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-size: .275rem;
|
||||
font-weight: 700;
|
||||
/* border-bottom: 1px solid #f1f1f1; */
|
||||
/* background-color: pink; */
|
||||
@ -932,24 +932,24 @@ export default {
|
||||
}
|
||||
.details .articel .left .date {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-size: .175rem;
|
||||
color: #bdbdbd;
|
||||
margin-top: 5px;
|
||||
margin-top: .0625rem;
|
||||
}
|
||||
.details .articel .left span {
|
||||
margin: 10px 0;
|
||||
margin: .125rem 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
height: .0125rem;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.details .articel .left .content {
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
font-weight: 350;
|
||||
line-height: 38px;
|
||||
margin-bottom: 50px;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: .475rem;
|
||||
margin-bottom: .625rem;
|
||||
letter-spacing: .0063rem;
|
||||
color: #7c7c7c;
|
||||
}
|
||||
.more .list .left ul {
|
||||
@ -960,44 +960,44 @@ export default {
|
||||
/* display: flex; */
|
||||
/* height: 140px; */
|
||||
/* margin: 10px 0; */
|
||||
padding: 10px 0;
|
||||
border-bottom: 0.5px solid #fcfcfc;
|
||||
padding: .125rem 0;
|
||||
border-bottom: .0063rem solid #fcfcfc;
|
||||
}
|
||||
.more .list .left ul li a {
|
||||
display: flex;
|
||||
width: 640px;
|
||||
width: 8rem;
|
||||
}
|
||||
.more .list .left ul li .newsphoto {
|
||||
height: 120px;
|
||||
width: 160px;
|
||||
margin-right: 20px;
|
||||
height: 1.5rem;
|
||||
width: 2rem;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
.more .list .left ul li .newsphoto img {
|
||||
height: 120px;
|
||||
width: 160px;
|
||||
height: 1.5rem;
|
||||
width: 2rem;
|
||||
/* margin: 15px 0; */
|
||||
}
|
||||
.more .list .left ul li .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 460px;
|
||||
width: 5.75rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.more .list .left ul li .content h4 {
|
||||
width: 460px;
|
||||
height: 28px;
|
||||
width: 5.75rem;
|
||||
height: .35rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 28px;
|
||||
line-height: .35rem;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
}
|
||||
.more .list .left ul li .content .intro {
|
||||
width: 460px;
|
||||
height: 72px;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
width: 5.75rem;
|
||||
height: .9rem;
|
||||
font-size: .175rem;
|
||||
line-height: .3rem;
|
||||
overflow: hidden;
|
||||
/* white-space: wrap; */
|
||||
text-overflow: ellipsis;
|
||||
@ -1017,17 +1017,17 @@ export default {
|
||||
background: linear-gradient(to right, transparent, white 20px);
|
||||
} */
|
||||
.more .list .left ul li .content em {
|
||||
height: 20px;
|
||||
font-size: 13px;
|
||||
height: .25rem;
|
||||
font-size: .1625rem;
|
||||
color: #939399;
|
||||
text-align: right;
|
||||
}
|
||||
.more .list .left .pagination {
|
||||
position: relative;
|
||||
right: 25px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-top: 50px;
|
||||
right: .3125rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
margin-top: .625rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@ -1036,7 +1036,7 @@ export default {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 260px;
|
||||
width: 3.25rem;
|
||||
background-color: #fff;
|
||||
/* -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
@ -1044,30 +1044,30 @@ export default {
|
||||
}
|
||||
.details .articel .right .tp,
|
||||
.more .list .right .tp {
|
||||
width: 260px;
|
||||
height: 180px;
|
||||
margin-bottom: 10px;
|
||||
width: 3.25rem;
|
||||
height: 2.25rem;
|
||||
margin-bottom: .125rem;
|
||||
}
|
||||
.details .articel .right span,
|
||||
.more .list .right span {
|
||||
display: block;
|
||||
width: 260px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
border-bottom: 1px solid rgba(0,0,0,.1);
|
||||
width: 3.25rem;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
padding: 0 .125rem;
|
||||
border-bottom: .0125rem solid rgba(0,0,0,.1);
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.details .articel .right span em,
|
||||
.more .list .right span em {
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
font-weight: 700;
|
||||
padding-left: 5px;
|
||||
border-left: 5px solid #faa231;
|
||||
padding-left: .0625rem;
|
||||
border-left: .0625rem solid #faa231;
|
||||
}
|
||||
.details .articel .right ul,
|
||||
.more .list .right ul {
|
||||
padding: 0 15px 15px 15px;
|
||||
padding: 0 .1875rem .1875rem .1875rem;
|
||||
/* display: inline-block; */
|
||||
/* display: flex;
|
||||
flex-direction: column;
|
||||
@ -1079,9 +1079,9 @@ export default {
|
||||
.more .list .right ul li {
|
||||
display: inline-block;
|
||||
/* height: 50px; */
|
||||
padding: 10px 0;
|
||||
width: 230px;
|
||||
border-bottom: 1px solid rgba(0,0,0,.1);
|
||||
padding: .125rem 0;
|
||||
width: 2.875rem;
|
||||
border-bottom: .0125rem solid rgba(0,0,0,.1);
|
||||
}
|
||||
.details .articel .right ul li:nth-child(5),
|
||||
.more .list .right ul li:nth-child(5) {
|
||||
@ -1116,26 +1116,26 @@ export default {
|
||||
display: inline;
|
||||
/* font-size: 24px; */
|
||||
/* height: 30px; */
|
||||
line-height: 26px;
|
||||
line-height: .325rem;
|
||||
margin: auto 0;
|
||||
}
|
||||
.details .articel .right ul li h5,
|
||||
.more .list .right ul li h5 {
|
||||
display: inline;
|
||||
/* height: 30px; */
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
color: #494950;
|
||||
}
|
||||
.details .articel .right ul li em,
|
||||
.more .list .right ul li em {
|
||||
display: inline;
|
||||
float: right;
|
||||
line-height: 20px;
|
||||
line-height: .25rem;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
font-size: .15rem;
|
||||
/* font-weight: 300; */
|
||||
margin: auto 0 0 10px;
|
||||
margin: auto 0 0 .125rem;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
|
||||
|
||||
@ -251,7 +251,7 @@ export default {
|
||||
} */
|
||||
.report .box-bottom {
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
height: 12.5rem;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.report .box-bottom .box {
|
||||
@ -262,9 +262,9 @@ export default {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
padding: 20px 30px;
|
||||
width: 15rem;
|
||||
height: 10rem;
|
||||
padding: .25rem .375rem;
|
||||
/* border: 1px solid red; */
|
||||
/* background-color: #fff; */
|
||||
/* -webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
@ -272,23 +272,23 @@ export default {
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1); */
|
||||
}
|
||||
.box .report-content {
|
||||
width: 1140px;
|
||||
height: 640px;
|
||||
width: 14.25rem;
|
||||
height: 8rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.box .report-content textarea {
|
||||
resize: none;
|
||||
width: 1140px;
|
||||
height: 640px;
|
||||
width: 14.25rem;
|
||||
height: 8rem;
|
||||
background-color: #FFF;
|
||||
font-size: 18px;
|
||||
font-size: .225rem;
|
||||
color: #333;
|
||||
border-radius: 4px;
|
||||
border: 1px solid transparent;
|
||||
padding: 20px;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
border-radius: .05rem;
|
||||
border: .0125rem solid transparent;
|
||||
padding: .25rem;
|
||||
-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);
|
||||
/* margin-bottom: 12px; */
|
||||
/* -webkit-appearance: none; */
|
||||
outline: 0;
|
||||
@ -297,27 +297,27 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 1140px;
|
||||
height: 100px;
|
||||
width: 14.25rem;
|
||||
height: 1.25rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box ul li {
|
||||
/* border: 1px solid red; */
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
margin: 20px 0;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
width: 4.375rem;
|
||||
height: .75rem;
|
||||
margin: .25rem 0;
|
||||
-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);
|
||||
}
|
||||
input {
|
||||
width: 350px;
|
||||
height: 60px;
|
||||
padding: 20px;
|
||||
width: 4.375rem;
|
||||
height: .75rem;
|
||||
padding: .25rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: .05rem;
|
||||
background-color: #FFF;
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
/* background-color: transparent; */
|
||||
/* margin-bottom: 12px; */
|
||||
color: #999999;
|
||||
@ -328,13 +328,13 @@ input::-webkit-input-placeholder {
|
||||
ul li:nth-child(1) {
|
||||
position: relative;
|
||||
/* width: 440px; */
|
||||
height: 60px;
|
||||
height: .75rem;
|
||||
/* margin-bottom: 12px; */
|
||||
/* background-color: pink; */
|
||||
}
|
||||
ul li:nth-child(2) {
|
||||
/* width: 440px; */
|
||||
height: 60px;
|
||||
height: .75rem;
|
||||
/* margin-bottom: 12px; */
|
||||
}
|
||||
ul li:nth-child(1) input {
|
||||
@ -344,9 +344,9 @@ ul li:nth-child(1) span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
width: 1.5rem;
|
||||
height: .75rem;
|
||||
line-height: .75rem;
|
||||
text-align: center;
|
||||
/* background-color: pink; */
|
||||
cursor: pointer;
|
||||
@ -356,24 +356,24 @@ ul li:nth-child(1) span:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
ul li:nth-child(3) {
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
margin: 20px 0;
|
||||
width: 3.75rem;
|
||||
height: .75rem;
|
||||
margin: .25rem 0;
|
||||
/* margin-top: 30px; */
|
||||
}
|
||||
ul li:nth-child(3) button {
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
width: 3.75rem;
|
||||
height: .75rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: .05rem;
|
||||
background-color: #fcbb53;
|
||||
font-size: 20px;
|
||||
font-size: .25rem;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
ul li:nth-child(3) button:hover,
|
||||
.success button:hover {
|
||||
font-size: 24px;
|
||||
font-size: .3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.mask {
|
||||
@ -394,38 +394,38 @@ ul li:nth-child(3) button:hover,
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
padding: 20px 30px;
|
||||
width: 5.75rem;
|
||||
height: 5.75rem;
|
||||
padding: .25rem .375rem;
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-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);
|
||||
}
|
||||
.success i {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 15px 100px;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin: .1875rem 1.25rem;
|
||||
background: url(/assets/img/report-icon.png) no-repeat;
|
||||
background-size: cover;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.success p {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: .375rem;
|
||||
line-height: .375rem;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-size: .225rem;
|
||||
}
|
||||
.success button {
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
margin-top: 40px;
|
||||
width: 5rem;
|
||||
height: .625rem;
|
||||
margin-top: .5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: .05rem;
|
||||
background-color: #01b2aa;
|
||||
font-size: 20px;
|
||||
font-size: .25rem;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -191,70 +191,70 @@ export default {
|
||||
position: relative;
|
||||
background: url(/assets/img/shoufei-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
height: 1200px;
|
||||
height: 15rem;
|
||||
/* font-family: '楷体'; */
|
||||
}
|
||||
.shou-fei .box-top {
|
||||
position: absolute;
|
||||
top: 140px;
|
||||
top: 1.75rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
width: 6.25rem;
|
||||
height: 1.25rem;
|
||||
/* background-color: pink; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shou-fei .box-top h4 {
|
||||
width: 500px;
|
||||
font-size: 32px;
|
||||
width: 6.25rem;
|
||||
font-size: .4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
letter-spacing: .05rem;
|
||||
color: #74491a;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: .1875rem;
|
||||
}
|
||||
.shou-fei .box-top p {
|
||||
width: 500px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 5px;
|
||||
width: 6.25rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
.shou-fei .box-bottom {
|
||||
position: absolute;
|
||||
top: 270px;
|
||||
top: 3.375rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 1200px;
|
||||
height: 900px;
|
||||
width: 15rem;
|
||||
height: 11.25rem;
|
||||
/* border: 1px solid red; */
|
||||
|
||||
}
|
||||
.shou-fei .box-bottom .box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
height: 810px;
|
||||
width: 3.5rem;
|
||||
height: 10.125rem;
|
||||
padding: 0px 0px;
|
||||
background-color: #FFF;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-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 .top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
/* flex-wrap: wrap; */
|
||||
width: 280px;
|
||||
width: 3.5rem;
|
||||
/* height: 200px; */
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
.box .top .bjys {
|
||||
width: 280px;
|
||||
height: 50px;
|
||||
width: 3.5rem;
|
||||
height: .625rem;
|
||||
background: linear-gradient(to right, rgba(237,90,36,.2), rgba(243,143,30,.2));
|
||||
color: #5e3603;
|
||||
}
|
||||
@ -264,24 +264,24 @@ export default {
|
||||
}
|
||||
|
||||
.box .top h4 {
|
||||
width: 280px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 3.5rem;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-size: .275rem;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
.box .top .price {
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
height: .625rem;
|
||||
font-size: .225rem;
|
||||
letter-spacing: .025rem;
|
||||
text-align: center;
|
||||
margin: 15px auto;
|
||||
margin: .1875rem auto;
|
||||
color: #f77333;
|
||||
}
|
||||
.box .top .price em {
|
||||
font-size: 36px;
|
||||
font-size: .45rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box .top .jianjie {
|
||||
@ -290,11 +290,11 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
height: 110px;
|
||||
margin: 0 20px;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
height: 1.375rem;
|
||||
margin: 0 .25rem;
|
||||
padding: .125rem;
|
||||
border-radius: .075rem;
|
||||
font-size: .1875rem;
|
||||
color: #5e3603;
|
||||
background-color: #fff6e7;
|
||||
text-align: justify;
|
||||
@ -302,44 +302,44 @@ export default {
|
||||
}
|
||||
.box .top .jianjie i {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 115px;
|
||||
top: -0.125rem;
|
||||
left: 1.4375rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left:10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom:10px solid #feedcc;
|
||||
border-left:.125rem solid transparent;
|
||||
border-right: .125rem solid transparent;
|
||||
border-bottom:.125rem solid #feedcc;
|
||||
}
|
||||
.box .serve {
|
||||
margin: 5px 20px;
|
||||
margin: .0625rem .25rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box .serve h5 {
|
||||
font-size: 18px;
|
||||
font-size: .225rem;
|
||||
font-weight: 700;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
height: .45rem;
|
||||
line-height: .45rem;
|
||||
color: #694618;
|
||||
}
|
||||
.box .serve .serveList {
|
||||
/* background-color: skyblue; */
|
||||
margin: 5px 0 0 10px;
|
||||
height: 290px;
|
||||
margin: .0625rem 0 0 .125rem;
|
||||
height: 3.625rem;
|
||||
}
|
||||
.box .serve .serveList li {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
display: flex;
|
||||
margin: 5px 0;
|
||||
margin: .0625rem 0;
|
||||
}
|
||||
.box .serve .serveList li i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
line-height: .25rem;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border-radius: .125rem;
|
||||
color: #f6783a;
|
||||
margin: 3px 8px;
|
||||
margin: .0375rem .1rem;
|
||||
background-color: #fee9d1;
|
||||
}
|
||||
.box .serve .serveList li .serveContent {
|
||||
@ -348,34 +348,34 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
.box .flow {
|
||||
margin: 0 20px 5px 20px;
|
||||
margin: 0 .25rem .0625rem .25rem;
|
||||
/* background-color: rgb(149, 238, 149); */
|
||||
}
|
||||
.box .flow h5 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
height: .45rem;
|
||||
line-height: .45rem;
|
||||
color: #694618;
|
||||
}
|
||||
.box .flow .flowList {
|
||||
/* background-color: skyblue; */
|
||||
margin: 5px 0 0 10px;
|
||||
margin: .0625rem 0 0 .125rem;
|
||||
}
|
||||
.box .flow .flowList li {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
display: flex;
|
||||
margin: 5px 0;
|
||||
margin: .0625rem 0;
|
||||
}
|
||||
.box .flow .flowList li i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
line-height: .25rem;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
border-radius: .125rem;
|
||||
color: #f6783a;
|
||||
margin: 3px 8px;
|
||||
margin: .0375rem .1rem;
|
||||
background-color: #fee9d1;
|
||||
}
|
||||
.box .flow .flowList li .flowContent {
|
||||
@ -385,31 +385,31 @@ export default {
|
||||
}
|
||||
.box .fgx {
|
||||
display: flex;
|
||||
margin: 5px 20px;
|
||||
width: 240px;
|
||||
height: 2px;
|
||||
margin: .0625rem .25rem;
|
||||
width: 3rem;
|
||||
height: .025rem;
|
||||
background-color: #f9f9f9;
|
||||
/* background-color: red; */
|
||||
}
|
||||
.box .chec {
|
||||
margin: 0px 20px;
|
||||
margin: 0px .25rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.box .chec .checList {
|
||||
margin: 0 5px;
|
||||
margin: 0 .0625rem;
|
||||
}
|
||||
.box .chec .checList li {
|
||||
display: flex;
|
||||
height: 26px;
|
||||
height: .325rem;
|
||||
}
|
||||
.box .chec .checList li input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 4px 10px 4px 11px;
|
||||
width: .2rem;
|
||||
height: .2rem;
|
||||
margin: .05rem .125rem .05rem .1375rem;
|
||||
}
|
||||
.box .chec .checList li p {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
font-size: .175rem;
|
||||
line-height: .325rem;
|
||||
color: #6b4516;
|
||||
}
|
||||
|
||||
@ -420,10 +420,10 @@ export default {
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
top: .325rem;
|
||||
background-color: rgba(255,232,192,.9);
|
||||
color: #5F3B00;
|
||||
padding: 10px;
|
||||
padding: .125rem;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@ -45,40 +45,6 @@
|
||||
</div>
|
||||
<div class="row2">
|
||||
<em>开发语言：</em>
|
||||
<!-- <ul>
|
||||
<li>Java</li>
|
||||
<li>C语言</li>
|
||||
<li>Python</li>
|
||||
</ul> -->
|
||||
<!-- <div>
|
||||
<el-radio-group v-model="radio1" size="small">
|
||||
<el-radio-button class="cssys" label="Java" value="Java" />
|
||||
<el-radio-button class="cssys" label="C语言" value="Washington" />
|
||||
<el-radio-button class="cssys" label="C++" value="Los Angeles" />
|
||||
<el-radio-button class="cssys" label="Python" value="Chicago" />
|
||||
<el-radio-button class="cssys" label="Go" value="Chicago" />
|
||||
<el-radio-button class="cssys" label="JavaScript" value="Chicago" />
|
||||
<el-radio-button class="cssys" label="Java2" value="Java" />
|
||||
<el-radio-button class="cssys" label="C语言2" value="Washington" />
|
||||
<el-radio-button class="cssys" label="C++2" value="Los Angeles" />
|
||||
<el-radio-button class="cssys" label="Python2" value="Chicago" />
|
||||
<el-radio-button class="cssys" label="Go2" value="Chicago" />
|
||||
<el-radio-button class="cssys" label="JavaScript2" value="Chicago" />
|
||||
<el-radio-button class="cssys" label="Java3" value="Java" />
|
||||
<el-radio-button class="cssys" label="C语言3" value="Washington" />
|
||||
<el-radio-button class="cssys" label="C++3" value="Los Angeles" />
|
||||
<el-radio-button class="cssys" label="Python3" value="Chicago" />
|
||||
<el-radio-button class="cssys" label="Go3" value="Chicago" />
|
||||
<el-radio-button class="cssys" label="JavaScript3" value="Chicago" />
|
||||
|
||||
</el-radio-group>
|
||||
</div> -->
|
||||
|
||||
<!-- <label for=""></label>
|
||||
<input type="radio" value="Java" name="Java" class="radio-button"> -->
|
||||
|
||||
<!-- <Radio :options="options" v-model:value="value" button /> -->
|
||||
|
||||
<div class="language-buttons">
|
||||
<button
|
||||
v-for="(language, index) in visibleLanguages"
|
||||
@ -151,7 +117,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<p><em>￥</em><i>298.00</i>/件</p>
|
||||
<button type="button">立即抢购</button>
|
||||
<a href="https://www.aimzhu.com/operator/">立即抢购</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -178,7 +144,7 @@
|
||||
<el-table-column prop="距离下架" label="距离下架" />
|
||||
</el-table>
|
||||
|
||||
<button class="goBuy">去购买</button>
|
||||
<a class="goBuy" href="https://www.aimzhu.com/operator/">去购买</a>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@ -466,16 +432,16 @@ export default {
|
||||
.transaction-center .box-top {
|
||||
/* padding-top: 80px; */
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
height: 4.75rem;
|
||||
|
||||
}
|
||||
.transaction-center .box-top .ys {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 1rem;
|
||||
}
|
||||
.transaction-center .box-top .bj {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 3.75rem;
|
||||
background: url(/assets/img/transactioncenter-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -485,35 +451,35 @@ export default {
|
||||
/* height: 500px; */
|
||||
}
|
||||
.transaction-center .box-bottom .center {
|
||||
margin: -180px auto 50px auto;
|
||||
width: 1200px;
|
||||
margin: -2.25rem auto .625rem auto;
|
||||
width: 15rem;
|
||||
/* height: 800px; */
|
||||
/* border: 1px solid red; */
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.center .box1 {
|
||||
width: 100%;
|
||||
height: 276px;
|
||||
height: 3.45rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 15px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 .1875rem rgba(0,0,0,.1);
|
||||
}
|
||||
.center .box1 .title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: .625rem;
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 0.5px solid #ebeef5;
|
||||
border-bottom: .0063rem solid #ebeef5;
|
||||
}
|
||||
.center .box1 .title span {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
width: 2.5rem;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
background-color: #fafafa;
|
||||
border-right: 1px solid #ebeef5;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
border-right: .0125rem solid #ebeef5;
|
||||
border-bottom: .0125rem solid #ebeef5;
|
||||
}
|
||||
.center .box1 .title span:hover {
|
||||
cursor: pointer;
|
||||
@ -526,9 +492,9 @@ export default {
|
||||
|
||||
}
|
||||
.center .box1 .content1 {
|
||||
width: 1200px;
|
||||
height: 226px;
|
||||
padding: 10px;
|
||||
width: 15rem;
|
||||
height: 2.825rem;
|
||||
padding: .125rem;
|
||||
}
|
||||
/* .center .box1 .content1 .row2 .cssys {
|
||||
border: 1px solid #dcdfe6;
|
||||
@ -548,16 +514,16 @@ export default {
|
||||
.center .box1 .content1 .row3 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
margin: 20px 10px;
|
||||
height: .5rem;
|
||||
margin: .25rem .125rem;
|
||||
}
|
||||
.center .box1 .content1 .row3 span {
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
margin-right: .1875rem;
|
||||
}
|
||||
.center .box1 .content1 .row3 span input {
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 4px;
|
||||
border: .0125rem solid #CCC;
|
||||
border-radius: .05rem;
|
||||
color: #606266;
|
||||
}
|
||||
input::-webkit-input-placeholder {
|
||||
@ -565,7 +531,7 @@ input::-webkit-input-placeholder {
|
||||
}
|
||||
.center .box1 .content1 .row3 span input:focus,
|
||||
.center .box1 .content1 .row3 span input:hover {
|
||||
border: 1px solid #409eff;
|
||||
border: .0125rem solid #409eff;
|
||||
}
|
||||
/* .el-input {
|
||||
--el-input-focus-border: 1px solid #e86f12;
|
||||
@ -582,16 +548,16 @@ input::-webkit-input-placeholder {
|
||||
} */
|
||||
|
||||
.center .box1 .content1 .row3 span input[type=text] {
|
||||
font-size: 15px;
|
||||
padding-left: 10px;
|
||||
font-size: .1875rem;
|
||||
padding-left: .125rem;
|
||||
}
|
||||
.center .box1 .content1 .row3 span input[type=date] {
|
||||
width: 150px;
|
||||
font-size: 15px;
|
||||
width: 1.875rem;
|
||||
font-size: .1875rem;
|
||||
}
|
||||
.center .box1 .content1 .row3 span input[type=date]:hover,
|
||||
.center .box1 .content1 .row3 span input[type=date]:focus {
|
||||
border: 1px solid #CCC;
|
||||
border: .0125rem solid #CCC;
|
||||
}
|
||||
|
||||
/* .center .box1 .content1 .row3 span .startDate {
|
||||
@ -606,15 +572,15 @@ input::-webkit-input-placeholder {
|
||||
border: 2px solid red;
|
||||
} */
|
||||
.center .box1 .content1 .row3 button{
|
||||
height: 40px;
|
||||
padding: 6px 30px;
|
||||
height: .5rem;
|
||||
padding: .075rem .375rem;
|
||||
/* margin-left: 30px; */
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center .box1 .content1 .row3 .search {
|
||||
position: absolute;
|
||||
right: 200px;
|
||||
right: 2.5rem;
|
||||
background-color: #552c0e;
|
||||
color: #FFF;
|
||||
|
||||
@ -622,27 +588,27 @@ input::-webkit-input-placeholder {
|
||||
.center .box1 .content1 .row3 .reset{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 180px;
|
||||
width: 2.25rem;
|
||||
}
|
||||
.center .box1 .content1 .row1 em,
|
||||
.center .box1 .content1 .row2 em,
|
||||
.center .box1 .content1 .row3 em {
|
||||
padding: 6px 5px;
|
||||
width: 110px;
|
||||
padding: .075rem .0625rem;
|
||||
width: 1.375rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.sort-buttons,
|
||||
.language-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px; /* 按钮之间的间隔 */
|
||||
gap: .125rem; /* 按钮之间的间隔 */
|
||||
}
|
||||
.sort-button,
|
||||
.language-button {
|
||||
padding: 6px 30px;
|
||||
padding: .075rem .375rem;
|
||||
/* border: 1px solid #ccc; */
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: .05rem;
|
||||
background-color: #ffeedc;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
@ -660,47 +626,47 @@ input::-webkit-input-placeholder {
|
||||
}
|
||||
|
||||
.more-button {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: .1rem .15rem;
|
||||
border: .0125rem solid #ccc;
|
||||
border-radius: .05rem;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.popup1 {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
width: 1050px;
|
||||
top: .5625rem;
|
||||
width: 13.125rem;
|
||||
/* max-width: 1050px; */
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
border: .0125rem solid #ccc;
|
||||
padding: .125rem;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
gap: .125rem;
|
||||
box-shadow: 0 .025rem .05rem rgba(0, 0, 0, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
.popup {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
width: 1050px;
|
||||
top: .5625rem;
|
||||
width: 13.125rem;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
border: .0125rem solid #ccc;
|
||||
padding: .125rem;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
gap: .125rem;
|
||||
box-shadow: 0 .025rem .05rem rgba(0, 0, 0, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: .1rem .15rem;
|
||||
border: .0125rem solid #ccc;
|
||||
border-radius: .05rem;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
@ -713,9 +679,9 @@ input::-webkit-input-placeholder {
|
||||
|
||||
|
||||
.center .box1 .content2 {
|
||||
width: 1200px;
|
||||
height: 226px;
|
||||
padding: 10px;
|
||||
width: 15rem;
|
||||
height: 2.825rem;
|
||||
padding: .125rem;
|
||||
}
|
||||
.center .box1 .content2 .bj {
|
||||
display: flex;
|
||||
@ -728,109 +694,115 @@ input::-webkit-input-placeholder {
|
||||
.center .box1 .content2 .bj .left {
|
||||
display: felx;
|
||||
flex-direction: column;
|
||||
width: 360px;
|
||||
height: 160px;
|
||||
margin: 20px 40px;
|
||||
width: 4.5rem;
|
||||
height: 2rem;
|
||||
margin: .25rem .5rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.center .box1 .content2 .bj .left .headline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 1rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.center .box1 .content2 .bj .left .headline h3 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 15px 0;
|
||||
height: .625rem;
|
||||
line-height: .625rem;
|
||||
margin: .1875rem 0;
|
||||
color: #e79855;
|
||||
font-size: 28px;
|
||||
font-size: .35rem;
|
||||
font-weight: 700;
|
||||
margin-right: 20px;
|
||||
margin-right: .25rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.center .box1 .content2 .bj .left .headline em {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 20px;
|
||||
margin: 22px 0;
|
||||
font-size: 15px;
|
||||
height: .45rem;
|
||||
line-height: .45rem;
|
||||
padding: 0 .25rem;
|
||||
margin: .275rem 0;
|
||||
font-size: .1875rem;
|
||||
color: #FFF;
|
||||
background-color: #fa9641;
|
||||
border-top-left-radius: 18px;
|
||||
border-bottom-left-radius: 18px;
|
||||
border-top-right-radius: 16px;
|
||||
border-top-left-radius: .225rem;
|
||||
border-bottom-left-radius: .225rem;
|
||||
border-top-right-radius: .2rem;
|
||||
}
|
||||
.center .box1 .content2 .bj .left .text p {
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
font-size: .1875rem;
|
||||
line-height: .3125rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.center .box1 .content2 .bj .right {
|
||||
width: 260px;
|
||||
height: 150px;
|
||||
margin: 25px 60px;
|
||||
width: 3.25rem;
|
||||
height: 1.875rem;
|
||||
margin: .3125rem .75rem;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
.center .box1 .content2 .bj .right p {
|
||||
font-size: 20px;
|
||||
font-size: .25rem;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
margin-top: .375rem;
|
||||
}
|
||||
.center .box1 .content2 .bj .right p em {
|
||||
color: #e89954;
|
||||
}
|
||||
.center .box1 .content2 .bj .right p i {
|
||||
font-size: 28px;
|
||||
font-size: .35rem;
|
||||
color: #e89954;
|
||||
}
|
||||
.center .box1 .content2 .bj .right button {
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
margin: 10px 55px;
|
||||
.center .box1 .content2 .bj .right a{
|
||||
display: block;
|
||||
width: 1.875rem;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
text-align: center;
|
||||
margin: .125rem .6875rem;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
font-size: .175rem;
|
||||
color: #FFF;
|
||||
background-color: #552c0e;
|
||||
}
|
||||
.center .box1 .content2 .bj .right button:hover {
|
||||
.center .box1 .content2 .bj .right a:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.center .box2 {
|
||||
margin: 15px;
|
||||
margin: .1875rem;
|
||||
/* background-color: pink; */
|
||||
}
|
||||
.center .box2 p {
|
||||
font-size: 16px;
|
||||
font-size: .2rem;
|
||||
}
|
||||
.center .box2 p em {
|
||||
color: #3fa1d3;
|
||||
}
|
||||
.center .box3 .content111 {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: .375rem;
|
||||
}
|
||||
.center .box3 .content111 .table {
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
.center .box3 .content111 .goBuy {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
padding: 8px 12px;
|
||||
padding: .1rem .15rem;
|
||||
border: none;
|
||||
background-color: #fa7c38;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.center .box3 .content111 .pagination {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-right: 30px;
|
||||
margin-right: .375rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -111,7 +111,7 @@ export default {
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 605px;
|
||||
height: 7.5625rem;
|
||||
background: url(/assets/img/zhengshu-bj.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -119,21 +119,21 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 1000px;
|
||||
height: 150px;
|
||||
width: 12.5rem;
|
||||
height: 1.875rem;
|
||||
margin: 0 auto;
|
||||
/* border: 2px solid red; */
|
||||
}
|
||||
.zheng-shu .box-top h4 {
|
||||
width: 500px;
|
||||
font-size: 30px;
|
||||
width: 6.25rem;
|
||||
font-size: .375rem;
|
||||
color: #74491a;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: .125rem;
|
||||
}
|
||||
.zheng-shu .box-top p {
|
||||
width: 500px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 5px;
|
||||
width: 6.25rem;
|
||||
font-size: .2rem;
|
||||
letter-spacing: .0625rem;
|
||||
color: #9a7148;
|
||||
}
|
||||
.zheng-shu .box-bottom {
|
||||
@ -141,22 +141,22 @@ export default {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
height: 7.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.zheng-shu .box-bottom .box {
|
||||
/* position: absolute; */
|
||||
position: relative;
|
||||
top: -200px;
|
||||
bottom: 50px;
|
||||
top: -2.5rem;
|
||||
bottom: .625rem;
|
||||
display: flex;
|
||||
width: 1000px;
|
||||
height: 750px;
|
||||
width: 12.5rem;
|
||||
height: 9.375rem;
|
||||
background-color: #FFF;
|
||||
padding: 40px;
|
||||
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
-moz-box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.1);
|
||||
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);
|
||||
}
|
||||
|
||||
.paging {
|
||||
@ -171,17 +171,17 @@ export default {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 880px;
|
||||
height: 600px;
|
||||
margin: 10px auto;
|
||||
width: 11rem;
|
||||
height: 7.5rem;
|
||||
margin: .125rem auto;
|
||||
/* background-color: pink; */
|
||||
/* margin-bottom: 50px; */
|
||||
|
||||
}
|
||||
.picture {
|
||||
width: 205px;
|
||||
height: 270px;
|
||||
margin-right: 20px;
|
||||
width: 2.5625rem;
|
||||
height: 3.375rem;
|
||||
margin-right: .25rem;
|
||||
/* background-color: skyblue; */
|
||||
}
|
||||
.picture:nth-child(4n) {
|
||||
@ -191,10 +191,10 @@ export default {
|
||||
position: absolute;
|
||||
/* position: relative; */
|
||||
/* top: 10px; */
|
||||
bottom: 10px;
|
||||
bottom: .125rem;
|
||||
right: 0px;
|
||||
/* margin-top: 15px; */
|
||||
width: 350px;
|
||||
width: 4.375rem;
|
||||
text-align: right;
|
||||
/* border: 1px solid green; */
|
||||
}
|
||||
|
||||
85
src/components/guizeTest.html
Normal file
85
src/components/guizeTest.html
Normal file
@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
|
||||
<title id="HTMLBT">AI秒著引擎</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
/* border: 1px solid #333; */
|
||||
padding-top: 50px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
#title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
#content {
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<h2 id="title"></h2>
|
||||
<!-- <h2 id="title" v-html="title"></h2> -->
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script>
|
||||
const htmlBT = document.querySelector('#HTMLBT')
|
||||
const content = document.querySelector('#content')
|
||||
const title = document.querySelector('#title')
|
||||
axios.get('https://www.aimzhu.com/operator/app/agreementportal/getrelease/89c4ca41-a44e-4ae2-bad3-6fa6536dd453').then(response => {
|
||||
// this.data = response.data;
|
||||
// this.title = response.data.title;
|
||||
// this.data = response.data.content;
|
||||
htmlBT.innerHTML = response.data.title
|
||||
title.innerHTML = response.data.title
|
||||
content.innerHTML = response.data.content
|
||||
console.log(response.data);
|
||||
|
||||
window.open(`https://www.aimzhu.com/operator/route/content/view?agreementId
|
||||
=${this.contentId}&title=${this.title}`);
|
||||
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -10,6 +10,18 @@
|
||||
<link rel="stylesheet" href="./assets/font/iconfont.css">
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
<style>
|
||||
@media screen and (max-width: 1920px) {
|
||||
html {
|
||||
font-size: 66px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1360px) {
|
||||
html {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
@ -24,13 +36,13 @@
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 100vw;
|
||||
height: 80px;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.top .left {
|
||||
width: 260px;
|
||||
height: 50px;
|
||||
margin: 15px 50px;
|
||||
width: 3.25rem;
|
||||
height: .625rem;
|
||||
margin: .1875rem .625rem;
|
||||
}
|
||||
|
||||
.top .left .logo {
|
||||
@ -45,16 +57,16 @@
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
margin: 20px 30px;
|
||||
width: 2.5rem;
|
||||
height: .5rem;
|
||||
margin: .25rem .375rem;
|
||||
}
|
||||
|
||||
.top .right #login {
|
||||
font-size: 16px;
|
||||
padding: 5px 20px;
|
||||
font-size: .2rem;
|
||||
padding: .0625rem .25rem;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
border-radius: .3125rem;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
color: #42210B;
|
||||
}
|
||||
@ -67,10 +79,10 @@
|
||||
}
|
||||
|
||||
.top .right #goHomePage {
|
||||
font-size: 16px;
|
||||
padding: 5px 20px;
|
||||
font-size: .2rem;
|
||||
padding: .0625rem .25rem;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
border-radius: .3125rem;
|
||||
color: #FFF;
|
||||
background: #42210B;
|
||||
}
|
||||
@ -87,11 +99,11 @@
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 500px;
|
||||
height: 550px;
|
||||
width: 6.25rem;
|
||||
height: 6.875rem;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
border-radius: .25rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.loginBox .title {
|
||||
@ -99,24 +111,24 @@
|
||||
}
|
||||
|
||||
.loginBox .title h3 {
|
||||
font-size: 22px;
|
||||
font-size: .275rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loginBox .title span {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 5px;
|
||||
width: .875rem;
|
||||
height: .0625rem;
|
||||
background-color: #fda633;
|
||||
margin-left: 30px;
|
||||
margin-top: 5px;
|
||||
margin-left: .375rem;
|
||||
margin-top: .0625rem;
|
||||
}
|
||||
|
||||
.loginBox .msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox {
|
||||
@ -127,20 +139,20 @@
|
||||
.loginBox .msg .msgBox li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
height: .625rem;
|
||||
margin-bottom: .25rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-indent: 15px;
|
||||
height: .625rem;
|
||||
text-indent: .1875rem;
|
||||
border: none;
|
||||
border: 1.5px solid #CCC;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
border: .0187rem solid #CCC;
|
||||
border-radius: .1rem;
|
||||
font-size: .1875rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@ -168,25 +180,25 @@
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:focus-within {
|
||||
border: 1.25px solid #fa911e;
|
||||
border: .0156rem solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li input:hover {
|
||||
border: 1.25px solid #fa911e;
|
||||
border: .0156rem solid #fa911e;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
right: .125rem;
|
||||
width: 1.25rem;
|
||||
height: .375rem;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
letter-spacing: 2px;
|
||||
margin: 10px 0;
|
||||
letter-spacing: .025rem;
|
||||
margin: .125rem 0;
|
||||
cursor: pointer;
|
||||
color: #0095ff;
|
||||
font-size: 15px;
|
||||
font-size: .1875rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(2) button:hover {
|
||||
@ -195,11 +207,11 @@
|
||||
|
||||
.loginBox .msg .msgBox li:nth-child(3) i {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
top: .1875rem;
|
||||
right: .125rem;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@ -213,20 +225,20 @@
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
height: .5rem;
|
||||
line-height: .5rem;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
font-size: .175rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement input {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px 0;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
margin: .125rem 0;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
font-size: .15rem;
|
||||
margin-right: .125rem;
|
||||
}
|
||||
|
||||
.loginBox .msg .agreement a {
|
||||
@ -239,13 +251,13 @@
|
||||
|
||||
.loginBox .msg #register {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: .625rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: .1rem;
|
||||
background-color: #C0C0C0;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
margin-top: 10px;
|
||||
font-size: .225rem;
|
||||
margin-top: .125rem;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -255,11 +267,11 @@
|
||||
}
|
||||
|
||||
.loginBox .msg .register:not(.register-disabled):hover {
|
||||
font-size: 20px;
|
||||
font-size: .25rem;
|
||||
font-weight: 700;
|
||||
-webkit-box-shadow: 0 0 10px #fda633;
|
||||
-moz-box-shadow: 0 0 10px #fda633;
|
||||
box-shadow: 0 0 10px #fda633;
|
||||
-webkit-box-shadow: 0 0 .125rem #fda633;
|
||||
-moz-box-shadow: 0 0 .125rem #fda633;
|
||||
box-shadow: 0 0 .125rem #fda633;
|
||||
/* cursor: pointer; */
|
||||
background-color: #fda633;
|
||||
}
|
||||
@ -270,9 +282,9 @@
|
||||
justify-content: end;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
height: .5rem;
|
||||
margin-top: .125rem;
|
||||
font-size: .1875rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
@ -87,4 +87,16 @@ h6 {
|
||||
/* .router-link-active {
|
||||
font-weight: 700;
|
||||
color: #F7931E;
|
||||
} */
|
||||
} */
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
html {
|
||||
font-size: 66px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1360px) {
|
||||
html {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user