右下角工具提示 采用el-tootip 原来的title在下,看不到

This commit is contained in:
daihh
2022-10-19 13:34:54 +08:00
parent ed55699796
commit c2ece099cc

View File

@@ -5,32 +5,56 @@
<div class="float-tool-icon" style="margin-bottom:2px" @click="toNeedCourse" v-if="identity>1"> <div class="float-tool-icon" style="margin-bottom:2px" @click="toNeedCourse" v-if="identity>1">
<!-- <svg-icon class-name="icon" icon-class="lessons"></svg-icon> --> <!-- <svg-icon class-name="icon" icon-class="lessons"></svg-icon> -->
<div class="float-img" title="做课程"><img :src="`${webBaseUrl}/images/explo.png`" alt=""></div> <div class="float-img">
<el-tooltip popper-class="popper-class" effect="dark" content="做课程" placement="top-start">
<img :src="`${webBaseUrl}/images/explo.png`" alt="">
</el-tooltip>
</div>
<!-- <span>做课程</span> --> <!-- <span>做课程</span> -->
</div> </div>
<div class="float-tool-icon" @click="$refs.addQuestion.askQuestionDialog = true"> <div class="float-tool-icon" @click="$refs.addQuestion.askQuestionDialog = true">
<!-- <svg-icon class-name="icon" icon-class="problem"></svg-icon> --> <!-- <svg-icon class-name="icon" icon-class="problem"></svg-icon> -->
<div class="float-img" title="提问题"><img :src="`${webBaseUrl}/images/issue.png`" alt=""></div> <div class="float-img" title="提问题">
<el-tooltip popper-class="popper-class" effect="dark" content="提问题" placement="top-start">
<img :src="`${webBaseUrl}/images/issue.png`" alt="">
</el-tooltip>
</div>
<!-- <span>提问题</span> --> <!-- <span>提问题</span> -->
</div> </div>
<div class="float-tool-icon" @click="toAddArticle()"> <div class="float-tool-icon" @click="toAddArticle()">
<!-- <svg-icon class-name="icon" icon-class="essay"></svg-icon> --> <!-- <svg-icon class-name="icon" icon-class="essay"></svg-icon> -->
<div class="float-img" title="写文章"> <img :src="`${webBaseUrl}/images/essay.png`" alt=""></div> <div class="float-img" title="写文章">
<el-tooltip popper-class="popper-class" effect="dark" content="写文章" placement="top-start">
<img :src="`${webBaseUrl}/images/essay.png`" alt="">
</el-tooltip>
</div>
<!-- <span>写文章</span> --> <!-- <span>写文章</span> -->
</div> </div>
<div class="float-tool-icon" @click="showFeedback()"> <div class="float-tool-icon" @click="showFeedback()">
<!-- <svg-icon class-name="icon" icon-class="agree"></svg-icon> --> <!-- <svg-icon class-name="icon" icon-class="agree"></svg-icon> -->
<div class="float-img" title="提意见"> <img :src="`${webBaseUrl}/images/opinion.png`" alt=""></div> <div class="float-img" title="提意见">
<el-tooltip popper-class="popper-class" effect="dark" content="提意见" placement="top-start">
<img :src="`${webBaseUrl}/images/opinion.png`" alt="">
</el-tooltip>
</div>
<!-- <span>提意见</span> --> <!-- <span>提意见</span> -->
</div> </div>
<div class="float-tool-icon" @click="infoShow=true"> <div class="float-tool-icon" @click="infoShow=true">
<!-- <svg-icon class-name="icon" icon-class="server"></svg-icon> --> <!-- <svg-icon class-name="icon" icon-class="server"></svg-icon> -->
<div class="float-img" title="联系我们"> <img :src="`${webBaseUrl}/images/contact.png`" alt=""></div> <div class="float-img" title="联系我们">
<el-tooltip popper-class="popper-class" effect="dark" content="联系我们" placement="top-start">
<img :src="`${webBaseUrl}/images/contact.png`" alt="">
</el-tooltip>
</div>
<!-- <span>联系我们</span> --> <!-- <span>联系我们</span> -->
</div> </div>
<div class="float-tool-icon" style="margin-top:2px" @click="backtop"> <div class="float-tool-icon" style="margin-top:2px" @click="backtop">
<!-- <svg-icon class-name="icon" icon-class="top"></svg-icon> --> <!-- <svg-icon class-name="icon" icon-class="top"></svg-icon> -->
<div class="float-img" title="返回顶部"> <img :src="`${webBaseUrl}/images/back.png`" alt=""></div> <div class="float-img" title="返回顶部">
<el-tooltip popper-class="popper-class" effect="dark" content="返回顶部" placement="top-start">
<img :src="`${webBaseUrl}/images/back.png`" alt="">
</el-tooltip>
</div>
<!-- <span>返回顶部</span> --> <!-- <span>返回顶部</span> -->
</div> </div>
</div> </div>
@@ -234,6 +258,9 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.popper-class{
background-color: #ccc;
}
.float-tools{ .float-tools{
position: fixed; position: fixed;
// background: white; // background: white;