楼盘表样式细节优化
Showing
5 changed files
with
44 additions
and
27 deletions
| ... | @@ -302,4 +302,19 @@ ol, ul { list-style:none; } | ... | @@ -302,4 +302,19 @@ ol, ul { list-style:none; } |
| 302 | //表格操作按钮字体大小 | 302 | //表格操作按钮字体大小 |
| 303 | .iconbanli,.icondingwei{ | 303 | .iconbanli,.icondingwei{ |
| 304 | font-size: 18px; | 304 | font-size: 18px; |
| 305 | } | ||
| 306 | //实预测转换按钮样式 | ||
| 307 | /deep/.el-radio-button__inner { | ||
| 308 | border: 1px solid #00cacd!important; | ||
| 309 | color: #00cacd; | ||
| 310 | } | ||
| 311 | /deep/.el-radio-button__inner:hover { | ||
| 312 | color: #00cacd; | ||
| 313 | } | ||
| 314 | /deep/.is-active .el-radio-button__inner { | ||
| 315 | color: #fff; | ||
| 316 | } | ||
| 317 | /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner { | ||
| 318 | background-color: #00cacd; | ||
| 319 | border-color: #00cacd; | ||
| 305 | } | 320 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -716,7 +716,7 @@ | ... | @@ -716,7 +716,7 @@ |
| 716 | this.getDyztBsmList(); | 716 | this.getDyztBsmList(); |
| 717 | this.getLpbFwytAndQlxz(); | 717 | this.getLpbFwytAndQlxz(); |
| 718 | this.$nextTick(()=>{ | 718 | this.$nextTick(()=>{ |
| 719 | this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6; | 719 | this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 54; |
| 720 | this.$refs.lpbContent.lpbDataMap(this.bdcdyh); | 720 | this.$refs.lpbContent.lpbDataMap(this.bdcdyh); |
| 721 | this.$refs.lpbContent.hbsmList.push(this.hbsm) | 721 | this.$refs.lpbContent.hbsmList.push(this.hbsm) |
| 722 | }) | 722 | }) |
| ... | @@ -745,7 +745,6 @@ | ... | @@ -745,7 +745,6 @@ |
| 745 | padding:20px; | 745 | padding:20px; |
| 746 | //background-color: #eaedf5; | 746 | //background-color: #eaedf5; |
| 747 | background-color: rgb(245, 250, 254); | 747 | background-color: rgb(245, 250, 254); |
| 748 | |||
| 749 | .box{ | 748 | .box{ |
| 750 | background-color: white; | 749 | background-color: white; |
| 751 | padding: 10px 0; | 750 | padding: 10px 0; |
| ... | @@ -787,7 +786,7 @@ | ... | @@ -787,7 +786,7 @@ |
| 787 | margin-top: 20px; | 786 | margin-top: 20px; |
| 788 | background-color: #ffffff; | 787 | background-color: #ffffff; |
| 789 | display: flex; | 788 | display: flex; |
| 790 | overflow-y: scroll; | 789 | border: 1px solid #E6E6E6; |
| 791 | .lp-overview { | 790 | .lp-overview { |
| 792 | transition: 0.5s; | 791 | transition: 0.5s; |
| 793 | flex: 1; | 792 | flex: 1; |
| ... | @@ -824,6 +823,7 @@ | ... | @@ -824,6 +823,7 @@ |
| 824 | .fwyt { | 823 | .fwyt { |
| 825 | cursor: pointer; | 824 | cursor: pointer; |
| 826 | border-bottom: 1px solid #e6e6e6; | 825 | border-bottom: 1px solid #e6e6e6; |
| 826 | border-left: 1px solid #e6e6e6; | ||
| 827 | span { | 827 | span { |
| 828 | text-align: center; | 828 | text-align: center; |
| 829 | height: 100%; | 829 | height: 100%; | ... | ... |
| ... | @@ -345,7 +345,10 @@ export default { | ... | @@ -345,7 +345,10 @@ export default { |
| 345 | this.tableHeight = | 345 | this.tableHeight = |
| 346 | (document.documentElement.clientHeight || | 346 | (document.documentElement.clientHeight || |
| 347 | document.body.clientHeight) - 332; | 347 | document.body.clientHeight) - 332; |
| 348 | this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 220; | 348 | this.lpbContentHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 220; |
| 349 | debugger | ||
| 350 | console.log((document.documentElement.clientWidth || document.body.clientWidth) ,'(document.documentElement.clientWidth || document.body.clientWidth) '); | ||
| 351 | this.lpbContentwidth = (document.documentElement.clientWidth || document.body.clientWidth) - 380; | ||
| 349 | }); | 352 | }); |
| 350 | }, | 353 | }, |
| 351 | methods: { | 354 | methods: { |
| ... | @@ -540,7 +543,7 @@ export default { | ... | @@ -540,7 +543,7 @@ export default { |
| 540 | this.getDyztBsmList(); | 543 | this.getDyztBsmList(); |
| 541 | this.getLpbFwytAndQlxz(); | 544 | this.getLpbFwytAndQlxz(); |
| 542 | this.$nextTick(()=>{ | 545 | this.$nextTick(()=>{ |
| 543 | this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6; | 546 | this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 54; |
| 544 | }) | 547 | }) |
| 545 | } | 548 | } |
| 546 | }, | 549 | }, |
| ... | @@ -551,6 +554,9 @@ export default { | ... | @@ -551,6 +554,9 @@ export default { |
| 551 | selectedZt(n){ | 554 | selectedZt(n){ |
| 552 | this.legendToggleFlag = true; | 555 | this.legendToggleFlag = true; |
| 553 | }, | 556 | }, |
| 557 | lpbContentwidth(n){ | ||
| 558 | console.log(n,'lpbContentwidth'); | ||
| 559 | } | ||
| 554 | }, | 560 | }, |
| 555 | }; | 561 | }; |
| 556 | </script> | 562 | </script> |
| ... | @@ -668,16 +674,16 @@ table:hover { | ... | @@ -668,16 +674,16 @@ table:hover { |
| 668 | .lpb{ | 674 | .lpb{ |
| 669 | box-sizing: border-box; | 675 | box-sizing: border-box; |
| 670 | padding-left: 2px; | 676 | padding-left: 2px; |
| 671 | .searchInput { | 677 | .searchInput { |
| 672 | transition: 0.5s; | 678 | transition: 0.5s; |
| 673 | margin-left: 20px; | 679 | margin-left: 20px; |
| 674 | display: inline-block; | 680 | display: inline-block; |
| 675 | } | 681 | } |
| 676 | .lpb-content{ | 682 | .lpb-content{ |
| 677 | margin-top: 20px; | 683 | margin-top: 20px; |
| 678 | background-color: #ffffff; | 684 | background-color: #ffffff; |
| 679 | display: flex; | 685 | display: flex; |
| 680 | overflow-y: scroll; | 686 | border: 1px solid #E6E6E6; |
| 681 | .lp-overview { | 687 | .lp-overview { |
| 682 | transition: 0.5s; | 688 | transition: 0.5s; |
| 683 | flex: 1; | 689 | flex: 1; |
| ... | @@ -714,6 +720,7 @@ table:hover { | ... | @@ -714,6 +720,7 @@ table:hover { |
| 714 | .fwyt { | 720 | .fwyt { |
| 715 | cursor: pointer; | 721 | cursor: pointer; |
| 716 | border-bottom: 1px solid #e6e6e6; | 722 | border-bottom: 1px solid #e6e6e6; |
| 723 | border-left: 1px solid #e6e6e6; | ||
| 717 | span { | 724 | span { |
| 718 | text-align: center; | 725 | text-align: center; |
| 719 | height: 100%; | 726 | height: 100%; | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="main"> | 2 | <div class="main1"> |
| 3 | <el-row v-show="isSearch"> | 3 | <el-row v-show="isSearch"> |
| 4 | <el-col :span="24"> | 4 | <el-col :span="24"> |
| 5 | <el-form :inline="true" class="demo-form-inline"> | 5 | <el-form :inline="true" class="demo-form-inline"> |
| ... | @@ -531,6 +531,7 @@ export default { | ... | @@ -531,6 +531,7 @@ export default { |
| 531 | if (!n) { | 531 | if (!n) { |
| 532 | this.getDyztBsmList(); | 532 | this.getDyztBsmList(); |
| 533 | this.getLpbFwytAndQlxz(); | 533 | this.getLpbFwytAndQlxz(); |
| 534 | this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 54; | ||
| 534 | // console.log(this.$refs.lpbContentWrap.clientWidth,'lpbContentWrap'); | 535 | // console.log(this.$refs.lpbContentWrap.clientWidth,'lpbContentWrap'); |
| 535 | // this.$nextTick(()=>{ | 536 | // this.$nextTick(()=>{ |
| 536 | // this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6; | 537 | // this.lpbContentwidth = this.$refs.lpbContentWrap.clientWidth - 34 - 6; |
| ... | @@ -548,7 +549,12 @@ export default { | ... | @@ -548,7 +549,12 @@ export default { |
| 548 | } | 549 | } |
| 549 | </script> | 550 | </script> |
| 550 | <style scoped lang="less"> | 551 | <style scoped lang="less"> |
| 551 | .main{ | 552 | .main1{ |
| 553 | width: 100%; | ||
| 554 | height: 100%; | ||
| 555 | -webkit-box-sizing: border-box; | ||
| 556 | box-sizing: border-box; | ||
| 557 | padding: 20px; | ||
| 552 | .el-row{ | 558 | .el-row{ |
| 553 | box-sizing: border-box; | 559 | box-sizing: border-box; |
| 554 | padding-left: 2px; | 560 | padding-left: 2px; |
| ... | @@ -560,6 +566,7 @@ export default { | ... | @@ -560,6 +566,7 @@ export default { |
| 560 | .lpb{ | 566 | .lpb{ |
| 561 | box-sizing: border-box; | 567 | box-sizing: border-box; |
| 562 | padding-left: 2px; | 568 | padding-left: 2px; |
| 569 | |||
| 563 | .searchInput { | 570 | .searchInput { |
| 564 | transition: 0.5s; | 571 | transition: 0.5s; |
| 565 | margin-left: 20px; | 572 | margin-left: 20px; |
| ... | @@ -569,7 +576,7 @@ export default { | ... | @@ -569,7 +576,7 @@ export default { |
| 569 | margin-top: 20px; | 576 | margin-top: 20px; |
| 570 | background-color: #ffffff; | 577 | background-color: #ffffff; |
| 571 | display: flex; | 578 | display: flex; |
| 572 | overflow-y: scroll; | 579 | border: 1px solid #E6E6E6; |
| 573 | .lp-overview { | 580 | .lp-overview { |
| 574 | transition: 0.5s; | 581 | transition: 0.5s; |
| 575 | flex: 1; | 582 | flex: 1; |
| ... | @@ -606,6 +613,7 @@ export default { | ... | @@ -606,6 +613,7 @@ export default { |
| 606 | .fwyt { | 613 | .fwyt { |
| 607 | cursor: pointer; | 614 | cursor: pointer; |
| 608 | border-bottom: 1px solid #e6e6e6; | 615 | border-bottom: 1px solid #e6e6e6; |
| 616 | border-left: 1px solid #e6e6e6; | ||
| 609 | span { | 617 | span { |
| 610 | text-align: center; | 618 | text-align: center; |
| 611 | height: 100%; | 619 | height: 100%; | ... | ... |
| ... | @@ -871,20 +871,6 @@ export default { | ... | @@ -871,20 +871,6 @@ export default { |
| 871 | margin-left: 62px; | 871 | margin-left: 62px; |
| 872 | box-sizing: border-box; | 872 | box-sizing: border-box; |
| 873 | padding: 0 20px; | 873 | padding: 0 20px; |
| 874 | /deep/.el-radio-button__inner { | ||
| 875 | border: 1px solid #00cacd; | ||
| 876 | color: #00cacd; | ||
| 877 | } | ||
| 878 | /deep/.el-radio-button__inner:hover { | ||
| 879 | color: #00cacd; | ||
| 880 | } | ||
| 881 | /deep/.is-active .el-radio-button__inner { | ||
| 882 | color: #fff; | ||
| 883 | } | ||
| 884 | /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner { | ||
| 885 | background-color: #00cacd; | ||
| 886 | border-color: #00cacd; | ||
| 887 | } | ||
| 888 | .searchInput { | 874 | .searchInput { |
| 889 | transition: 0.5s; | 875 | transition: 0.5s; |
| 890 | margin-left: 20px; | 876 | margin-left: 20px; |
| ... | @@ -979,6 +965,7 @@ export default { | ... | @@ -979,6 +965,7 @@ export default { |
| 979 | .fwyt { | 965 | .fwyt { |
| 980 | cursor: pointer; | 966 | cursor: pointer; |
| 981 | border-bottom: 1px solid #e6e6e6; | 967 | border-bottom: 1px solid #e6e6e6; |
| 968 | border-left: 1px solid #e6e6e6; | ||
| 982 | span { | 969 | span { |
| 983 | text-align: center; | 970 | text-align: center; |
| 984 | height: 100%; | 971 | height: 100%; | ... | ... |
-
Please register or sign in to post a comment