work

src/components/pages/components/studentData.vue

@@ -0,0 +1,467 @@
+<template>
+  <div>
+    <div class="sd_name">
+      <span>学生姓名:</span>
+      <span>{{studentInfo.sName}}</span>
+    </div>
+
+    <div class="sd_class">
+      <div class="sd_tTitle">课堂表现</div>
+      <div class="sd_module">
+        <div class="sd_module_content">
+          <div class="sd_module_children">
+            <span class="s">课堂活动</span>
+            <span class="s2">
+              <span>{{10.7}}</span>次
+            </span>
+            <span>已经击败99%学生</span>
+          </div>
+          <div class="sd_module_count">
+            <span>挑战:</span>
+            <span>{{1}}</span>次
+          </div>
+          <div class="sd_module_count">
+            <span>选项挑战:</span>
+            <span>{{1}}</span>次
+          </div>
+          <div class="sd_module_count">
+            <span>分数挑战:</span>
+            <span>{{1}}</span>次
+          </div>
+        </div>
+        <div class="sd_module_content">
+          <div class="sd_module_children">
+            <span class="s">课堂生成</span>
+            <span class="s2">
+              <span>{{6.9}}</span>次
+            </span>
+            <span>已经击败99%学生</span>
+          </div>
+          <div class="sd_module_count">
+            <span>作品上传:</span>
+            <span>{{4}}</span>张
+          </div>
+          <div class="sd_module_count">
+            <span>视频上传:</span>
+            <span>{{0}}</span>部
+          </div>
+        </div>
+
+        <div class="sd_module_content">
+          <div class="sd_module_children">
+            <span class="s">自主活动</span>
+            <span class="s2">
+              <span>{{9}}</span>分
+              <span>{{40}}</span>秒
+            </span>
+            <span>已经击败99%学生</span>
+          </div>
+          <div class="sd_module_count">
+            <span>计时:</span>
+            <span>{{0}}</span>分
+          </div>
+          <div class="sd_module_count">
+            <span>小组计分:</span>
+            <span>{{7}}</span>次
+          </div>
+          <div class="sd_module_count">
+            <span>个人计分:</span>
+            <span>{{3}}</span>次
+          </div>
+        </div>
+      </div>
+      <div class="sd_module_data">
+        <div
+          id="charts_canvas"
+          class="echart"
+          style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+        ></div>
+      </div>
+    </div>
+    <div class="sd_class">
+      <div class="sd_tTitle">个人能力</div>
+      <div class="sd_person_button">
+        <span @click="type=1" :class="{'active':type == 1}">语文</span>
+        <span @click="type=2" :class="{'active':type == 2}">数学</span>
+        <span @click="type=3" :class="{'active':type == 3}">英语</span>
+        <span @click="type=4" :class="{'active':type == 4}">信息科技</span>
+        <span @click="type=5" :class="{'active':type == 5}">艺术</span>
+        <span @click="type=6" :class="{'active':type == 6}">跨学科素养</span>
+      </div>
+      <div class="sd_person_data">
+        <div
+          id="person_canvas1"
+          class="echart"
+          style="width: 50%; height: 100%; margin: 0 0 0 1rem"
+        ></div>
+        <div
+          id="person_canvas2"
+          class="echart"
+          style="width: 50%; height: 100%; margin: 0 0 0 1rem"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["studentInfo"],
+  data() {
+    return {
+      type: 6,
+      chartObj: null,
+      chartObj2: null,
+      chartObj3: null,
+      ooption: [],
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "50",
+          top: "center",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "60%",
+            center: ["65%", "50%"],
+            label: {
+              color: "inherit",
+              formatter: "{b|{b}：} {d}%  ",
+              rich: {
+                b: {
+                  fontSize: 14,
+                  fontWeight: "bold",
+                  lineHeight: 33,
+                },
+              },
+            },
+            data: [
+              { value: 1048, name: "学习时间" },
+              { value: 735, name: "自我介绍" },
+              { value: 580, name: "能力闯关" },
+              { value: 484, name: "提交探究表" },
+              { value: 300, name: "提交活动表" },
+              { value: 300, name: "讨论交流" },
+              { value: 300, name: "与大家分享你的“神兽”" },
+              { value: 300, name: "总结其它动物保护自己" },
+              { value: 300, name: "作业提交" },
+              { value: 300, name: "拓展思考,讨论交流" },
+              { value: 300, name: "提交倡议书" },
+              { value: 300, name: "提交学习手册" },
+              { value: 300, name: "能力测试" },
+              { value: 300, name: "自我评价调查问卷" },
+              { value: 300, name: "课程满意度调查问卷" },
+              { value: 300, name: "家长评价问卷调查" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+      data: [
+        {
+          name: "信息意识",
+          value: 15,
+          children: [
+            {
+              name: "信息应用意识",
+              value: 5,
+            },
+            {
+              name: "信息安全意识",
+              value: 3,
+            },
+            {
+              name: "信息感知意识",
+              value: 4,
+            },
+          ],
+        },
+        {
+          name: "信息社会责任",
+          value: 15,
+          children: [
+            {
+              name: "信息伦理道德",
+              value: 5,
+            },
+            {
+              name: "信息法律法规",
+              value: 8,
+            },
+          ],
+        },
+        {
+          name: "信息知识与技能",
+          value: 15,
+          children: [
+            {
+              name: "信息应用技能",
+              value: 5,
+            },
+            {
+              name: "信息科学知识",
+              value: 10,
+            },
+          ],
+        },
+        {
+          name: "信息思维与行为2",
+          value: 15,
+          children: [
+            {
+              name: "信息思维",
+              value: 10,
+            },
+            {
+              name: "信息行为",
+              value: 3,
+            },
+          ],
+        },
+      ],
+      //const colors = ['red', 'blue', 'green', 'purple'];
+      option2: {
+        //color:colors,
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          left: "50",
+          top: "center",
+        },
+        series: {
+          type: "sunburst",
+          data: [],
+          radius: [60, "90%"],
+          itemStyle: {
+            borderRadius: 7,
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+          },
+        },
+      },
+      option3: {
+        xAxis: {
+          type: "category",
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
+          boundaryGap: false,
+          splitLine: {
+            show: true,
+          },
+          axisLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: [
+            "信息应用意识",
+            "信息安全意识",
+            "信息感知意识",
+            "信息社会责任",
+            "信息法律法规",
+            "信息应用技能",
+            "信息科学知识",
+            "信息思维",
+            "信息行为",
+          ],
+          axisLine: {
+            show: false,
+          },
+        },
+        grid: {
+          left: 100,
+          bottom: 50,
+          right: 30,
+          top: 50,
+        },
+        series: [
+          {
+            name: "Punch Card",
+            type: "scatter",
+            symbolSize: function (val) {
+              return val[2] * 2;
+            },
+            data: [],
+            animationDelay: function (idx) {
+              return idx * 5;
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#charts_canvas")
+        );
+        const chartObj2 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#person_canvas1")
+        );
+        this.option2.series.data = this.data;
+        const chartObj3 = this.$echarts.init(
+          //劳动课程
+          this.$el.querySelector("#person_canvas2")
+        );
+        let data = []
+        for(var i = 0;i<100;i++){
+            var x = this.randomNum(1,9)
+            var y = this.randomNum(0,8)
+            var z = this.randomNum(1,10)
+            data.push([x,y,z])
+        }
+        this.option3.series[0].data = data;
+        // console.log(this.option.series[0].data);
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj2 = chartObj2;
+        this.chartObj3 = chartObj3;
+        this.chartObj.setOption(this.option);
+        this.chartObj2.setOption(this.option2);
+        this.chartObj3.setOption(this.option3);
+      });
+    },
+    randomNum(minNum, maxNum) {
+      switch (arguments.length) {
+        case 1:
+          return parseInt(Math.random() * minNum + 1, 10);
+          break;
+        case 2:
+          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+          break;
+        default:
+          return 0;
+          break;
+      }
+    },
+  },
+  mounted() {
+    this.setChart();
+  },
+};
+</script>
+
+<style scoped>
+.sd_name {
+  font-size: 20px;
+}
+
+.sd_class {
+  width: 100%;
+}
+.sd_tTitle {
+  width: 100%;
+  background: rgb(199, 217, 212);
+  padding: 10px 10px;
+  border-radius: 5px;
+  border: 1px solid rgb(165, 182, 177);
+  font-size: 18px;
+  font-weight: 500;
+  margin: 20px 0;
+  box-sizing: border-box;
+}
+.sd_module {
+  display: flex;
+  justify-content: space-between;
+}
+.sd_module_content {
+  width: calc(100% / 3 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sd_module_content:nth-child(1) .sd_module_children {
+  background: rgb(232, 141, 105);
+}
+.sd_module_content:nth-child(2) .sd_module_children {
+  background: rgb(87, 156, 238);
+}
+.sd_module_content:nth-child(3) .sd_module_children {
+  background: rgb(112, 221, 232);
+}
+.sd_module_children {
+  width: 100%;
+  height: 130px;
+  position: relative;
+  border-radius: 5px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.sd_module_children .s {
+  position: absolute;
+  font-size: 16px;
+  top: 10px;
+  left: 10px;
+}
+.sd_module_children .s2 span {
+  font-size: 45px;
+  margin-right: 3px;
+}
+
+.sd_module_count {
+  font-size: 18px;
+  margin: 20px 0 0 0;
+}
+.sd_module_count {
+  display: flex;
+  align-items: center;
+}
+.sd_module_count span:nth-child(1) {
+  width: 100px;
+  text-align: right;
+}
+.sd_module_count span:nth-child(2) {
+  width: 100px;
+  text-align: center;
+  color: rgb(214, 132, 150);
+}
+.sd_module_data {
+  height: 700px;
+  width: 100%;
+}
+
+.sd_person_data {
+  height: 500px;
+  width: 100%;
+  display: flex;
+}
+.sd_person_button {
+  font-size: 16px;
+  display: flex;
+}
+
+.sd_person_button span {
+  margin-left: 20px;
+  padding: 0 0 6px;
+  cursor: pointer;
+}
+
+.sd_person_button .active {
+  border-bottom: 2px solid rgb(30, 146, 255);
+  color: rgb(30, 146, 255);
+}
+</style>

src/components/pages/worksDetail.vue

@@ -72,12 +72,13 @@
                 size="small"
                 @click="lookWork(scope.row.id, scope.row.userid)"
               >查看作业</el-button>
-              <el-button
+              <el-button type="primary" size="small" @click="lookData(scope.row.userid)">生成报告</el-button>
+              <!-- <el-button
                 class="de_button"
                 type="primary"
                 size="small"
                 @click="deleteWork(scope.row.id)"
-              >删除</el-button>
+              >删除</el-button>-->
             </template>
           </el-table-column>
         </el-table>
@@ -87,78 +88,114 @@
           :before-close="handleClose"
           class="add_work"
         >
-          <div class="zyBox" v-for="(item,index) in worksDetail" :key="index">
-            <div class="left">
-              <div class="courseTitle">
-                {{
-                '第'+(item.stage+1)+'阶段'+item.chapterTitle
-                }}
-              </div>
-
-              <div class="bigImg" v-if="item.tType == 0">
-                <video-player
-                  class="video-player vjs-custom-skin"
-                  ref="videoPlayer"
-                  :playsinline="true"
-                  :options="item.playerO"
-                  @play="onPlayerPlay($event)"
-                  style="width: 100%; height: 100%"
-                ></video-player>
-              </div>
-              <div class="bigImg" v-else>
-                <img
-                  :src="
-                    item.thumbnail.length > 0 ? item.thumbnail[1][0].url
-                      : ''
-                  "
-                  alt
-                />
-              </div>
-              <div class="thumbnail">
-                <div
-                  style="background: #a3d4ff"
-                  v-if="item.upVedio.length"
-                  :class="item.tType == 0 ? 'isClick' : ''"
-                >
-                  <img src="../../assets/icon/spIcon.png" alt @click="item.tType = 0" />
+          <div class="zyBoxC" v-for="(item,index) in worksDetail" :key="index">
+            <div class="courseTitle">
+              {{
+              '第'+(item.stage+1)+'阶段'+item.chapterTitle
+              }}
+            </div>
+            <div class="zyBox">
+              <div class="left">
+                <div class="bigImg" v-if="item.tType == 0">
+                  <video-player
+                    class="video-player vjs-custom-skin"
+                    ref="videoPlayer"
+                    :playsinline="true"
+                    :options="item.playerO"
+                    @play="onPlayerPlay($event)"
+                    style="width: 100%; height: 100%"
+                  ></video-player>
                 </div>
-                <div :class="item.tType == 1 ? 'isClick' : ''">
+                <div class="bigImg" v-else>
                   <img
                     :src="
                     item.thumbnail.length > 0 ? item.thumbnail[1][0].url
                       : ''
                   "
                     alt
-                    @click="item.tType = 1"
                   />
                 </div>
-              </div>
-              <div style="margin: 5px 10px">{{ sInfo.course }}</div>
-              <div class="student_Answer">
-                <div class="toux">
-                  <img :src="sInfo.tx != null ? sInfo.tx : tx" alt />
+                <div class="thumbnail">
+                  <div
+                    style="background: #a3d4ff"
+                    v-if="item.upVedio.length"
+                    :class="item.tType == 0 ? 'isClick' : ''"
+                  >
+                    <img src="../../assets/icon/spIcon.png" alt @click="item.tType = 0" />
+                  </div>
+                  <div :class="item.tType == 1 ? 'isClick' : ''">
+                    <img
+                      :src="
+                    item.thumbnail.length > 0 ? item.thumbnail[1][0].url
+                      : ''
+                  "
+                      alt
+                      @click="item.tType = 1"
+                    />
+                  </div>
                 </div>
-                <div class="nav">
-                  <div class="studentName">{{ sInfo.sName }}</div>
-                  <div class="studentAnswer">
-                    {{
-                    item.content != ""
-                    ? item.content
-                    : "暂无内容"
-                    }}
-                    <!-- 雨荒深院菊，霜倒半池莲.唐杜甫《宿赞公房》 -->
+                <div style="margin: 5px 10px">{{ sInfo.course }}</div>
+                <div class="student_Answer">
+                  <div class="toux">
+                    <img :src="sInfo.tx != null ? sInfo.tx : tx" alt />
+                  </div>
+                  <div class="nav">
+                    <div class="studentName">{{ sInfo.sName }}</div>
+                    <div class="studentAnswer">
+                      {{
+                      item.content != ""
+                      ? item.content
+                      : "暂无内容"
+                      }}
+                      <!-- 雨荒深院菊，霜倒半池莲.唐杜甫《宿赞公房》 -->
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class="right">
-              <div class="comment">
-                <div class="comment_title">
-                  评论
-                  <span>({{ commentCount }})</span>
+              <div style="width: 290px;margin-right: 10px;">
+                <div class="sd_score" style="box-sizing: border-box; width: 100%; box-shadow: none">
+                  <div class="score_box">
+                    <span>意识能力</span>
+                    <el-rate v-model="item.rate.ca"></el-rate>
+                  </div>
+                  <div class="score_box">
+                    <span>科学探究能力</span>
+                    <el-rate v-model="item.rate.sia"></el-rate>
+                  </div>
+                  <div class="score_box">
+                    <span>实践创新能力</span>
+                    <el-rate v-model="item.rate.eta"></el-rate>
+                  </div>
+                  <div class="score_box">
+                    <span>学习反思能力</span>
+                    <el-rate v-model="item.rate.pia"></el-rate>
+                  </div>
+                  <div class="score_box">
+                    <span>工程思维能力</span>
+                    <el-rate v-model="item.rate.lra"></el-rate>
+                  </div>
                 </div>
-                <div class="other_Answer">暂无学生评论</div>
-                <!-- <div class="other_Answer">
+                <div class="data_body">
+                  <div class="title">
+                    <span>量规评分</span>
+                  </div>
+                  <div style="width: 100%">
+                    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
+                    <div
+                      class="echart charts_canvas"
+                      style="width: 100%; height: 100%; margin: 0 0 0 1rem"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+              <div class="right">
+                <div class="comment">
+                  <div class="comment_title">
+                    评论
+                    <span>({{ commentCount }})</span>
+                  </div>
+                  <div class="other_Answer">暂无学生评论</div>
+                  <!-- <div class="other_Answer">
 									<div class="toux">
 										<img src="../../assets/portal.png" alt="" />
 									</div>
@@ -169,11 +206,11 @@
 										</div>
 										<div class="otherAnswer">{{ this.commentAnswer }}</div>
 									</div>
-                </div>-->
-              </div>
-              <div
-                class="lastTop"
-                style="
+                  </div>-->
+                </div>
+                <div
+                  class="lastTop"
+                  style="
                   width: 100%;
                   padding: 5px 0px 0px;
                   box-sizing: border-box;
@@ -181,58 +218,23 @@
                   margin-top: 10px;
                   box-shadow: none;
                 "
-              >
-                <div class="moreSay">更多评价</div>
-                <div class="more_say_input">
-                  <el-input
-                    type="textarea"
-                    placeholder="还有要说的吗..."
-                    :rows="8"
-                    resize="none"
-                    v-model="item.rate.content"
-                    style="background: #fafafa"
-                  ></el-input>
-                </div>
-              </div>
-            </div>
-            <div style="width: 290px">
-              <div class="sd_score" style="box-sizing: border-box; width: 100%; box-shadow: none">
-                <div class="score_box">
-                  <span>意识能力</span>
-                  <el-rate v-model="item.rate.ca"></el-rate>
-                </div>
-                <div class="score_box">
-                  <span>科学探究能力</span>
-                  <el-rate v-model="item.rate.sia"></el-rate>
-                </div>
-                <div class="score_box">
-                  <span>实践创新能力</span>
-                  <el-rate v-model="item.rate.eta"></el-rate>
-                </div>
-                <div class="score_box">
-                  <span>学习反思能力</span>
-                  <el-rate v-model="item.rate.pia"></el-rate>
-                </div>
-                <div class="score_box">
-                  <span>工程思维能力</span>
-                  <el-rate v-model="item.rate.lra"></el-rate>
-                </div>
-              </div>
-              <div class="data_body">
-                <div class="title">
-                  <span>量规评分</span>
-                </div>
-                <div style="width: 100%">
-                  <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-                  <div
-                    class="echart charts_canvas"
-                    style="width: 100%; height: 100%; margin: 0 0 0 1rem"
-                  ></div>
+                >
+                  <div class="moreSay">更多评价</div>
+                  <div class="more_say_input">
+                    <el-input
+                      type="textarea"
+                      placeholder="还有要说的吗..."
+                      :rows="8"
+                      resize="none"
+                      v-model="item.rate.content"
+                      style="background: #fafafa"
+                    ></el-input>
+                  </div>
                 </div>
               </div>
+              <!-- <div class="rbButtom" @click="giveScore">评分</div> -->
+              <div class="rbButtom" @click="updateWorks(item.id,item.rate,index)">评分</div>
             </div>
-            <!-- <div class="rbButtom" @click="giveScore">评分</div> -->
-            <div class="rbButtom" @click="updateWorks(item.id,item.rate,index)">评分</div>
           </div>
         </el-dialog>
         <el-dialog
@@ -337,11 +339,32 @@
     <el-dialog :visible.sync="pictureDialog" size="tiny">
       <img width="100%" :src="dialogImageUrl" alt />
     </el-dialog>
+    <el-dialog
+      title="项目评分"
+      :visible.sync="dataVisible"
+      :append-to-body="true"
+      width="1100px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div>
+        <div class="a_addBox">
+          <StudentData :studentInfo="studentInfo"></StudentData>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dataVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import StudentData from "./components/studentData";
 export default {
+  components: {
+    StudentData,
+  },
   data() {
     return {
       tableHeight: "500px",
@@ -356,6 +379,8 @@ export default {
       dialogVisible1: false,
       dialogVisible2: false,
       dialogVisible3: false,
+      dataVisible: false,
+      studentInfo: {},
       courseByUser: "诗词中的植物",
       userName: "林点",
       answerName: "宿赞公房",
@@ -488,6 +513,21 @@ export default {
     });
   },
   methods: {
+    lookData(uid) {
+      let params = {
+        uid: uid,
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectWorksDetail", params)
+        .then((res) => {
+          this.studentInfo = res.data[0][0];
+          this.dataVisible = true;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
     tableRowClassName({ row, rowIndex }) {
       if ((rowIndex + 1) % 2 === 0) {
         return "even_row";
@@ -849,8 +889,8 @@ export default {
   width: 1080px;
 }
 .add_work >>> .el-dialog__body {
-  background: #ededed;
-  height: 575px;
+  background: #fff;
+  height: 660px;
   overflow: auto;
 }
 .header-title {
@@ -977,7 +1017,7 @@ export default {
   height: 75%;
   max-height: 330px; */
   overflow: auto;
-  height: 330px;
+  height: 290px;
   background: #fff;
   border-radius: 5px;
   padding: 10px;
@@ -1166,7 +1206,7 @@ export default {
   min-width: 230px;
   min-height: 370px; */
   width: 25%;
-  margin-right: 10px;
+  /* margin-right: 10px; */
   background: none;
   padding: 0;
 }
@@ -1174,6 +1214,8 @@ export default {
 .courseTitle {
   font-size: 19px;
   font-weight: 600;
+  width: 93%;
+  margin-bottom: 20px;
 }
 
 .bigImg {
@@ -1206,14 +1248,24 @@ export default {
   cursor: pointer;
 }
 
+.zyBoxC {
+  background: #ededed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0px;
+  flex-direction: column;
+}
+
 .zyBox {
   display: flex;
-  width: 100%;
+  /* width: 100%; */
   position: relative;
   min-width: 585px;
   min-height: 425px;
 }
-.zyBox + .zyBox {
+
+.zyBoxC + .zyBoxC {
   margin-top: 10px;
 }
 .rbButtom {
@@ -1242,7 +1294,7 @@ export default {
 }
 
 .data_body {
-  height: 292px;
+  height: 340px;
   display: flex;
   position: relative;
   border-radius: 5px;
@@ -1258,4 +1310,22 @@ export default {
   top: 10px;
   left: 10px;
 }
+
+.dialog_diy >>> .el-dialog__header {
+  padding: 9px 20px 10px;
+  background: #32455b !important;
+}
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+  font-size: 15px;
+}
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 14px;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
+  color: #fff;
+}
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
+  color: #fff;
+}
 </style>