|
- <template>
- <div class="layout-tvbar">
- <div class="tvbar" style="padding-top: {{pBarPaddingTop}}; padding-bottom: {{pBarPaddingBottom}};">
- <div class="tvbar-content">
- <div>
- <image class="tvbar-title-image" src="{{pImage}}" show="{{pImage !== ''}}"></image>
- <text class="tvbar-title" style="color: {{pTitleColor}}; font-size: {{pTitleSize}}">{{pTitle}}</text>
- </div>
- <div class="tvbar-layout-value {{pValueAlign}}">
- <text class="tvbar-value" style="color: {{pValueColor}};font-size: {{pValueSize}}">{{pValue}}</text>
- </div>
- </div>
- <div>
- <image class="tvbar-end-image" src="/Common/images/arrow.png" show={{pArrow}}></image>
- </div>
- </div>
- <div class="tvbar-line" style="margin-left: {{pLineLeft}}" show={{pLine}}></div>
- </div>
- </template>
-
- <style>
- .layout-tvbar {
- flex-direction: column;
- background-color: #ffffff;
- }
-
- .layout-tvbar:active {
- background-color: #f5f5f5;
- }
-
- .tvbar {
- padding: 30px 32px;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- }
-
- .tvbar>div {
- align-items: center;
- }
-
- .tvbar>.tvbar-content {
- width: 100%;
- position: none;
- }
-
- .tvbar .tvbar-title-image {
- width: 40px;
- height: 40px;
- margin: 0 40px 0 0;
- }
-
- .tvbar .tvbar-end-image {
- width: 24px;
- height: 24px;
- margin: 0 -1px 0 20px;
- }
-
- .tvbar text {
- lines: 1;
- text-overflow: ellipsis;
- }
-
- .tvbar-layout-value {
- flex-grow: 1;
- }
-
- .tvbar-content>.right {
- justify-content: flex-end;
- }
-
- .tvbar-content>.left {
- justify-content: flex-start;
- }
-
- .tvbar .tvbar-value {
- margin: 0 0 0 60px;
- }
-
- .tvbar-line {
- width: 100%;
- height: 1px;
- background-color: #eeeeee;
- }
- </style>
-
- <script>
- export default {
- props: {
- pBarPaddingTop: {
- type: String,
- default: '30px',
- },
- pBarPaddingBottom: {
- type: String,
- default: '30px',
- },
- pImage: {
- type: String,
- default: ''
- },
- pTitle: String,
- pTitleSize: {
- default: '32px'
- },
- pTitleColor: {
- default: '#333333'
- },
- pValue: String,
- pValueSize: {
- default: '32px'
- },
- pValueColor: {
- default: '#666666'
- },
- pValueAlign: {
- type: String,
- default: 'right'
- },
- pArrow: {
- default: true
- },
- pLine: {
- default: false
- },
- pLineLeft: {
- default: '32px',
- }
- }
- }
- </script>
复制代码
这是自定义控件的代码 |
|