修改

src/components/Calendar.vue

@@ -1,358 +1,385 @@
 <template>
-    <section class='m-calendar' :style="dateStyle">
-      <!-- 切换月份 -->
-      <header class='changeMonth'>
-        <!-- <span class='prepMonth' @click="changeMonth(-1)"></span> -->
-        <h1>{{year}}年{{month}}月</h1>
-        <!-- <span class='nextMonth' @click="changeMonth(1)"></span> -->
-      </header>
+  <section class='m-calendar' :style="dateStyle">
+    <!-- 切换月份 -->
+    <header class='changeMonth'>
+      <!-- <span class='prepMonth' @click="changeMonth(-1)"></span> -->
+      <h1>{{ year }}年{{ month }}月</h1>
+      <!-- <span class='nextMonth' @click="changeMonth(1)"></span> -->
+    </header>
+    <div class="box-shadow">
       <ul class='dates'>
         <!-- 星期 -->
-        <li class='weeks' v-for="item in weeks" :key="item">{{item}}</li>
+        <li class='weeks' v-for="item in weeks" :key="item">{{ item }}</li>
         <!-- 日期 -->
-        <li
-          class='day'
-          v-for="(item, i) in dates" :key="i"
-          :class="{
-            isPrep: item.isPrep,
-            isNext: item.isNext,
-            hidden: (item.isNext || item.isPrep) && !showPrepNext,
-            isToday: item.date == today,
-            isSelected: item.date == selectedDate,
-            isMarked: markDates.includes(item.date)
-          }"
-          @click="clickDate(item)"
-        >{{item.date == today ? '今' : item.day}}</li>
+        <li class='day' v-for="(item, i) in dates" :key="i" :class="{
+          isPrep: item.isPrep,
+          isNext: item.isNext,
+          hidden: (item.isNext || item.isPrep) && !showPrepNext,
+          isToday: item.date == today,
+          isSelected: item.date == selectedDate,
+          isMarked: markDates.includes(item.date)
+        }" @click="clickDate(item)">{{ item.date == today ? '今' : item.day }}</li>
       </ul>
-    </section>
-  </template>
+    </div>
+
+  </section>
+</template>
   
-  <script>
-  const D = new Date()
-  const ThisYear = D.getFullYear()
-  const ThisMonth = D.getMonth() + 1
-  const today = new Date().toLocaleDateString()
-  export default {
-    // props都为非必传
-    props: {
-      // 初始年月
-      startYearMonth: {
-        type: String,
-        default () {
-          return `${ThisYear}/${ThisMonth}`
-          // 格式：2021-1或2020-01或者2020/1或者2020/01
-        }
-      },
-      // 需要标记的日期数组
-      markDate: {
-        type: Array,
-        default () {
-          return []
-          // 格式：['2020-01-01', '2020-02-12']
-        }
-      },
+<script>
+const D = new Date()
+const ThisYear = D.getFullYear()
+const ThisMonth = D.getMonth() + 1
+const today = new Date().toLocaleDateString()
+export default {
+  // props都为非必传
+  props: {
+    // 初始年月
+    startYearMonth: {
+      type: String,
+      default() {
+        return `${ThisYear}/${ThisMonth}`
+        // 格式：2021-1或2020-01或者2020/1或者2020/01
+      }
+    },
+    // 需要标记的日期数组
+    markDate: {
+      type: Array,
+      default() {
+        return []
+        // 格式：['2020-01-01', '2020-02-12']
+      }
+    },
+    // 选中的日期
+    checkedDate: {
+      type: String,
+      default() {
+        return ''
+        // 格式：'2020-01-01'
+      }
+    },
+    // 是否星期一开始，默认星期日开始
+    mondayStart: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    // 是否显示上个月和下个月日期
+    showPrepNext: {
+      type: Boolean,
+      default() {
+        return true
+      }
+    },
+    // 日期字体颜色
+    fontColor: {
+      type: String,
+      default() {
+        return '#000'
+      }
+    },
+    // 标记点颜色
+    markColor: {
+      type: String,
+      default() {
+        return '#1e80ff'
+      }
+    },
+    // 选中的日期字体颜色
+    activeColor: {
+      type: String,
+      default() {
+        return '#fff'
+      }
+    },
+    // 选中的日期背景颜色
+    activeBgColor: {
+      type: String,
+      default() {
+        return '#1e80ff'
+      }
+    }
+  },
+  data() {
+    return {
+      // 当前年
+      year: ThisYear,
+      // 当前月
+      month: ThisMonth,
+      // 今天
+      today,
+      // 日期数组
+      dates: [],
       // 选中的日期
-      checkedDate: {
-        type: String,
-        default () {
-          return ''
-          // 格式：'2020-01-01'
-        }
-      },
-      // 是否星期一开始，默认星期日开始
-      mondayStart: {
-        type: Boolean,
-        default () {
-          return false
-        }
-      },
-      // 是否显示上个月和下个月日期
-      showPrepNext: {
-        type: Boolean,
-        default () {
-          return true
-        }
-      },
-      // 日期字体颜色
-      fontColor: {
-        type: String,
-        default () {
-          return '#000'
-        }
-      },
-      // 标记点颜色
-      markColor: {
-        type: String,
-        default () {
-          return '#1e80ff'
-        }
-      },
-      // 选中的日期字体颜色
-      activeColor: {
-        type: String,
-        default () {
-          return '#fff'
-        }
-      },
-      // 选中的日期背景颜色
-      activeBgColor: {
-        type: String,
-        default () {
-          return '#1e80ff'
-        }
+      selectedDate: ''
+    }
+  },
+  computed: {
+    // 标记的日期
+    markDates() {
+      // 获得不带0的日期，如：2021/1/1  =>  2021/1/1
+      return this.markDate.map(item => this.formatDate(item))
+    },
+    // 星期
+    weeks() {
+      if (this.mondayStart) {
+        return ['一', '二', '三', '四', '五', '六', '日']
+      } else {
+        return ['日', '一', '二', '三', '四', '五', '六']
       }
     },
-    data () {
+    dateStyle() {
       return {
-        // 当前年
-        year: ThisYear,
-        // 当前月
-        month: ThisMonth,
-        // 今天
-        today,
-        // 日期数组
-        dates: [],
-        // 选中的日期
-        selectedDate: ''
+        '--font-color': this.fontColor,
+        '--mark-color': this.markColor,
+        '--active-color': this.activeColor,
+        '--active-bg-color': this.activeBgColor
       }
-    },
-    computed: {
-      // 标记的日期
-      markDates () {
-        // 获得不带0的日期，如：2021/1/1  =>  2021/1/1
-        return this.markDate.map(item => this.formatDate(item))
-      },
-      // 星期
-      weeks () {
-        if (this.mondayStart) {
-          return ['一', '二', '三', '四', '五', '六', '日']
+    }
+  },
+  created() {
+    this.year = new Date(this.startYearMonth).getFullYear()
+    this.month = new Date(this.startYearMonth).getMonth() + 1
+    // 选中的日期
+    if (this.checkedDate) {
+      // 获得不带0的日期，如：2021-1-1  =>  2021/1/1
+      this.selectedDate = this.formatDate(this.checkedDate)
+    }
+    // 初始化日历
+    this.initCalendar()
+  },
+  methods: {
+    // 初始化日历
+    initCalendar() {
+      // ⚠️注意：new Date中的month要减1才是真正的本月月数，即本月：this.month - 1，下个月：this.month
+      // ⚠️注意：下个月的第0天即为本月的最后一天
+      // 上个月总天数（本月第0天日期）
+      const prepMonthDays = new Date(this.year, this.month - 1, 0).getDate()
+      // 上个月最后一天星期几（本月第0天星期数）
+      const prepMonthEndDayWeek = new Date(this.year, this.month - 1, 0).getDay()
+      // 当前月总天数（下个月第0天日期）
+      const thisMonthDays = new Date(this.year, this.month, 0).getDate()
+      // 当前月第一天是星期几
+      const firstDayWeek = new Date(this.year, this.month - 1, 1).getDay()
+      // 当前月最后一天是星期几（下个月第0天星期数）
+      const thisEndDayWeek = new Date(this.year, this.month, 0).getDay()
+      var dates = []
+      // 需要计算的总天数
+      var totalDays = firstDayWeek + thisMonthDays
+      // 从星期一开始index为1，从星期天开始index为0
+      var index = this.mondayStart ? 1 : 0
+      // 星期一开始且本月最后一天是星期天之后，需补满最后一行
+      if (this.mondayStart && thisEndDayWeek > 0) {
+        totalDays += 7 - thisEndDayWeek
+      } else if (!this.mondayStart && thisEndDayWeek < 6) {
+        // 星期天开始且本月最后一天是星期天之前，需补满最后一行
+        totalDays += 6 - thisEndDayWeek
+      }
+      for (index; index < totalDays; index++) {
+        // 上个月月底
+        if (index < firstDayWeek) {
+          // 上个月天数 - 上个月最后一天星期数 + 下标 (如：31 - 5 + 0)
+          const day = prepMonthDays - prepMonthEndDayWeek + index
+          const date = new Date(this.year, this.month - 2, day).toLocaleDateString()
+          dates.push({ isPrep: true, day, date })
+        } else if (index >= firstDayWeek + thisMonthDays) {
+          // 下个月月初
+          // 下标 - 当前月总天数 - 当前月第一天星期数 + 1 (如：30 - 31 + 1 + 1)
+          const day = index - thisMonthDays - firstDayWeek + 1
+          const date = new Date(this.year, this.month, day).toLocaleDateString()
+          dates.push({ isNext: true, day, date })
         } else {
-          return ['日', '一', '二', '三', '四', '五', '六']
-        }
-      },
-      dateStyle () {
-        return {
-          '--font-color': this.fontColor,
-          '--mark-color': this.markColor,
-          '--active-color': this.activeColor,
-          '--active-bg-color': this.activeBgColor
+          // 本月
+          // 下标 - 当前月第一天星期数 + 1 (如：5 - 5 + 1)
+          const day = index - firstDayWeek + 1
+          const date = new Date(this.year, this.month - 1, day).toLocaleDateString()
+          dates.push({ day, date })
         }
       }
+      this.dates = [...dates]
     },
-    created () {
-      this.year = new Date(this.startYearMonth).getFullYear()
-      this.month = new Date(this.startYearMonth).getMonth() + 1
-      // 选中的日期
-      if (this.checkedDate) {
-        // 获得不带0的日期，如：2021-1-1  =>  2021/1/1
-        this.selectedDate = this.formatDate(this.checkedDate)
+    // 点击日期
+    clickDate({ date, isPrep, isNext }) {
+      if (isPrep || isNext) return
+      this.selectedDate = date
+      this.$emit('clickDate', date.replace(/\//g, '-'))
+    },
+    // 切换月份
+    changeMonth(month) {
+      this.month += month
+      if (this.month === 0) {
+        this.month = 12
+        this.year--
+      } else if (this.month === 13) {
+        this.month = 1
+        this.year++
       }
-      // 初始化日历
       this.initCalendar()
+      this.$emit('changeMonth', `${this.year}-${this.month}`)
     },
-    methods: {
-      // 初始化日历
-      initCalendar () {
-        // ⚠️注意：new Date中的month要减1才是真正的本月月数，即本月：this.month - 1，下个月：this.month
-        // ⚠️注意：下个月的第0天即为本月的最后一天
-        // 上个月总天数（本月第0天日期）
-        const prepMonthDays = new Date(this.year, this.month - 1, 0).getDate()
-        // 上个月最后一天星期几（本月第0天星期数）
-        const prepMonthEndDayWeek = new Date(this.year, this.month - 1, 0).getDay()
-        // 当前月总天数（下个月第0天日期）
-        const thisMonthDays = new Date(this.year, this.month, 0).getDate()
-        // 当前月第一天是星期几
-        const firstDayWeek = new Date(this.year, this.month - 1, 1).getDay()
-        // 当前月最后一天是星期几（下个月第0天星期数）
-        const thisEndDayWeek = new Date(this.year, this.month, 0).getDay()
-        var dates = []
-        // 需要计算的总天数
-        var totalDays = firstDayWeek + thisMonthDays
-        // 从星期一开始index为1，从星期天开始index为0
-        var index = this.mondayStart ? 1 : 0
-        // 星期一开始且本月最后一天是星期天之后，需补满最后一行
-        if (this.mondayStart && thisEndDayWeek > 0) {
-          totalDays += 7 - thisEndDayWeek
-        } else if (!this.mondayStart && thisEndDayWeek < 6) {
-          // 星期天开始且本月最后一天是星期天之前，需补满最后一行
-          totalDays += 6 - thisEndDayWeek
-        }
-        for (index; index < totalDays; index++) {
-          // 上个月月底
-          if (index < firstDayWeek) {
-            // 上个月天数 - 上个月最后一天星期数 + 下标 (如：31 - 5 + 0)
-            const day = prepMonthDays - prepMonthEndDayWeek + index
-            const date = new Date(this.year, this.month - 2, day).toLocaleDateString()
-            dates.push({ isPrep: true, day, date })
-          } else if (index >= firstDayWeek + thisMonthDays) {
-            // 下个月月初
-            // 下标 - 当前月总天数 - 当前月第一天星期数 + 1 (如：30 - 31 + 1 + 1)
-            const day = index - thisMonthDays - firstDayWeek + 1
-            const date = new Date(this.year, this.month, day).toLocaleDateString()
-            dates.push({ isNext: true, day, date })
-          } else {
-            // 本月
-            // 下标 - 当前月第一天星期数 + 1 (如：5 - 5 + 1)
-            const day = index - firstDayWeek + 1
-            const date = new Date(this.year, this.month - 1, day).toLocaleDateString()
-            dates.push({ day, date })
-          }
-        }
-        this.dates = [...dates]
-      },
-      // 点击日期
-      clickDate ({ date, isPrep, isNext }) {
-        if (isPrep || isNext) return
-        this.selectedDate = date
-        this.$emit('clickDate', date.replace(/\//g, '-'))
-      },
-      // 切换月份
-      changeMonth (month) {
-        this.month += month
-        if (this.month === 0) {
-          this.month = 12
-          this.year--
-        } else if (this.month === 13) {
-          this.month = 1
-          this.year++
-        }
-        this.initCalendar()
-        this.$emit('changeMonth', `${this.year}-${this.month}`)
-      },
-      // 格式化日期
-      formatDate (date) {
-        // 获得不带0，且分隔符为/的日期，如：2020-01-01  =>  2021/1/1
-        return new Date(date).toLocaleDateString()
-      }
+    // 格式化日期
+    formatDate(date) {
+      // 获得不带0，且分隔符为/的日期，如：2020-01-01  =>  2021/1/1
+      return new Date(date).toLocaleDateString()
     }
   }
-  </script>
+}
+</script>
   
-  <style lang='scss' scoped>
-    $fontColor: var(--font-color);
-    $markColor: var(--mark-color);
-    $activeColor: var(--active-color);
-    $activeBgColor: var(--active-bg-color);
-    .m-calendar{
-      max-width: 720px;
-      max-height: 810px;
-    //   border: 1px solid #054C96;
-      border-radius: 8px 8px 0 0;
-      padding-bottom: 20px;
-      header{
+<style lang='scss' scoped>
+$fontColor: var(--font-color);
+$markColor: var(--mark-color);
+$activeColor: var(--active-color);
+$activeBgColor: var(--active-bg-color);
+
+.m-calendar {
+  max-width: 720px;
+  max-height: 810px;
+  //   border: 1px solid #054C96;
+  border-radius: 8px 8px 0 0;
+  padding-bottom: 20px;
+
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // border-bottom: 1px solid #054C96;
+    padding: 20px 0;
+    margin-bottom: 5px;
+
+    h1 {
+      margin: 0 20px;
+      color: #444;
+      font-size: 20px;
+      font-weight: bold;
+      width: 120px;
+      text-align: center;
+    }
+
+    span {
+      cursor: pointer;
+      padding: 4px 10px;
+
+      &::after {
+        display: inline-block;
+        content: '';
+        width: 10px;
+        height: 10px;
+        border-top: 2px solid $fontColor;
+      }
+
+      &.prepMonth::after {
+        border-left: 2px solid $fontColor;
+        transform: rotate(-45deg);
+      }
+
+      &.nextMonth::after {
+        border-right: 2px solid $fontColor;
+        transform: rotate(45deg);
+      }
+
+      &:hover::after {
+        border-color: $markColor;
+      }
+    }
+  }
+
+  .box-shadow {
+    border-radius: 5px;
+    border: 1px solid #EBEEF5;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0 auto;
+      padding: 0 12px;
+
+      li {
+        width: 42px;
+        height: 42px;
+        margin: 20px calc((100% / 7 - 42px) / 2);
         display: flex;
-        align-items: center;
+        flex-direction: column;
         justify-content: center;
-        // border-bottom: 1px solid #054C96;
-        padding: 20px 0;
-        margin-bottom: 5px;
-        h1{
-          margin: 0 20px;
+        align-items: center;
+        font-weight: bold;
+        position: relative;
+        transition: all ease .25s;
+        border-radius: 6px;
+
+        // 标记
+        &::after {
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          position: absolute;
+          display: inline-block;
+          content: '';
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+        }
+
+        // 星期
+        &.weeks {
+          font-size: 18px;
           color: #444;
-          font-size: 20px;
-          font-weight: bold;
-          width: 120px;
-          text-align: center;
+          margin-bottom: 12px;
         }
-        span{
+
+        &.day {
           cursor: pointer;
-          padding: 4px 10px;
-          &::after{
-            display: inline-block;
-            content: '';
-            width: 10px;
-            height: 10px;
-            border-top: 2px solid $fontColor;
-          }
-          &.prepMonth::after{
-            border-left: 2px solid $fontColor;
-            transform: rotate(-45deg);
-          }
-          &.nextMonth::after{
-            border-right: 2px solid $fontColor;
-            transform: rotate(45deg);
-          }
-          &:hover::after{
-            border-color: $markColor;
+          font-size: 20px;
+          color: $fontColor;
+
+          // 今天
+          &.isToday {
+            color: $markColor;
           }
-        }
-      }
-      ul{
-        display: flex;
-        flex-wrap: wrap;
-        margin: 0 auto;
-        padding: 0 12px;
-        li{
-          width: 42px;
-          height: 42px;
-          margin: 20px calc((100% / 7 - 42px) / 2);
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          font-weight: bold;
-          position: relative;
-          transition: all ease .25s;
-          border-radius: 6px;
+
           // 标记
-          &::after{
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            position: absolute;
-            display: inline-block;
-            content: '';
-            width: 5px;
-            height: 5px;
-            border-radius: 50%;
+          &.isMarked::after {
+            transition: all ease .25s;
+            background: $markColor;
           }
-          // 星期
-          &.weeks{
-            font-size: 18px;
-            color: #444;
-            margin-bottom: 12px;
-          }
-          &.day{
-            cursor: pointer;
-            font-size: 20px;
-            color: $fontColor;
-            // 今天
-            &.isToday{
-              color: $markColor;
-            }
-            // 标记
-            &.isMarked::after{
-              transition: all ease .25s;
-              background: $markColor;
+
+          // 选中、hover
+          &:hover,
+          &.isSelected {
+            background: $activeBgColor;
+            color: $activeColor;
+
+            &:after {
+              display: none;
             }
-            // 选中、hover
-            &:hover, &.isSelected{
-              background: $activeBgColor;
-              color: $activeColor;
-              &:after{
-                display: none;
-              }
-            }
-            // 上个月、下个月
-            &.isNext, &.isPrep{
-              cursor: default;
+          }
+
+          // 上个月、下个月
+          &.isNext,
+          &.isPrep {
+            cursor: default;
+            opacity: .3;
+
+            &:hover {
+              color: $fontColor;
               opacity: .3;
-              &:hover{
-                color: $fontColor;
-                opacity: .3;
-                background: transparent;
-              }
+              background: transparent;
             }
-            // hidden
-            &.hidden{
+          }
+
+          // hidden
+          &.hidden {
+            opacity: 0;
+
+            &:hover {
               opacity: 0;
-              &:hover{
-                opacity: 0;
-              }
             }
           }
         }
       }
     }
-  </style>
+  }
+
+}</style>
   

src/main.js

@@ -11,11 +11,11 @@ const baseUrl = 'https://xiaoyou.dgtis.com/admin/storage/create';
 Vue.prototype.baseUrl = baseUrl;
 Vue.config.productionTip = false;
 
-Vue.prototype.getMsgTips = function (){
-  msgTips().then(response => {
-    return response.data.data
-  })
-}
+// Vue.prototype.getMsgTips = function (){
+//   msgTips().then(response => {
+//     return response.data.data
+//   })
+// }
 // this.getMsgTips();
 Vue.use(ElementUI);
 new Vue({

src/views/HomeView/Commend.vue

@@ -203,20 +203,24 @@ img {
 .serie .badge-icon-list{
     display: grid;
     justify-content: space-between;
-    grid-template-columns: repeat(auto-fill,100px);
+    grid-template-columns: repeat(auto-fill,118px);
     grid-gap: 10px 20px;
     flex-wrap: wrap;
 }
 .serie .badge-icon-list .badge-icon-item{
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
-    width: 100px;
+    width: 118px;
     font-style: normal;
     font-weight: 400;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 .serie .badge-icon-list .badge-icon-item .badge-item-icon{
-    width: 100px;
-    height: 100px;
+    width: 65px;
+    height: 65px;
 }
 .serie .badge-icon-list .badge-icon-item .badge-item-icon .not-obtain{
     filter: grayscale(100%);

src/views/PointsRank/Present.vue

@@ -23,13 +23,13 @@
               <div v-for="(item,index) in 10" :key="index" class="list-title list-item">
                 <div class="title-left">
                   <div class="left-rank">
-                    <el-avatar v-if="index==0" :size="50" :src="avatarUrl"></el-avatar>
-                    <el-avatar v-else-if="index==1" :size="50" :src="avatarUrl"></el-avatar>
-                    <el-avatar v-else-if="index==2" :size="50" :src="avatarUrl"></el-avatar>
+                    <img v-if="index==0" style="width: 35px;" :src="firstIcon"/>
+                    <img v-else-if="index==1" style="width: 35px;" :src="secondIcon"/>
+                    <img v-else-if="index==2" style="width: 35px;" :src="thirdIcon"/>
                     <div v-else>{{ index+1 }}</div>
                   </div>
                   <div class="left-avatar">
-                    <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+                    <el-avatar :size="35" :src="avatarUrl"></el-avatar>
                   </div>
                   <div class="left-userName item-text">兔子爱吃香蕉皮</div>
                 </div>
@@ -55,6 +55,9 @@ export default {
   },
   data() {
     return {
+      firstIcon: require('@/assets/image/first.png'),
+      secondIcon: require('@/assets/image/second.png'),
+      thirdIcon: require('@/assets/image/third.png'),
       avatarUrl:
         "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
       dataList: [],