h5/src/views/home/index.vue

<template>
  <div class="home">
    <!-- 用户信息 -->
    <el-row :gutter="15">
      <el-col :md="24" :lg="16" :xl="16" class="mb15">
        <el-card shadow="hover">
          <div slot="header">
            <span>{{ $t("message.card.title1") }}</span>
          </div>
          <div class="user-item">
            <div class="user-item-left">
              <img :src="getUserInfos.photo" />
            </div>
            <div class="user-item-right overflow">
              <el-row>
                <el-col :span="24" class="right-title mb15 one-text-overflow"
                  >{{ currentTime }}，{{ getUserInfos.userName }}，{{ dailyMessage }}
                </el-col>
                <el-col :span="24">
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label">昵称：</div>
                    <div class="right-value">小柒</div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
                    <div class="right-label">身份：</div>
                    <div class="right-value">
                      {{ userInfo.userName === "admin" ? "超级管理" : "普通用户" }}
                    </div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="mt5">
                  <el-col :xs="12" :sm="12" :md="8" class="right-l-v">
                    <div class="right-label one-text-overflow">IP：</div>
                    <div class="right-value one-text-overflow">192.168.1.1</div>
                  </el-col>
                  <el-col :xs="12" :sm="12" :md="16" class="right-l-v">
                    <div class="right-label one-text-overflow">时间：</div>
                    <div class="right-value one-text-overflow">{{ userInfo.time }}</div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="mt15">
                  <el-button size="small" icon="el-icon-edit-outline"
                    >修改信息
                  </el-button>
                  <el-button size="small" icon="el-icon-position" type="primary"
                    >发布活动</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="24" :lg="8" :xl="8" class="mb15">
        <el-card shadow="hover">
          <div slot="header">
            <span>{{ $t("message.card.title2") }}</span>
            <el-button class="home-card-more" type="text" @click="onOpenGitee">{{
              $t("message.card.title3")
            }}</el-button>
          </div>
          <div class="info">
            <Scroll
              :data="newsInfoList"
              class="info-scroll"
              :class-option="optionSingleHeight"
            >
              <ul class="info-ul">
                <li
                  v-for="(v, k) in newsInfoList"
                  :key="k"
                  class="info-item"
                  @click="onNewsInfoListClick(v)"
                >
                  <div class="info-item-left" v-text="v.title"></div>
                  <div class="info-item-right" v-text="v.date"></div>
                </li>
              </ul>
            </Scroll>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div>{{ $t("message.card.title1") }}</div>
  </div>
</template>

<script>
import Scroll from "vue-seamless-scroll";
import { CountUp } from "countup.js";
import { Session } from "@/utils/storage";
import { formatAxis, formatDate } from "@/utils/formatTime";
import { newsInfoList, dailyMessage } from "./mock";
export default {
  name: "home",
  components: { Scroll },
  data() {
    return {
      newsInfoList,
      userInfo: {},
      dailyMessage: {},
    };
  },
  created() {
    this.initUserInfo();
    this.initDailyMessage();
  },
  computed: {
    currentTime() {
      return formatAxis(new Date());
    },
    optionSingleHeight() {
      return {
        singleHeight: 28,
        limitMoveNum: 8,
        waitTime: 2000,
      };
    },
    getUserInfos() {
      return this.$store.state.userInfos.userInfos;
    },
  },
  mounted() {},
  methods: {
    // 随机语录
    initDailyMessage() {
      this.dailyMessage = dailyMessage[Math.floor(Math.random() * dailyMessage.length)];
    },
    // 初始化登录信息
    initUserInfo() {
      if (!Session.get("userInfo")) return false;
      this.userInfo = Session.get("userInfo");
      this.userInfo.time = formatDate(
        new Date(this.userInfo.time),
        "YYYY-mm-dd HH:MM:SS"
      );
    },
    // 消息通知当前项点击
    onNewsInfoListClick(v) {
      window.open(v.link);
    },
    // 跳转到 gitee
    onOpenGitee() {
      window.open("https://gitee.com/lyt-top/vue-next-admin");
    },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>