调整单行描述组件显示策略

Tevin

2021-11-24 244e58a0b0c99e020c48eb67c3dc800016fd2855

调整单行描述组件显示策略

 common/custom.scss

@@ -132,6 +132,11 @@
            display: none;
        }
    }
    .at-checkbox {
        .at-checkbox__title {
            font-size: 36px;
        }
    }
    .at-modal {
        .at-modal__header {
            font-size: 40px;

 layout/description/CDescription.scss

@@ -7,14 +7,20 @@

.c-description {
    @include flexbox(flex, flext-start flex-start, nowrap);
    padding: 20px 0 20px 20px;
    padding: 4px 0 4px 0;
    line-height: 50px;
    &.c-description-enlarged {
        padding: 20px 0 20px 20px;
        .c-desctiption-content {
            padding-right: 18px;
        }
    }
    &.c-description-bordered {
        border-bottom: #e2e2e2 1PX solid;
    }
    .c-description-label {
        width: 180px;
        margin-right: 20px;
        line-height: 1.5;
        margin-right: 16px;
        vertical-align: middle;
        &.c-description-label-left {
            text-align: left;
@@ -22,12 +28,14 @@
        &.c-description-label-right {
            text-align: right;
        }
        &.c-description-label-none {
            width: auto;
            margin-right: 0;
        }
    }
    .c-desctiption-content {
        flex: 1;
        display: inline-block;
        padding-right: 18px;
        line-height: 1.5;
        vertical-align: middle;
        word-break: break-word;
    }

 layout/description/CDescription.vue

@@ -6,7 +6,7 @@
<template>
    <view
        class="c-description"
        :class="hasBorder?'c-description-bordered':''"
        :class="[hasBorder?'c-description-bordered':'', enlarged?'c-description-enlarged':'']"
    >
        <view
            class="c-description-label"
@@ -27,14 +27,22 @@
    name: 'CDescription',
    components: {},
    props: {
        // 左边标题
        label: String,
        // 标题对齐方式：left（定宽左对齐）、right（定宽右对齐）、none（无宽度）
        labelAlign: {
            type: String,
            default: 'left', // left、right
            default: 'left',
        },
        // 加大显示区域
        enlarged: {
            type: Boolean,
            default: false,
        },
        // 是否有底部边线
        hasBorder: {
            type: Boolean,
            default: true,
            default: false,
        },
    },
    data() {