LoginTitle组件

样式

说明

属性

样式

@mainColor -> 主题颜色

代码

{{ welcomeTitle }}
{{ mainTitle }}
export default {props:{welcomeTitle:{type:String,require:true,},mainTitle:{type:String,require:true,},},}@import url("~@/styles/init.less");.logintitle-container{width: 100%;flex-direction: column;text-align: left;position: relative;}.subtitle {font-size: 1.5rem;margin-bottom: 0.5rem;}h1 {position: relative;display: inline-block;}h1 span {z-index: 1;position: relative;}h1::after {width: 59%;height: 0.7rem;position: absolute;content: "";z-index: 0;right: -1.5rem;top: 2rem;transition: all 0.3s;background-color: @mainColor;}.icon-box {width: 100%;display: flex;justify-content: end;i:nth-child(1) {margin-right: 0.45rem;}i:nth-child(2) {margin-right: 0.7rem;}i:nth-child(1)::before {display: flex;content: "";width: 0.813rem;height: 1rem;transform-origin: left top;transform: skew(35deg);transition: all 0.3s;background-color: @mainColor;}i:nth-child(1)::after {display: flex;content: "";width: 0.813rem;height: 1rem;transform-origin: left bottom;transform: skew(-35deg);transition: all 0.3s;background-color: @mainColor;}i:nth-child(2)::before {display: flex;content: "";width: 0.813rem;height: 1rem;background-color: #efefef;transform-origin: left top;transform: skew(35deg);transition: all 0.3s;}i:nth-child(2)::after {display: flex;content: "";width: 0.813rem;height: 1rem;background-color: #efefef;transform-origin: left bottom;transform: skew(-35deg);transition: all 0.3s;}}

页面参考：yostar通行证