zc更换主页页面

src/views/dashboard/index.vue

 <template>
   <div>
     <!--头部-->
-    <base-info ref="baseInfo"/>
+    <!-- <base-info ref="baseInfo"/> -->
     <!--小方块-->
-    <grid-menu class="mb20"/>
+    <!-- <grid-menu/> -->
     <!--订单统计-->
-    <visit-chart ref="visitChart"/>
+    <!-- <visit-chart ref="visitChart"/> -->
     <!--用户-->
-    <user-chart ref="userChart" class="mb20"/>
+    <!-- <user-chart ref="userChart" class="mb20"/> -->
+    <div class="divBox">
+      <el-card class="box-card" style="min-height: 700px;">
+        <div class="box">
+          <span></span>
+          <div class="content">
+            <h2>欢迎回来！</h2>
+            <h2>{{date}}</h2>
+            <h2>{{week}}</h2>
+          </div>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 
@@ -22,7 +34,9 @@ export default {
   components: { baseInfo, gridMenu, visitChart, userChart },
   data() {
     return {
-      currentRole: 'adminDashboard'
+      currentRole: 'adminDashboard',
+      date: null,
+      week: null,
     }
   },
   computed: {
@@ -36,7 +50,174 @@ export default {
     }
   },
   mounted(){
-    
+    this.getDate()
+  },
+  methods:{
+    getDate(){
+      var now = new Date();
+      var year = now.getFullYear(); //得到年份
+      var month = now.getMonth(); //得到月份
+      var date = now.getDate(); //得到日期
+      var day = now.getDay(); //得到周几
+      var hour = now.getHours(); //得到小时
+      var minu = now.getMinutes(); //得到分钟
+      var sec = now.getSeconds(); //得到秒
+      month = month + 1;
+      if (month < 10) month = "0" + month;
+      if (date < 10) date = "0" + date;
+      if (hour < 10) hour = "0" + hour;
+      if (minu < 10) minu = "0" + minu;
+      if (sec < 10) sec = "0" + sec;
+      let weekList = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
+      this.date =  year + "年" + month + "月" + date + "日";
+      this.week = weekList[day];
+    },
   },
 }
 </script>
+<style lang="scss" scoped>
+.box-card{
+  padding: 60px;
+}
+.box {
+ position: relative;
+ width: 220px;
+ height: 300px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: 0.5s;
+ z-index: 1;
+ margin: 0 auto;
+}
+
+.box::before {
+ content: ' ';
+ position: absolute;
+ top: 0;
+ left: 40px;
+ width: 60%;
+ height: 100%;
+ text-decoration: none;
+ background: #fff;
+ border-radius: 8px;
+ transform: skewX(15deg);
+ transition: 0.5s;
+}
+
+.box::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 40;
+ width: 60%;
+ height: 100%;
+ background: #fff;
+ border-radius: 8px;
+ transform: skewX(15deg);
+ transition: 0.5s;
+ filter: blur(30px);
+}
+
+.box:hover:before,
+.box:hover:after {
+ transform: skewX(0deg) scaleX(1.3);
+}
+
+.box:before,
+.box:after {
+ background: linear-gradient(315deg, #ffbc00, #ff0058)
+}
+
+.box span {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 5;
+ pointer-events: none;
+}
+
+.box span::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ opacity: 0;
+ transition: 0.1s;
+ animation: animate 2s ease-in-out infinite;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.08)
+}
+
+.box span::before {
+ top: -40px;
+ left: 40px;
+ width: 50px;
+ height: 50px;
+ opacity: 1;
+}
+
+.box span::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ opacity: 0;
+ transition: 0.5s;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.08);
+ animation-delay: -1s;
+}
+
+.box span:after {
+ bottom: -40px;
+ right: 40px;
+ width: 50px;
+ height: 50px;
+ opacity: 1;
+}
+
+.box .content {
+ position: relative;
+ width: 220px;
+ height: 254px;
+ padding: 20px 30px;
+ background: rgba(255, 255, 255, 0.05);
+ backdrop-filter: blur(10px);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+ z-index: 1;
+ transform: 0.5s;
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+.box .content h2 {
+ font-size: 20px;
+ color: #fff;
+ margin-bottom: 10px;
+}
+.home_text{
+  padding: 60px 0 0 60px;
+  font-size: 26px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #0E38A5;
+  line-height: 30px
+}
+</style>
\ No newline at end of file