1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- <template>
- <view class="setting_item" @click="$emit('click')">
- <view class="item_left">
- <slot name="icon">
- <image :src="icon" mode=""></image>
- </slot>
- <view class="">
- <view>{{ title }}</view>
- <slot name="left"></slot>
- <!-- <view>纪洁、杰西</view> -->
- </view>
- </view>
- <view v-if="showRight" class="item_right">
- <slot name="right"></slot>
- <u-icon name="arrow-right"></u-icon>
- </view>
- </view>
- </template>
- <script>
- export default {
- components: {},
- props: {
- icon: String,
- showRight: Boolean,
- title: String
- },
- data() {
- return {};
- },
- methods: {}
- };
- </script>
- <style lang="scss" scoped>
- .setting_item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 36rpx 32rpx;
- background-color: #fff;
- border-bottom: 1px solid rgba(126, 134, 142, 0.16);
- .item_left {
- display: flex;
- // align-items: center;
- image {
- width: 20px;
- height: 20px;
- margin-right: 24rpx;
- }
- }
- .item_right {
- display: flex;
- color: #999;
- .u-icon {
- margin-left: 24rpx;
- }
- }
- &:last-of-type {
- border-width: 0;
- }
- }
- </style>
|