leromro-mini/pages_home/pages/serviceManagement/CategoryInfo.vue

<template>
    <view>
        <view class="certification-card serve-main ">
            <view class="serve-box flex_c_s hr-solid">
                <view>服务名称</view>
            </view>
            <view class="skillDescribe-conten">
                <up-textarea placeholder="请填写此条服务的名称" class="form-input" placeholder-class="form-placeholder"
                    v-model="formData.businessName"  border="none"  style="width: 100%;" autoHeight
                    v-if="viewStatus"></up-textarea>
                <view v-else class="form-input">{{ formData.businessName }}</view>
            </view>
        </view>
        <view class="certification-card serve-main ">
            <view class="serve-box flex_c_s hr-solid">
                <view>服务描述</view>
            </view>
            <view class="skillDescribe-conten">
                <up-textarea placeholder="对服务内容详细描述" class="form-input" placeholder-class="form-placeholder"
                    v-model="formData.businessDescribe"  border="none"  style="width: 100%;" autoHeight
                    v-if="viewStatus"></up-textarea>
                <view v-else class="form-input">{{ formData.businessDescribe }}</view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { computed, ref } from 'vue';
import { provide, inject } from 'vue'
const formData = inject('formData');
const viewStatus = inject('viewStatus');
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
<style>
.form-input {
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 40rpx;
    letter-spacing: normal;
    color: rgba(0, 0, 0, 0.5);
    width: 100% !important;
}

.form-placeholder {
    color: #C9CDD4;
}

.skillDescribe-conten {
    padding: 32rpx;
}
</style>