这篇博客详细介绍了如何使用Vue.js来构建一个个人所得税计算器，涵盖了5000元和3500元起征点的变化，并确保了在移动端的兼容性。CSS样式定义了界面布局和颜色，HTML结构设置了组件结构，Vue.js部分则实现了计算逻辑和界面交互。在移动端适配上，通过媒体查询调整了布局以适应不同屏幕尺寸。
使用vuejs实现个人所得税的功能，包含5000起点和3500起点之间个税的变化，并且兼容移动端。
css部分如下：
#saper-container {
width:86%;
margin:0 auto;
}
#saper-container>.header {
margin:10px 2%;
}
#saper-bd>.subfiled,#gsqd>.gswq>h3,.gssqw>h3 {
background:#66CDAA;
}
#saper-bd>.subfiled>h3 {
height:30px;
line-height:30px;
margin-left:20px;
}
#saper-bd>.subfiled-content {
width:100%;
height:140px;
}
#saper-bd>.subfiled-content>.kv-item{
margin-left:20px;
height:70px;
}
/ 个税5000和个税3500对比
/
#gsqd {
width:100%;
}
#gsqd>.gswq {
width:50%;
float:left;
border: 1px solid #C1D3DE;
height:240px;
}
#gsqd>.gswq>h3 {
padding-left:20px;
height:30px;
line-height:30px;
}
#gsqd>.gswq>div {
margin-left:20px;
}
.gssqw {
width:49%;
float:left;
margin-left:3px;
height:240px;
border: 1px solid #C1D3DE;
}
.gssqw>.subfiled>h3 {
background:#66CDAA;
height:30px;
line-height:30px;
padding-left:20px;
}
.gssqw>.subfiled-content {
margin-left:20px;
}
.jieguo {
text-align:center;
margin-top:20px;
}
@media screen and (max-width: 480px) {
#gsqd>.gswq,#gsqd>.gssqw {
width:100%;
}
#gsqd>.gssqw {
margin-top:20px;
}
}
HTML和vuejs部分如下所示:
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
