修改样式错乱

1

src/views/smallStudentManager/components/searchHeader.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="titleWrap">
+    <div class="box">
+      <span class="shape"></span>
+      <span>{{ title }}</span>
+    </div>
+    <div class="right">
+      <!-- <el-radio-group
+        v-model="timer"
+
+        @change="changeQuick"
+        v-if="isShowQuert"
+      >
+        <el-radio-button label="month">本月</el-radio-button>
+        <el-radio-button label="year">本年度</el-radio-button>
+        <el-radio-button label="lastYear">去年</el-radio-button>
+      </el-radio-group> -->
+      <el-date-picker
+        v-if="isShowQuert"
+        v-model="date"
+        type="daterange"
+        style="width: 300px; padding: 0 10px"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+
+        @change="changeValue"
+        :picker-options="bigin()"
+      >
+      </el-date-picker>
+      <el-date-picker
+        v-else
+        v-model="date"
+        type="daterange"
+        style="width: 300px; padding: 0 10px"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+
+        @change="changeWeek"
+        :picker-options="bigin()"
+      >
+      </el-date-picker>
+    </div>
+  </div>
+</template>
+<script>
+import { getNowDateAndSunday, getNowDateAndMonday } from "@/utils/date";
+export default {
+  props: ["title", "dates", "isShowQuert", "endDate"],
+
+  data() {
+    return {
+      timer: "",
+      date: this.dates,
+    };
+  },
+  mounted() {
+  },
+
+  watch: {
+    dates(val) {
+      this.date = val;
+    },
+
+  },
+
+  methods: {
+    changeWeek(val) {
+      this.date = [getNowDateAndMonday(val[0]), getNowDateAndSunday(val[1])];
+      this.submitDate(this.date);
+    },
+    changeValue(val) {
+      this.timer = "";
+      this.date = val;
+      this.submitDate(this.date);
+    },
+    changeQuick(val) {
+      let startDate;
+      let endDate;
+      if (val == "month") {
+        // 获取本月的第一天 获取本月的今天
+        startDate = this.$helpers
+          .dayjs(new Date())
+          .set("date", 1)
+          .format("YYYY-MM-DD");
+        this.endDate
+          ? (endDate = this.endDate)
+          : (endDate = this.$helpers
+              .dayjs(new Date())
+              .subtract(1, "day")
+              .format("YYYY-MM-DD"));
+        this.date = [startDate, endDate];
+        this.submitDate(this.date);
+      } else if (val == "year") {
+        startDate = this.$helpers
+          .dayjs(new Date())
+          .set("month", 0)
+          .set("date", 1)
+          .format("YYYY-MM-DD");
+        this.endDate
+          ? (endDate = this.endDate)
+          : (endDate = this.$helpers
+              .dayjs(new Date())
+              .subtract(1, "day")
+              .format("YYYY-MM-DD"));
+        this.date = [startDate, endDate];
+        this.submitDate(this.date);
+      } else if (val == "lastYear") {
+        startDate = this.$helpers
+          .dayjs(new Date())
+          .subtract(1, "year")
+          .set("month", 0)
+          .set("date", 1)
+          .format("YYYY-MM-DD");
+        endDate = this.$helpers
+          .dayjs()
+          .subtract(1, "year")
+          .endOf("year")
+          .format("YYYY-MM-DD");
+        this.date = [startDate, endDate];
+        this.submitDate(this.date);
+      }
+    },
+    submitDate(date) {
+      this.$emit("changeValue", date);
+    },
+    bigin() {
+      let self = this;
+      return {
+        firstDayOfWeek: 1,
+        disabledDate(time) {
+          if (self.endDate) {
+            let endTime = self.$helpers.dayjs(self.endDate).valueOf();
+            return time.getTime() > endTime;
+          } else {
+            return time.getTime() >= Date.now() - 24 * 60 * 60 * 1000;
+          }
+        },
+      };
+    },
+    initStatue(val) {
+      if(val){
+        this.timer = val;
+      }else{
+         this.timer = "";
+      }
+
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.titleWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 55px;
+}
+</style>

src/views/smallStudentManager/components/studentChange.vue

@@ -36,7 +36,7 @@
 </template>
 <script>
 import countTo from "vue-count-to";
-import searchHeader from "@/views/main/baseinfo/modals/searchHeader";
+import searchHeader from "./searchHeader";
 import { studentSmallClassStatisticsSumForDate } from '../api';
 import { getTimes } from "@/utils";
 export default {