工具栏样式修改

This commit is contained in:
zhaofang
2022-09-30 10:14:01 +08:00
parent 2de08425a1
commit 59ebb60dde

View File

@@ -3,34 +3,34 @@
<div> <div>
<div class="float-tools"> <div class="float-tools">
<div class="float-tool-icon" @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"><img :src="`${webBaseUrl}/images/explo.png`" alt=""></div> <div class="float-img" title="做课程"><img :src="`${webBaseUrl}/images/explo.png`" alt=""></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"><img :src="`${webBaseUrl}/images/issue.png`" alt=""></div> <div class="float-img" title="提问题"><img :src="`${webBaseUrl}/images/issue.png`" alt=""></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"> <img :src="`${webBaseUrl}/images/essay.png`" alt=""></div> <div class="float-img" title="写文章"> <img :src="`${webBaseUrl}/images/essay.png`" alt=""></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"> <img :src="`${webBaseUrl}/images/opinion.png`" alt=""></div> <div class="float-img" title="提意见"> <img :src="`${webBaseUrl}/images/opinion.png`" alt=""></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"> <img :src="`${webBaseUrl}/images/contact.png`" alt=""></div> <div class="float-img" title="联系我们"> <img :src="`${webBaseUrl}/images/contact.png`" alt=""></div>
<!-- <span>联系我们</span> --> <!-- <span>联系我们</span> -->
</div> </div>
<div class="float-tool-icon" @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"> <img :src="`${webBaseUrl}/images/back.png`" alt=""></div> <div class="float-img" title="返回顶部"> <img :src="`${webBaseUrl}/images/back.png`" alt=""></div>
<!-- <span>返回顶部</span> --> <!-- <span>返回顶部</span> -->
</div> </div>
</div> </div>
@@ -236,20 +236,22 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.float-tools{ .float-tools{
position: fixed; position: fixed;
background: white; // background: white;
// box-shadow:0px 0px 10px #999; // box-shadow:0px 0px 10px #999;
border-radius: 2px; border-radius: 4px;
border: 1px solid #f0f0f0; // border: 1px solid #f0f0f0;
right: 10px; right: 24px;
bottom: 40px; bottom: 126px;
padding:0 8px; // padding:0 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
z-index: 999; z-index: 999;
.float-tool-icon{ .float-tool-icon{
background: white;
padding:8px;
cursor: pointer; cursor: pointer;
padding: 8px 0; // padding: 8px 0;
// border-bottom: 1px solid #999; // border-bottom: 1px solid #999;
display: flex; display: flex;
flex-direction: column; flex-direction: column;