艺术戏剧（字体变化）

zhongshujie

2024-07-08 ea85d5267ab74f8a23a7208098365190d1b820f2

 src/components/dragQuestion/index.vue

@@ -1,9 +1,9 @@
<template>
  <div class="drag-box" :style="{ borderColor: bcColor }">
    <div class="title-box">
      <p class="text"><span class="hs1">◇</span>{{ titileText }}</p>
      <span class="svg-btn t0">
        <el-tooltip class="item" effect="dark" content="请拖拽答案到括号里吧" placement="top-start">
      <p class="text" style="text-indent:2em !important"><span class="hs1">◇</span>{{ titileText }}</p>
      <span class="svg-btn t0"  @mouseenter="mouseenterTitle" @mouseleave="mouseleaveTitle">
        <p class="p-title" v-if="ishowTitle">请拖拽答案到括号里吧</p>
          <svg
          t="1719309984490"
          class="icon"
@@ -20,7 +20,6 @@
            p-id="6317"
          ></path>
        </svg>
    </el-tooltip>

      </span>
    </div>
@@ -279,6 +278,7 @@
      spaceList: [],
      submitState: false,
      isLift: false,
      ishowTitle:false
    };
  },
  mounted() {},
@@ -491,6 +491,14 @@
      }
      return flag;
    },
    mouseenterTitle() {
      this.ishowTitle = true
      console.log(this.ishowTitle );
    },
    mouseleaveTitle() {
      this.ishowTitle = false
      console.log(this.ishowTitle );
    }
  },
};
</script>
@@ -555,7 +563,9 @@
  width: 100%;
}
.svg-btn {
  position: relative;
  margin-left: 5px;
  max-height: 20px;
  cursor: pointer;
  display: flex;
  padding: 3px;
@@ -568,12 +578,22 @@
    background-color: #fff;
  }
}
.p-title {
  text-indent: 0 !important;
  position: absolute;
  top: -33px;
  background-color:#8fae34 ;
  padding: 0 4px;
  white-space: nowrap;
  border-radius: 4px;
  color: #fff;
}
.title-box {
  display: flex;
  margin-bottom: 20px;
  p {
    margin: 0;
    text-indent: 2em !important;
    text-indent: 2em ;
  }
}
/** 解析 */