【新增】svg图标

src/components/SvgIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

src/views/Report/ReportDetail.vue

@@ -44,6 +44,35 @@
         <div class="report-jug-left">
           报告满意度:<el-rate allow-half :max="10" v-model="value1" @click="saveScore"></el-rate>
         </div>
+        <div class="pointclick">
+          <svg-icon v-if="!isShow"   icon-class="pointe" @click="isShow=!isShow"  class-name="icon" ></svg-icon>
+          <svg-icon v-else  icon-class="pointe_fill" @click="isShow=!isShow"  class-name="icon" ></svg-icon>
+
+        </div>
+      </div>
+      <div class="juggle_box showLimit">
+        <el-row >
+          <el-col :span="1">
+            <span>评论</span>
+          </el-col>
+          <el-col :span="21">
+            <el-input type="textarea" v-model="juggle" maxlength="1000" show-word-limit></el-input>
+          </el-col>
+          <el-col :span="2">
+            <el-button size="medium" type="primary" class="fabiaoBtn"  @click="">发表评论</el-button>
+          </el-col>
+        </el-row>
+        <div class="all_juggle">
+          <div class="juggle_left">sss</div>
+          <div class="juggle_right">
+            <div class="content">ssss</div>
+            <div class="bottom">
+              <div class="time">time</div>
+              <el-button class="delbtn" size="medium" plain type="primary"  @click="">删除</el-button>
+            </div>
+          </div>
+
+        </div>
       </div>
       <div>
 
@@ -59,6 +88,7 @@ export default {
   name: 'ReportDetail',
   data () {
     return {
+      isShow: false,
       value1:'',
       watermarkText: '', // 水印
       content: '',
@@ -203,13 +233,64 @@ export default {
 
             }
         }
-      .report-jug{
+    .report-jug{
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+      .report-jug-left{
         display: flex;
-        .report-jug-left{
-          display: flex;
-          padding-left: 10px;
+
+      }
+    }
+    .juggle_box{
+      padding: 10px;
+      .all_juggle{
+        margin-top: 20px;
+        display: flex;
+        width: 100%;
+        border: 1px solid #e6f6fe;
+        min-height: 150px;
+        .juggle_left{
+          width: 15%;
+          text-align: center;
+          border-right: 1px solid #e6f6fe;
+          margin: 0 auto;
+        }
+        .juggle_right{
+          position: relative;
+          width: 85%;
+          padding: 20px;
+          .content{
+            width: 100%;
+          }
+          .bottom{
+            position: absolute;
+            display: flex;
+            justify-content: space-between;
+            width: calc(100% - 40px);
+            bottom: 10px;
+            left: 20px;
+            height: 30px;
+            .time{
+              line-height: 30px;
+              color: #ccc;
+            }
+            .delbtn{
+              vertical-align: center;
+            }
+          }
         }
       }
-
+      .fabiaoBtn{
+        margin-left: 20px;
+        height: 100%;
+      }
+    }
+    .isBackground{
+      background-color: pink;
+    }
+    }
+    .pointclick{
+      cursor: pointer;
     }
 </style>