From 7e6140a4e9822b6850aab581d252870398a0b721 Mon Sep 17 00:00:00 2001
From: zhoulingpo <zhoulingpo>
Date: Mon, 8 May 2023 14:35:19 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91svg?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SvgIcon.vue        | 43 +++++++++++++++
 src/views/Report/ReportDetail.vue | 91 +++++++++++++++++++++++++++++--
 vue.config.js                     | 25 ++++++++-
 3 files changed, 151 insertions(+), 8 deletions(-)
 create mode 100644 src/components/SvgIcon.vue

diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
new file mode 100644
index 0000000..27da76c
--- /dev/null
+++ b/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>
diff --git a/src/views/Report/ReportDetail.vue b/src/views/Report/ReportDetail.vue
index 04b1072..fd4c33e 100644
--- a/src/views/Report/ReportDetail.vue
+++ b/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>
diff --git a/vue.config.js b/vue.config.js
index 41d24d5..1f3e690 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,9 @@
 const webpack = require('webpack')
+const path = require('path')
+function resolve (dir) {
+  return path.join(__dirname, dir)
+}
 module.exports = {
-  lintOnSave: false,
   // publicPath: '/mi',
   outputDir: 'dist', // 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
   assetsDir: 'static', // 放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
@@ -18,13 +21,28 @@ module.exports = {
       },
       // 请求静态图片配置项
       '/api/home/pic': {
-        target: 'http://localhost:7061', // 图片请求的nginx网址
+        target: 'http://10.94.1.164:7061', // 图片请求的nginx网址
         changeOrigin: true
       }
 
     }
   },
   chainWebpack: config => {
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/icon'))
+      .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icon'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
     config.plugin('html').tap(args => {
       args[0].title = '大众'
       return args
@@ -50,5 +68,6 @@ module.exports = {
         // Enumerable: "linq"
       })
     ]
-  }
+  },
+
 }