<template>
|
<div class="showIndexTitle-box">
|
<div class="showIndexTitle-main">
|
唐山税务运维动环一体化监控平台
|
</div>
|
<div class="zhuangshi-box1">
|
<!--<dv-decoration-2 style="width:100%;height:5px;" />-->
|
<span class="dots"></span>
|
<div class="line"></div>
|
</div>
|
<div class="zhuangshi-box2">
|
<!--<dv-decoration-2 :reverse="true" style="width:100%;height:5px;"/>-->
|
<div class="line"></div>
|
<span class="dots"></span>
|
</div>
|
<div class="zhuangshi-kuai1">
|
<span></span>
|
<span></span>
|
<span></span>
|
</div>
|
<div class="zhuangshi-kuai2">
|
<span></span>
|
<span></span>
|
<span></span>
|
</div>
|
<svg class="liudongLine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="1919" height="36"
|
viewBox="0 0 1919 36" fill="none">
|
<defs>
|
<rect id="path_0" x="0" y="0" width="1918.875" height="36"/>
|
</defs>
|
<g opacity="1" transform="translate(0 0) rotate(0 959.4375 18)">
|
<mask id="bg-mask-0" fill="white">
|
<use xlink:href="#path_0"></use>
|
</mask>
|
<g mask="url(#bg-mask-0)">
|
<path id="形状_1_拷贝" style="stroke:#172d49; stroke-width:3; stroke-opacity:1; stroke-dasharray:0 0"
|
transform="translate(1.4990000000000236 1.5) rotate(0 478.938 15)"
|
d="M0,0L583.88,0L610.88,30L957.88,30 "/>
|
<path id="形状_1_拷贝_2" style="stroke:#172d49; stroke-width:3; stroke-opacity:1; stroke-dasharray:0 0"
|
transform="translate(959.38 1.5) rotate(0 479 15)" d="M958,0L387.05,0L361.05,30L0,30 "/>
|
</g>
|
</g>
|
</svg>
|
<svg class="liudongLine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
width="1919" height="36"
|
viewBox="0 0 1919 36" fill="none">
|
<defs>
|
<rect id="path_0" x="0" y="0" width="1918.875" height="36"/>
|
</defs>
|
<defs>
|
<linearGradient id="gradient2">
|
<stop offset="0%" stop-color="#45d5d9"/>
|
<stop offset="70%" stop-color="#2b6391"/>
|
<stop offset="100%" stop-color="transparent"/>
|
</linearGradient>
|
<linearGradient id="gradient3">
|
<stop offset="0%" stop-color="transparent"/>
|
<stop offset="30%" stop-color="#2b6391"/>
|
<stop offset="100%" stop-color="#45d5d9"/>
|
|
</linearGradient>
|
<rect id="path_0" x="0" y="0" width="1918.875" height="36"/>
|
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
<use transform="translate(0 0) scale(0.006211180124223602 0.2) rotate(0)" xlink:href="#image0"/>
|
</pattern>
|
<image id="image0" width="161" height="5"
|
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKEAAAAFCAYAAAAt3IxOAAAAAXNSR0IArs4c6QAAA8BJREFUSEvNlgGO2zYQRf8fSvI6RRH0HDlPc8jkPDlHERRd2xI5v/iU5QiON7tAE6ACbJIzQ4oSn/4M8R+uPz99Kp7++ePHtvW35b7gQ/f5eo+v5YBLH//9R+3t1H4rQ9YyL3MMeOq2olbmQ5apxrggy1BKNJUplAXEoIZRQ06REQqOyDZKnAgVRkRCBwIDEgPJSGKwD/KPIwgCGCiFyCDWFknCcQAYKFKPQ/fZJgW09t90UXmd31tKvoO6TUjIfTaEZF9fU6gi29YnmaJmgS3sc1ygCqiRTCEvIBYAFVEWppaMzFLZamgpiEsymlAbMpcR0eYhHY8yj7PbinObxilrDP2+c/mn/f7X2r/g0NuveL/uCcAHfLn1Pfa5v+l9vBLEe3gcvwdom2+Q3DdMBundcpgMkG2GqE3LNLQhmuqEiLEoJoPDpicDI+Q7CEciDgpNFKduA48ARgiOm6A8Em45kZpkX/9xBOS2GCwBxeAIDBoaijA0HRYZIpPVYVrP2MNOwc3WxyuYt8t0/IwXe7+GKf9u3Q7j7iJvYxrXvu9bjLcm2wWkH0RgEkrCUKIBrIAMRjVToBrEM8QFHWjNVLh/InQReAF0EmMm9MzkbLgVnmO4dVLibMBVeB7IpuS5lprTJVpjaTHmYog3gDd4vfc9wNtT7kHeIH4Rwg26bfIG36ZguRi0b8qlwtGqhbaMRDkwOlRWqyMZBwMI4AnIo8DD2scRMoQ6CPCcqcdJI2joMK0AaoRoNTT0A4HoUFlIVpvJ6eC9ANBm/x6EjdFfQd7raz7ar23e5953v2+D2G0dblm0YRATREOidQCtthY1oZJYBFwIzG4Bng0cwecrkM9AV94LiZOBTOgZxMkwssbMgiURl8I219aycJij5mIY96q6B/IRiN73HsaHh/ZIHffv8z7V3oPq8R5Wj++BrVKxWma2MLRhVQuOTqldQVOGdDDAkiYRY0CT06/9q3o6xWoQOTIxiDkSsSqkUAgWhAqFrphAmtVCb8fnt6li0Ona5+mkuaZdXpVzVVX/v0khea9u62JaBaxTk31MJ+auWr6Xb+KAa3pTI9hEtD7Tdq62lBarmQI1ICuTFW9Ny8JCak7GEsJZLgtSJ/uc1u3bUndXuILFgDptGyw2LU7ZVjlv617pbHO6/pHa3afsH32HNyV8/WP9f0a8VIPuFfxRHeqncS3qdisnuu1al+4/mP4xXQ/EtarLjdfehlPVFrOfuz9Y+60ct7hx6nO22qzvbVefefyoRtsrys+qz157vl/h/xcfMoHQIbPwhQAAAABJRU5ErkJggg=="/>
|
<!--高斯模糊阴影，必须加filterUnits：否则有的路径不显示-->
|
<filter id="shadow2">
|
<feGaussianBlur in="SourceGraphic" stdDeviation="6"/>
|
<feBlend in="SourceGraphic" mode="normal"/>
|
</filter>
|
</defs>
|
<g opacity="1" transform="translate(0 0) rotate(0 959.4375 18)">
|
<mask id="bg-mask-0" fill="white">
|
<use xlink:href="#path_0"></use>
|
</mask>
|
<g mask="url(#bg-mask-0)">
|
<path id="path2"
|
transform="translate(1.4990000000000236 1.5) rotate(0 478.938 15)"
|
d="M0,0L583.88,0L610.88,30L957.88,30 "/>
|
<path id="path3"
|
transform="translate(959.38 1.5) rotate(0 479 15)" d="M958,0L387.05,0L361.05,30L0,30 "/>
|
<path id="高光" fill-rule="evenodd" style="fill:url(#pattern0)"
|
transform="translate(878.38 29.5)
|
rotate(0 80.5 2.5)"
|
opacity="1" d="M0,5L161,5L161,0L0,0L0,5Z "/>
|
</g>
|
|
</g>
|
</svg>
|
</div>
|
</template>
|
|
<script>
|
import {animateShanFlash} from '@/utils/animateShanFlash'
|
export default {
|
name: "showIndexTitle",
|
data() {
|
return {}
|
},
|
mounted() {
|
this.loading()
|
},
|
methods: {
|
loading() {
|
const tl = this.gsap.timeline({defaults: {duration: 0.8}})
|
tl.fromTo('.showIndexTitle-box',{
|
y:'-100%'
|
},{
|
y:0,
|
ease: 'back.out(1)',
|
autoAlpha:1,
|
duration: 1
|
},'<')
|
animateShanFlash('.zhuangshi-kuai1 span',{
|
duration: 1.2,
|
stagger: 0.4,
|
})
|
animateShanFlash('.zhuangshi-kuai2 span',{
|
duration: 1.2,
|
stagger: 0.4,
|
})
|
let logo = document.querySelector('.showIndexTitle-main')
|
let letters = logo.textContent.split('')
|
logo.innerHTML = ''
|
letters.forEach(letter => {
|
logo.innerHTML += `<span class="letter">${letter}</span>`
|
})
|
this.gsap.set('.letter',{display:'inline-block'})
|
tl.fromTo('.letter',{
|
y: '100%',
|
},{
|
y:0,
|
ease: 'back.out(3)',
|
stagger:0.06,
|
duration: 1
|
},'-=0.8')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@keyframes animate-line {
|
0% {
|
stroke-dashoffset: 1050;
|
}
|
100% {
|
stroke-dashoffset: 0;
|
}
|
}
|
@keyframes animate-line2 {
|
0% {
|
transform: translateX(100%);
|
}
|
100% {
|
transform: translateX(0);
|
}
|
}
|
@keyframes animate-line3 {
|
0% {
|
transform: translateX(-100%);
|
}
|
100% {
|
transform: translateX(0);
|
}
|
}
|
.showIndexTitle-box {
|
z-index: 9999;
|
width: 100%;
|
height: 0.3125rem /* 60/192 */;
|
background: url("../../../assets/img/showTitle-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
.showIndexTitle-main{
|
width: 100%;
|
text-align: center;
|
font-size: 0.21875rem /* 42/192 */;
|
color: #fff;
|
font-family: lishuFont;
|
letter-spacing:4px;
|
text-shadow: 3px 3px 2px rgba(59,180,194,1);
|
overflow:hidden;
|
}
|
.zhuangshi-box1{
|
width: 2.0833rem /* 400/192 */;
|
position: absolute;
|
left:0.3125rem /* 60/192 */;
|
top: 0.1042rem /* 20/192 */;
|
display: flex;
|
align-items: center;
|
overflow:hidden;
|
.dots{
|
display: block;
|
width: 4px;
|
height: 4px;
|
border-radius: 50%;
|
background: #90d6ff;
|
}
|
.line{
|
width: 100%;
|
height: 3px;
|
background:linear-gradient(-90deg,#132f3b,#144269);
|
&:before{
|
content: '';
|
width: 100%;
|
height: 3px;
|
position: absolute;
|
left: 0;
|
top: 0;
|
background:linear-gradient(90deg,#40709f,#194055,transparent,transparent);
|
animation: animate-line2 3s linear infinite;
|
}
|
}
|
}
|
.zhuangshi-box2{
|
width: 2.0833rem /* 400/192 */;
|
position: absolute;
|
right: 0.3125rem /* 60/192 */;
|
top: 0.1042rem /* 20/192 */;
|
display: flex;
|
align-items: center;
|
overflow:hidden;
|
.dots{
|
display: block;
|
width: 4px;
|
height: 4px;
|
border-radius: 50%;
|
background: #90d6ff;
|
position: relative;
|
}
|
.line{
|
width: 100%;
|
height: 3px;
|
background:linear-gradient(90deg,#132f3b,#144269);
|
&:before{
|
content: '';
|
width: 100%;
|
height: 3px;
|
position: absolute;
|
left: 0;
|
top: 0;
|
background:linear-gradient(-90deg,#40709f,#194055,transparent,transparent);
|
animation: animate-line3 3s linear infinite;
|
}
|
}
|
}
|
.zhuangshi-kuai1{
|
position: absolute;
|
right: calc(50% + 1.9271rem /* 370/192 */);
|
bottom: -0.0729rem /* -14/192 */;
|
display: flex;
|
flex-direction: row-reverse;
|
span{
|
display: block;
|
width: 0.0521rem /* 10/192 */;
|
height: 0.1042rem /* 20/192 */;
|
background:#76beff;
|
transform:skew(45deg);
|
margin: 0 0.026rem /* 5/192 */;
|
}
|
}
|
.zhuangshi-kuai2{
|
position: absolute;
|
left: calc(50% + 1.9896rem /* 382/192 */);
|
bottom: -0.0729rem /* -14/192 */;
|
display: flex;
|
span{
|
display: block;
|
width: 0.0521rem /* 10/192 */;
|
height: 0.1042rem /* 20/192 */;
|
background:#76beff;
|
transform:skew(-45deg);
|
margin: 0 0.026rem /* 5/192 */;
|
}
|
}
|
.liudongLine {
|
width: 100%;
|
position: absolute;
|
bottom: -0.09375rem /* -18/192 */;
|
left:0;
|
#path2, #path3 {
|
fill: transparent;
|
stroke-width: 4px;
|
stroke-dasharray: 1050;
|
//stroke-dashoffset: 0;
|
}
|
|
#path2 {
|
stroke: url("#gradient3");
|
animation: animate-line 5s linear infinite 0.5s;
|
}
|
|
#path3 {
|
stroke: url("#gradient2");
|
animation: animate-line 5s linear infinite 0.5s;
|
}
|
}
|
}
|
|
.liudongLine-main {
|
width: 100%;
|
display: flex;
|
}
|
</style>
|
