123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154 |
- <template>
- <view class="u-section">
- <view class="u-section__title" :style="{
- fontWeight: bold ? 'bold' : 'normal',
- color: color,
- fontSize: fontSize + 'rpx',
- paddingLeft: showLine ? (fontSize * 0.7) + 'rpx' : 0
- }" :class="{
- 'u-section--line': showLine
- }">
- <view class="u-section__title__icon-wrap u-flex" :style="[lineStyle]" v-if="showLine">
- <u-icon top="0" name="column-line" :size="fontSize * 1.25" bold :color="lineColor ? lineColor : color"></u-icon>
- </view>
- <text class="u-flex u-section__title__text">{{title}}</text>
- </view>
- <view class="u-section__right-info" v-if="right || $slots.right" :style="{
- color: subColor
- }" @tap="rightClick">
- <slot name="right" v-if="$slots.right" />
- <block v-else>
- {{subTitle}}
- <view class="u-section__right-info__icon-arrow u-flex" v-if="arrow">
- <u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
- </view>
- </block>
- </view>
- </view>
- </template>
- <script>
-
- export default {
- name: "u-section",
- props: {
-
- title: {
- type: String,
- default: ''
- },
-
- subTitle: {
- type: String,
- default: '更多'
- },
-
- right: {
- type: Boolean,
- default: true
- },
- fontSize: {
- type: [Number, String],
- default: 28
- },
-
- bold: {
- type: Boolean,
- default: true
- },
-
- color: {
- type: String,
- default: '#303133'
- },
-
- subColor: {
- type: String,
- default: '#909399'
- },
-
- showLine: {
- type: Boolean,
- default: true
- },
-
- lineColor: {
- type: String,
- default: ''
- },
-
- arrow: {
- type: Boolean,
- default: true
- },
- },
- computed: {
-
- lineStyle() {
-
- return {
-
- left: -(Number(this.fontSize) * 0.9) + 'rpx',
- top: -(Number(this.fontSize) * (this.$u.os() == 'ios' ? 0.14 : 0.15)) + 'rpx',
- }
- }
- },
- methods: {
- rightClick() {
- this.$emit('click');
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/style.components.scss";
-
- .u-section {
- @include vue-flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
-
- &__title {
- position: relative;
- font-size: 28rpx;
- padding-left: 20rpx;
- @include vue-flex;
- align-items: center;
-
- &__icon-wrap {
- position: absolute;
- }
-
- &__text {
- line-height: 1;
- }
- }
-
- &__right-info {
- color: $u-tips-color;
- font-size: 26rpx;
- @include vue-flex;
- align-items: center;
-
- &__icon-arrow {
- margin-left: 6rpx;
- }
- }
- }
- </style>
|