portal_website/src/views/productCenter/edit/produceModel.vue

<template>
  <div>
    <div class="title">
      <span>
        {{ data.name }}
      </span>
    </div>
    <div class="subTitle">
      <span>
        {{ data.value }}
      </span>
    </div>

    <div class="tabs">
      <el-tabs v-model="activeName" :editable="true" @edit="tabEdit">
        <el-tab-pane :name="`${k}`" v-for="(i,k) in data.list">
          <template slot="label">
            <span contenteditable="true" @blur="edit1('name', k,$event)">
              {{ i.name }}
            </span>
          </template>
          <transition name="fade">
            <div v-if="activeName === `${k}`" style="position:relative;">
              <template v-for="(ii,kk) in i.list">
                <div class="content">
                  <el-card class="custom-card" shadow="hover" @click="toDetail(ii.id)"
                           style="min-height: 300px;height: 30vw;box-sizing: border-box;position: relative;">
                    <i class="del el-icon-circle-close" @click="data.list[k].list.splice(kk, 1);"></i>
                    <!-- 标题 -->
                    <h2 class="itemTitle" contenteditable="true" @blur="edit2('name', k,kk,$event)">{{ ii.name }}</h2>

                    <!-- 描述，两行省略 -->
                    <p class="description" contenteditable="true" @blur="edit2('value', k,kk,$event)">{{ ii.value }}</p>

                    <!-- 按钮 -->
                    <div class="btn-wrap" v-if="ii.id">
                      <el-button class="more-btn" @click="toDetail(i.id,ii.id)">
                        了解更多
                        <i class="el-icon-arrow-right icon"></i>
                      </el-button>
                    </div>

                    <!-- 图片 -->
                    <div class="img-wrap" style="height: calc(30vw - 31px - 40px - 26px - 3.2vw - 42px - 8px)">
                      <UploadEl :data="ii"/>
                    </div>
                  </el-card>
                </div>
              </template>
              <div class="content">
                <el-card class="custom-card" shadow="hover"
                         style="min-height: 300px;height: 30vw;box-sizing: border-box;position: relative;text-align:center">
                  <div style="width:100%;height:100%;"
                       @click="data.list[k].list.push({ name: '请输入', value: '请输入', icon: '',id:1 + (Math.max(1,...(data.list?.[k]?.list?.map(e => e.id ?? 0) || [0])) || 1)})">
                    <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: calc(30vw - 32px)"></i>
                  </div>
                </el-card>
              </div>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import UploadEl from "@/components/editEl/uploadEl.vue";

export default {
  components: {UploadEl},
  props: ['data'],
  data() {
    return {
      activeName: '0',
    }
  },
  methods: {
    toDetail(id, id1) {
      if (id && id1) {
        this.$router.push(`/editor?type=2&id=${this.$props.data.id},${id},${id1}`)
      }
    },
    tabEdit(e, action) {
      if (action === 'remove') {
        if (!(event instanceof MouseEvent)) {
          return; // 不执行删除逻辑
        }
        this.activeName = '0'
        this.$props.data.list.splice(parseFloat(e), 1);
      }
      if (action === 'add') {
        this.$props.data.list.push({
          name: '请输入',
          list: [],
          id: 1 + (Math.max(1, ...(this.data.list?.map(e => e.id ?? 0) || [0])) || 1)
        })
      }
    },
    edit(key, e) {
      this.$props.data[key] = e.target.innerText
    },
    edit1(key, index, e) {
      this.$props.data.list[index][key] = e.target.innerText
    },
    edit2(key, index, index2, e) {
      console.log(this.$props.data.list[index])
      this.$props.data.list[index].list[index2][key] = e.target.innerText
    },
  }
}
</script>
<style lang="less" scoped>
@import "~@/style.less";

.del {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.title {
  padding-top: 4.2vw;
  width: 100%;
  text-align: center;
  font-size: 2.5vw;
  letter-spacing: 4px;
  color: #000;

}

.subTitle {
  padding-top: 0.4vw;
  width: 100%;
  text-align: center;
  font-size: 1.9vw;
  letter-spacing: 2px;
  color: #0003;
}

.tabs {
  text-align: left;
  margin-top: 2.3vw;

  /deep/ .el-tabs__header {
    margin: 0 20vw 15px;
  }

  /deep/ .el-tabs__content {
    padding: 0 20vw;
    background-color: fade(@standard-color, 10);
  }

  /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }

  /deep/ .el-tabs__item {
    letter-spacing: 3px;
    padding: 0 2vw;
    height: 2.9vw;
    font-size: 1.6vw;
  }

  /deep/ .el-tabs__item {
    line-height: 2.9vw;
  }

  /deep/ .el-tabs__item.is-active {
    font-weight: 600;
    color: @standard-color;
  }

  /deep/ .el-tabs__active-bar {
    height: 4px;
    background-color: @standard-color;
  }

  .content {
    padding: 2.2vw 0;
    display: inline-block;
    width: 47%;
    cursor: pointer;

    &:nth-child(2n) {
      margin-left: 5%;
    }

    &:hover {

      .itemTitle {
        color: #5c8eff;
      }

      .img-wrap {
        .image {
          transform: scale(1.2);
        }
      }
    }

    .custom-card {
      width: 100%;
      padding: 16px;
      border-radius: 16px;
      display: inline-block;

    }

    .itemTitle {
      font-size: 26px;
      font-weight: 600;
      margin: 0;
      text-align: center;
      transition: all 0.5s ease;
    }

    .description {
      font-size: 0.8vw;
      height: 3.2vw;
      color: #666;
      margin: 0;
      margin-top: 12px;
      line-height: 1.5vw;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 限制两行 */
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
    }

    .more-btn {
      margin-top: 12px;
      background-color: transparent;
      border: 1px solid #dcdfe6;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .more-btn:hover {
      border-color: #409eff;
      color: #409eff;
      background-color: rgba(64, 158, 255, 0.05);
    }

    .icon {
      font-size: 16px;
      margin-left: 4px;
    }

    .img-wrap {
      margin-top: 12px;
      overflow: hidden;

      .image {
        transition: transform 0.5s ease;
      }
    }
  }

}

.fade-enter-active {
  animation: fadeInRight;
  animation-duration: 0.5s;
}

.fade-leave-active {
  animation: fadeOutLeft;
  animation-duration: 0.5s;
}

/deep/ .el-tabs__new-tab {
  color: #409eff;
}
</style>