修改

package.json

@@ -8,12 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.8.3",
-    "vue": "^2.6.14",
     "axios": "0.17.1",
+    "core-js": "^3.8.3",
     "element-ui": "^2.15.12",
-    "vue-router": "^3.5.1",
-    "js-cookie": "2.2.0"
+    "js-cookie": "2.2.0",
+    "node-sass": "6.0.0",
+    "sass-loader": "11.1.0",
+    "vue": "^2.6.14",
+    "vue-quick-calendar": "^1.0.92",
+    "vue-router": "^3.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -22,11 +25,11 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "axios": "0.17.1",
+    "element-ui": "^2.15.12",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
-    "vue-template-compiler": "^2.6.14",
-    "axios": "0.17.1",
-    "element-ui": "^2.15.12"
+    "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
     "root": true,

src/api/allApi.js

@@ -146,19 +146,19 @@ export function useInfo(query) {
 }
 
 
-export function createNews(data) {
+export function sign(query) {
   return request({
-    url: '/news/createForDGTSiteNews',
+    url: '/mall-sign/sgin',
     method: 'post',
-    data
+    params:query
   })
 }
 
-export function updateNews(data) {
+export function signCount(query) {
   return request({
-    url: '/news/update',
+    url: '/mall-sign/signCount',
     method: 'post',
-    data
+    params:query
   })
 }
 

src/components/AppSidebar.vue

@@ -19,28 +19,28 @@ export default {
   data() {
     return {
         sideBarList:[
-            {
-                value:'index',
-                name:'首页',
-                path:'/home/index',
-                icon:'icon-mall-shouye',
-                checked:false,
-            },
             // {
-            //     value:'',
-            //     name:'每日签到',
-            //     path:'',
-            //     icon:'icon-mall-qiandao',
+            //     value:'index',
+            //     name:'首页',
+            //     path:'/home/index',
+            //     icon:'icon-mall-shouye',
             //     checked:false,
             // },
             {
-                value:'pointsMall',
-                name:'积分商城',
-                path:'/home/pointsMall',
-                icon:'icon-mall-jifenshangcheng',
+                value:'signIn',
+                name:'每日签到',
+                path:'/home/signIn',
+                icon:'icon-mall-qiandao',
                 checked:false,
             },
             // {
+            //     value:'pointsMall',
+            //     name:'积分商城',
+            //     path:'/home/pointsMall',
+            //     icon:'icon-mall-jifenshangcheng',
+            //     checked:false,
+            // },
+            // {
             //     value:'festiveEvents',
             //     name:'节日活动',
             //     path:'/home/festiveEvents',
@@ -48,26 +48,33 @@ export default {
             //     checked:false,
             // },
             {
-                value:'welfareList',
-                name:'福利领取',
-                path:'/home/welfareList',
-                icon:'icon-mall-hongbao',
-                checked:false,
-            },
-            {
-                value:'myCenter',
-                name:'个人中心',
-                path:'/home/myCenter',
-                icon:'icon-mall-gerenzhongxin',
+                value:'myMedal',
+                name:'我的勋章',
+                path:'/home/myMedal',
+                icon:'icon-mall-xunzhang',
                 checked:false,
             },
             // {
-            //     value:'',
-            //     name:'积分获取',
-            //     path:'',
-            //     icon:'icon-mall-zuorenwuzhuanjifen',
+            //     value:'welfareList',
+            //     name:'福利领取',
+            //     path:'/home/welfareList',
+            //     icon:'icon-mall-hongbao',
+            //     checked:false,
+            // },
+            // {
+            //     value:'myCenter',
+            //     name:'个人中心',
+            //     path:'/home/myCenter',
+            //     icon:'icon-mall-gerenzhongxin',
             //     checked:false,
             // },
+            {
+                value:'earnPoints',
+                name:'积分获取',
+                path:'/home/earnPoints',
+                icon:'icon-mall-zuorenwuzhuanjifen',
+                checked:false,
+            },
         ],
         employeeDynamics: false,
         pointsMall: false,

src/components/Calendar.vue

@@ -0,0 +1,358 @@
+<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>
+      <ul class='dates'>
+        <!-- 星期 -->
+        <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>
+      </ul>
+    </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']
+        }
+      },
+      // 选中的日期
+      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: [],
+        // 选中的日期
+        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 ['日', '一', '二', '三', '四', '五', '六']
+        }
+      },
+      dateStyle () {
+        return {
+          '--font-color': this.fontColor,
+          '--mark-color': this.markColor,
+          '--active-color': this.activeColor,
+          '--active-bg-color': this.activeBgColor
+        }
+      }
+    },
+    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 {
+            // 本月
+            // 下标 - 当前月第一天星期数 + 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()
+      }
+    }
+  }
+  </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{
+        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;
+          }
+        }
+      }
+      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%;
+          }
+          // 星期
+          &.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;
+              }
+            }
+            // 上个月、下个月
+            &.isNext, &.isPrep{
+              cursor: default;
+              opacity: .3;
+              &:hover{
+                color: $fontColor;
+                opacity: .3;
+                background: transparent;
+              }
+            }
+            // hidden
+            &.hidden{
+              opacity: 0;
+              &:hover{
+                opacity: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  </style>
+  

src/components/SiderInfo.vue

@@ -69,7 +69,7 @@ export default {
         };
     },
     created() {
-        this.getUserInfo();
+        // this.getUserInfo();
         this.getHoursTip()
     },
     methods: {

src/router/index.js

@@ -24,8 +24,16 @@ const routes = [
         component: () => import('@/views/HomeView/MsgDetail.vue')
       },
       {
-        path: '/home/employeeDynamics',
-        component: () => import('@/views/HomeView/EmployeeDynamics.vue')
+        path: '/home/signIn',
+        component: () => import('@/views/HomeView/SignIn.vue')
+      },
+      {
+        path: '/home/myMedal',
+        component: () => import('@/views/HomeView/MyMedal.vue')
+      },
+      {
+        path: '/home/earnPoints',
+        component: () => import('@/views/HomeView/EarnPoints.vue')
       },
       {
         path: '/home/pointsMall',

src/views/HomeView/EarnPoints.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="timeline-container">
+        <div class="timeline-content">
+            <div class="timeline-entry-list">
+               
+                <div class="entry-list-container">
+                   
+                </div>
+            </div>
+            <SiderInfo></SiderInfo>
+        </div>
+    </div>
+</template>
+<script>
+import { msgList } from "@/api/allApi";
+import SiderInfo from '@/components/SiderInfo.vue'
+export default{
+  components: {
+    SiderInfo
+  },
+  data() {
+    return {
+        dataList:[],
+        page:1,
+        pages:1,
+    };
+  },
+  created(){
+    // this.getDataList();
+  },
+  methods:{
+    handleClickMag(id) {
+        this.$router.push({
+            path: '/home/index/msgDetail',
+            query: {
+                id: id,
+            }
+        });
+    },
+    getDataList(){
+        let data = {
+            limit:10,
+            page:this.page,
+            type:0,
+        };
+        msgList(data).then(response=>{
+            if(this.page==1){
+                this.dataList = response.data.data.list;
+                this.page = response.data.data.pageNum;
+                this.pages = response.data.data.pages;
+            }else{
+                this.dataList = [
+                    ...this.dataList,
+                    ...response.data.data.list
+                ]
+            }
+            ++this.page  
+        })
+    },
+    
+  },
+}
+</script>
+<style scoped>
+.timeline-container{
+    margin: 0 auto;
+}
+.timeline-entry-list{
+    margin-right: 17.5rem;
+    border-radius: 2px;
+    width: 720px;
+    position: relative;
+}
+.entry-list-container{
+    background-color: #fff;
+    border-radius: 4px;
+    min-height: 500px;
+}
+.entry-list-container .tab-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 20px 16px;
+    border-bottom: 1px solid #e5e6eb;
+    overflow: hidden;
+}
+
+.tab-header .tab-title {
+    white-space: nowrap;
+    font-size: 18px;
+    font-weight: 600;
+}
+.entry-list{
+    width: 100%;
+    background-color: #fff;
+    position: relative;
+}
+.list-item:hover {
+    background: #fafafa;
+}
+.list-item{
+    position: relative;
+    cursor: pointer;
+    padding: 12px 20px 0;
+}
+.list-item .meta-container{
+    display: flex;
+    align-items: center;
+}
+.list-item .meta-container .user-message{
+    max-width: 162px;
+    font-size: 13px;
+    line-height: 22px;
+    color: #4e5969;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+.list-item .meta-container .dividing{
+    line-height: 22px;
+    width: 1px;
+    height: 14px;
+    background: #e5e6eb;
+    margin: 0 8px;
+}
+.list-item .meta-container .date{
+    line-height: 22px;
+    font-size: 13px;
+    color: #86909c;
+}
+.list-item .main{
+    margin-top: 6px;
+    padding-bottom: 12px;
+    display: flex;
+    border-bottom: 1px solid #e5e6eb;
+}
+.list-item .main .info-box{
+    flex-grow: 1;
+}
+.list-item .main .info-box .title:visited {
+    color: #86909c;
+}
+.list-item .main .info-box .title{
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    color: #1d2129;
+    margin-bottom: 8px;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}
+.list-item .main .info-box .description{
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 22px;
+    color: #86909c;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+.list-item .thumb{
+    flex: 0 0 auto;
+    width: 120px;
+    height: 80px;
+    margin-left: 24px;
+    border-radius: 2px;
+}
+</style>

src/views/HomeView/EmployeeDynamics.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="EmployeeDynamics">
-        首页
-    </div>
-</template>

src/views/HomeView/Index.vue

@@ -43,7 +43,7 @@
         </div>
     </div>
 </template>
-<script>
+<script scoped>
 import { msgList } from "@/api/allApi";
 import SiderInfo from '@/components/SiderInfo.vue'
 export default{
@@ -146,7 +146,6 @@ export default{
     white-space: nowrap;
     font-size: 18px;
     font-weight: 600;
-    color: #1e80ff;
 }
 .entry-list{
     width: 100%;

src/views/HomeView/MsgDetail.vue

@@ -42,7 +42,7 @@ export default{
   },
 }
 </script>
-<style>
+<style scoped>
 .timeline-container{
     margin: 0 auto;
 }

src/views/HomeView/MyCenter.vue

@@ -120,7 +120,7 @@
 
     </div>
 </template>
-<script>
+<script scoped>
 import { orderList, welfareList, } from "@/api/allApi";
 export default {
     data() {
@@ -382,9 +382,6 @@ svg:not(:root) {
 }
 .status.bottom{
     margin-top: 55px;
-}
-.status span{
-    
 }
 .status .use-btn {
     color: #1e80ff;

src/views/HomeView/SignIn.vue

@@ -0,0 +1,470 @@
+<template>
+  <div class="timeline-container">
+    <div class="timeline-content">
+      <div class="timeline-entry-list">
+        <div class="entry-list-container">
+          <div class="tab-header">
+            <span class="tab-title">每日签到</span>
+          </div>
+          <div class="content-body">
+            <div class="figures">
+              <div class="figure-card">
+                <div class="figure">{{ signDays }}</div>
+                <div class="attention">
+                  <span class="text">本月累计签到天数</span>
+                </div>
+              </div>
+              <div class="figure-card">
+                <div class="figure">{{ integral }}</div>
+                <div class="attention">
+                  <span class="text">本月签到获得积分</span>
+                </div>
+              </div>
+            </div>
+            <calendar
+              showPrepNext
+              :markDate="markDate"
+              @clickDate="clickDate"
+              @changeMonth="changeMonth"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="index-aside aside" :class="{ 'sticky top': isActive }">
+        <div class="signin-tip sidebar-block signin">
+          <div class="first-line">
+            <button @click="signIn" v-if="dataInfo.signStatus == 0" class="btn">
+              立即签到
+            </button>
+            <button v-else class="btn signed-btn">今日已签到</button>
+          </div>
+        </div>
+        <div class="signin-tip sidebar-block">
+          <div class="avatar">
+            <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+            <span class="name">{{ dataInfo.userName }}</span>
+          </div>
+          <div class="info">
+            <div class="info-item">
+              <div class="item-itle">部门：</div>
+              <div class="item-content">{{ dataInfo.deptName }}</div>
+            </div>
+            <div class="info-item">
+              <div class="item-itle">我的积分：</div>
+              <div class="item-content blue">
+                {{ dataInfo.surplusIntegral }}积分
+              </div>
+            </div>
+            <div class="info-item">
+              <div class="item-itle">我的勋章：</div>
+              <div class="item-content blue">{{ dataInfo.medalCount }}个</div>
+            </div>
+          </div>
+        </div>
+        <div class="sidebar-block sticky-block">
+          <div class="avatar">
+            <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+            <span class="name">{{ dataInfo.userName }}</span>
+          </div>
+          <div class="info">
+            <div class="info-item">
+              <div class="item-itle">部门：</div>
+              <div class="item-content">{{ dataInfo.deptName }}</div>
+            </div>
+            <div class="info-item">
+              <div class="item-itle">我的积分：</div>
+              <div class="item-content blue">
+                {{ dataInfo.surplusIntegral }}积分
+              </div>
+            </div>
+            <div class="info-item">
+              <div class="item-itle">我的勋章：</div>
+              <div class="item-content blue">{{ dataInfo.medalCount }}个</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { sign, signInfo,useInfo } from "@/api/allApi";
+import calendar from '@/components/Calendar'
+export default {
+  components: {
+    calendar,
+  },
+  data() {
+    return {
+      signDays:'20',
+      integral:'20',
+      markDate: ["2023/5/4"],
+      isActive: false,
+      dataInfo: {},
+      avatarUrl:
+        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+      dataList: [],
+    };
+  },
+  created() {
+    // this.getSignInfo();
+    // this.getUserInfo();
+  },
+  methods: {
+    // 点击日期
+    clickDate(date) {
+      console.log(date);
+    },
+    // 切换月份
+    changeMonth(date) {
+      console.log(date);
+    },
+    getUserInfo() {
+      const parmas = {
+        userId: 13683797487,
+      };
+      useInfo(parmas).then((response) => {
+        this.dataInfo = response.data.data;
+        this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
+      });
+    },
+    getSignInfo() {
+      const parmas = {
+        userId: 13683797487,
+      };
+      signInfo(parmas).then((response) => {
+          this.markDate = response.data.data.signDays;
+          this.integral = response.data.data.integral;
+          this.signDays = response.data.data.signDays.length;
+      });
+    },
+    signIn() {
+      sign().then((response) => {
+        this.$notify({
+          title: '成功',
+          message: '签到成功！',
+          type: 'success'
+        });
+        // this.getSignInfo();
+      });
+    },
+    // 保存滚动值，这是兼容的写法
+    handleScroll() {
+      let scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+      if (scrollTop >= 550) {
+        this.isActive = true;
+      } else {
+        this.isActive = false;
+      }
+    },
+  },
+
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll, true);
+  },
+
+  destroyed() {
+    // 离开该页面需要移除这个监听的事件，不然会报错
+    window.removeEventListener("scroll", this.handleScroll);
+  },
+};
+</script>
+<style scoped>
+.timeline-container {
+  margin: 0 auto;
+}
+.timeline-entry-list {
+  margin-right: 17.5rem;
+  border-radius: 2px;
+  width: 720px;
+  position: relative;
+}
+.entry-list-container {
+  background-color: #fff;
+  border-radius: 4px;
+  min-height: 500px;
+}
+.entry-list-container .tab-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid #e5e6eb;
+  overflow: hidden;
+}
+
+.tab-header .tab-title {
+  white-space: nowrap;
+  font-size: 18px;
+  font-weight: 600;
+}
+.content-body {
+  padding: 10px 20px 16px;
+}
+.content-body .figures {
+  display: flex;
+  flex-shrink: 0;
+  min-width: 586px;
+  justify-content: space-around;
+  background-color: #f7f8fa;
+  border-radius: 2px;
+  padding: 20px 55px;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+.figure-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.figure-card .figure {
+  font-weight: 700;
+  font-size: 32px;
+  color: #1d2129;
+  line-height: 36px;
+  font-family: DIN Alternate;
+  white-space: nowrap;
+  margin-right: 12px;
+  position: relative;
+  top: 1px;
+}
+.figure-card .attention {
+  display: flex;
+  align-items: flex-end;
+  margin-top: 4px;
+}
+.figure-card .attention .text {
+  color: #86909c;
+  font-weight: 400;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.entry-list {
+  width: 100%;
+  background-color: #fff;
+  position: relative;
+}
+.list-item:hover {
+  background: #fafafa;
+}
+.list-item {
+  position: relative;
+  cursor: pointer;
+  padding: 12px 20px 0;
+}
+.list-item .meta-container {
+  display: flex;
+  align-items: center;
+}
+.list-item .meta-container .user-message {
+  max-width: 162px;
+  font-size: 13px;
+  line-height: 22px;
+  color: #4e5969;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+.list-item .meta-container .dividing {
+  line-height: 22px;
+  width: 1px;
+  height: 14px;
+  background: #e5e6eb;
+  margin: 0 8px;
+}
+.list-item .meta-container .date {
+  line-height: 22px;
+  font-size: 13px;
+  color: #86909c;
+}
+.list-item .main {
+  margin-top: 6px;
+  padding-bottom: 12px;
+  display: flex;
+  border-bottom: 1px solid #e5e6eb;
+}
+.list-item .main .info-box {
+  flex-grow: 1;
+}
+.list-item .main .info-box .title:visited {
+  color: #86909c;
+}
+.list-item .main .info-box .title {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  color: #1d2129;
+  margin-bottom: 8px;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.list-item .main .info-box .description {
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 22px;
+  color: #86909c;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.list-item .thumb {
+  flex: 0 0 auto;
+  width: 120px;
+  height: 80px;
+  margin-left: 24px;
+  border-radius: 2px;
+}
+.aside {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.aside.index-aside {
+  width: 16.3rem;
+}
+
+.hot-list-wrap {
+  /* padding: 1.33rem 0 0.66rem; */
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 1.25rem;
+}
+
+.timeline-index-view.sidebar-block {
+  box-shadow: none;
+}
+
+.sidebar-block {
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  margin-bottom: 1rem;
+  font-size: 1.16rem;
+  line-height: 1.29;
+  border-radius: 4px;
+  color: #333;
+}
+
+.signin-tip {
+  padding: 20px;
+  background-color: #fff;
+  box-sizing: border-box;
+}
+
+.first-line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.first-line .btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 240px;
+  height: 56px;
+  border-radius: 4px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #fff;
+  background-color: #007fff;
+  border: none;
+}
+
+.first-line .signed-btn {
+  background-color: #e8f3ff;
+  color: #1e80ff;
+}
+.first-line .btn-text {
+  font-size: 14px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.first-line .title {
+  color: #1d2129;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.second-line {
+  color: #8a919f;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-top: 2px;
+}
+
+.first-line .title-days {
+  margin-left: 4px;
+  color: #1e80ff;
+}
+
+.sidebar-block .avatar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.avatar .name {
+  margin-top: 2px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #252933;
+}
+
+.sidebar-block .info {
+  margin-top: 5px;
+}
+
+.info .info-item {
+  font-size: 1rem;
+  display: flex;
+  justify-content: space-between;
+  line-height: 2rem;
+}
+
+.info-item .blue {
+  color: #1e80ff;
+}
+
+.sidebar-block.sticky-block {
+  padding: 20px;
+  background-color: #fff;
+  box-sizing: border-box;
+  position: fixed;
+  box-shadow: none;
+  opacity: 0;
+  transition: all 0.2s;
+  width: 16.3rem;
+  z-index: -1;
+  top: 67px;
+  pointer-events: none;
+}
+
+.index-aside.sticky.top .sticky-block {
+  top: 20px;
+}
+
+.index-aside.sticky .sticky-block {
+  opacity: 1;
+  top: 80px;
+  z-index: 5;
+  pointer-events: all;
+}
+</style>

src/views/HomeView/WelfareList.vue

@@ -46,7 +46,7 @@
 
     </div>
 </template>
-<script>
+<script scoped>
 import { welfareList, receiveWelfare } from "@/api/allApi";
 export default {
     data() {

src/views/NoticeCenter.vue

@@ -109,7 +109,7 @@ export default{
   }
 }
 </script>
-<style>
+<style scoped>
 .container {
     position: relative;
     margin: 0 auto;

src/views/PointsRank.vue

@@ -15,7 +15,7 @@ export default {
   }
 }
 </script>
-<style>
+<style scoped>
 .main-container{
   position: relative;
   margin: 0 auto;

src/views/PointsRank/History.vue

@@ -82,7 +82,7 @@
  }
  }
  </script>
- <style>
+ <style scoped>
  .timeline-container{
    margin: 0 auto;
  }
@@ -109,7 +109,6 @@
    white-space: nowrap;
    font-size: 18px;
    font-weight: 600;
-   color: #1e80ff;
  }
  .entry-list{
    width: 100%;

src/views/PointsRank/Present.vue

@@ -81,7 +81,7 @@
   }
   }
   </script>
-  <style>
+  <style scoped>
   .timeline-container{
     margin: 0 auto;
   }
@@ -109,7 +109,6 @@
     white-space: nowrap;
     font-size: 18px;
     font-weight: 600;
-    color: #1e80ff;
   }
   .entry-list{
     width: 100%;

vue.config.js

@@ -1,7 +1,20 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
-  lintOnSave:false //关闭eslint检查
+  lintOnSave:false,
+   //关闭eslint检查
+   css: {
+           loaderOptions: {
+               // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
+               // 因为 `scss` 语法在内部也是由 sass-loader 处理的
+               // 但是在配置 `additionalData` 选项的时候
+               // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
+               // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
+               scss: {
+                   additionalData: `@import "~@/assets/styles/index.scss";`
+               },
+           }
+       }
 })