yoe-opm-web/src/views/diy/pccomponents/edit/pages-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="模板名称">
            <el-input v-model="diyStore.name" placeholder="请输入模板名称" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 样式 -->
    <div class="style-wrap" v-show="diyStore.editTab == 'style'">
      <div class="edit-attr-item-wrap">
        <h3 class="mb-[10px]">样式设置</h3>
        <el-form label-width="80px" class="px-[10px]">
          <el-form-item label="背景颜色">
            <span class="mr-[10px]">{{ diyStore.backgroundColor }}</span>
            <el-color-picker class="mr-[10px]" v-model="diyStore.backgroundColor" />
            <el-button @click="diyStore.backgroundColor = '#f2f2f2'" size="small">重置</el-button>
          </el-form-item>
          <el-form-item label="悬停颜色">
            <span class="mr-[10px]">{{ diyStore.hoverColor }}</span>
            <el-color-picker class="mr-[10px]" v-model="diyStore.hoverColor" />
            <el-button @click="diyStore.hoverColor = '#E7000B'" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 组件样式 -->
      <slot name="style"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
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;
    }

    .edit-attr-title {
      display: flex;

      .title2 {
        font-size: 12px;
        color: #666;
        margin-left: 6px;
      }
    }

    .data-num {
      width: 100%;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: var(--el-color-primary);
      cursor: pointer;
    }
  }

  .selected {
    line-height: 32px;
    position: absolute;
    left: 0px;
  }

  :deep(.el-form-item__label) {
    font-weight: 400;
  }
}
</style>