yoe-opm-web/src/views/diy/pccomponents/edit/border-edit.vue

<template>
  <div class="pc-edit">
    <!-- 内容 -->
    <div class="content-wrap" v-show="diyStore.editTab == 'content'">
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">内容设置</h3>
        <el-form label-width="90px" class="px-[10px]">
          <el-form-item label="高度" class="flex">
            <el-input-number v-model="diyStore.editComponent.boxHeight" :min="1">
              <template #suffix>
                <span>px</span>
              </template>
            </el-input-number>
          </el-form-item>
          <el-form-item label="颜色">
            <span class="mr-[10px]">{{ diyStore.editComponent.boxColor }}</span>
            <el-color-picker class="mr-[10px]" v-model="diyStore.editComponent.boxColor" />
            <el-button @click="diyStore.editComponent.boxColor = '#000000'" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 样式 -->
    <div class="style-wrap" v-show="diyStore.editTab == 'style'">
      <!-- 组件样式 -->
      <slot name="style"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import usePcdiyStore from '@/store/modules/pcdiy';
const diyStore = usePcdiyStore();
</script>

<style lang="scss" scoped>
.pc-edit {
  .edit-attr-item-wrap {
    border-top: 2px solid var(--el-color-info-light-8);
    padding-top: 20px;

    &:first-of-type {
      border-top: none;
      padding-top: 0;
    }
  }

  :deep(.el-form-item__label) {
    font-weight: 400;
  }

  :deep(.file-selector) {
    display: none;
  }
}
</style>