修改

马宇豪

2024-11-13 12a7587eb12e3d33809ef9c169dd76b20ac707c4

 src/views/homePage.vue

@@ -1,54 +1,9 @@
<template>
  <div class="login">
<!--    <img class="pics1" src="src/assets/images/login-data.png">-->
<!--    <img class="pics2" src="src/assets/images/login-search.png">-->
    <div class="main-content">
      <div class="top">
        <div class="top-cont">
          <div class="logo blueFont">智慧安评</div>
          <div class="time">
            <div>
              <span>{{state.date}}</span>
              <span>{{state.weekDay}}</span>
            </div>
            <div>
              {{state.dayTime}}好！
            </div>
          </div>
        </div>
      </div>

      <div class="nav blueBg">
        <div class="nav-cont">
          <div :class="state.activeMenu == 1?'active': ''" @click="changeTab(1)">
            <HomeFilled style="width: 1em; height: 1em; margin-right: 8px" />
            <div>首页</div>
          </div>
          <div :class="state.activeMenu == 2?'active': ''" @click="changeTab(2)">
            <Comment style="width: 1em; height: 1em; margin-right: 8px" />
            <div>通知公告</div>
          </div>
          <div :class="state.activeMenu == 3?'active': ''" @click="changeTab(3)">
            <BellFilled style="width: 1em; height: 1em; margin-right: 8px" />
            <div>法律法规</div>
          </div>
          <div :class="state.activeMenu == 4?'active': ''" @click="changeTab(4)">
            <List style="width: 1em; height: 1em; margin-right: 8px" />
            <div>信息公示</div>
          </div>
        </div>
      </div>
      <div class="content">
        <Home v-if="state.activeMenu==1" ref="homeRef" @toMore="changeTab"/>
        <Notice v-if="state.activeMenu==2" ref="noticeRef"/>
        <Laws v-if="state.activeMenu==3" ref="lawsRef"/>
        <Publish v-if="state.activeMenu==4" ref="publishRef"/>
        <Details ref="detailsRef"></Details>
      </div>
    </div>
    <login-form ref="loginRef"/>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © All Rights Reserved.</span>
      <span>Copyright ©2023-{{nowYear}} All Rights Reserved.</span>
    </div>
  </div>
</template>
@@ -56,14 +11,11 @@
<script setup>
import {onMounted, ref, reactive, watch, defineAsyncComponent, nextTick, onUnmounted} from "vue"
import useUserStore from '@/store/modules/user'
import Home from './components/home'
import Notice from './components/notice'
import Laws from './components/laws'
import Publish from './components/publish'
import Details from './components/details'

import LoginForm from './components/loginForm'
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const nowYear = ref();
// 时间格式化
const timeForm = {
  hour12: false,
@@ -75,10 +27,7 @@
  second: '2-digit'
}

const homeRef = ref(null)
const noticeRef = ref(null)
const lawsRef = ref(null)
const publishRef = ref(null)

const state = reactive({
  activeMenu: 1,
@@ -92,6 +41,7 @@
const getDateTime = () => {
  const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
  state.date = curTime.slice(0, 10);
  nowYear.value = curTime.slice(0, 4);
  let week = ['日', '一', '二', '三', '四', '五', '六'];
  let day = new Date().getDay();
  state.weekDay = '星期' + week[day];
@@ -128,25 +78,6 @@
    redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });

const changeTab=(num)=>{
  state.activeMenu = num
  console.log(state.activeMenu)
  // if(num == 1){
  //   homeRef.value.getNoticeList()
  //   homeRef.value.getLawsList()
  //   homeRef.value.getPubList()
  // }
  // if(num == 2){
  //   noticeRef.value.getData()
  // }
  // if(num == 3){
  //   lawsRef.value.getData()
  // }
  // if(num == 4){
  //   publishRef.value.getData()
  // }
}

</script>

<style lang='scss' scoped>
@@ -155,116 +86,16 @@
  display: flex;
  justify-content: center;
  height: 100%;

  .main-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    color: #333;

    .top{
      width: 100%;
      background: rgba(249,250,251,1);
      position: fixed;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .top-cont{
        width: 1200px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;

        .logo{
          font-size: 2rem;
          font-weight: 800;
          height: 90px;
          line-height: 90px;
          font-family: "PingFang SC";
        }

        .time{
          font-size: 16px;
          height: 90px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          span{
            &:first-of-type{
              margin-right: 10px;
            }
          }
        }
      }
    }


    .nav{
      width: 100%;
      height: 80px;
      position: fixed;
      top: 90px;
      left: 0;
      .nav-cont{
        width: 1200px;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: left;

        &>div{
          height: 100%;
          padding: 0 50px;
          color: #ffffff;
          background-color: #5175C0;
          font-size: 20px;
          text-decoration: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          &:hover{
            background: #425f9f;
          }
        }
        .active{
          background: #425f9f;
        }
      }
    }
  }
}
.pics1{
  position: absolute;
  width: 500px;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}
.pics2{
  position: absolute;
  width: 500px;
  top: 20px;
  left: 20px;
  opacity: 0.5;
}

.el-login-footer {
  height: 60px;
  line-height: 60px;
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  background: #5175C0;
  font-family: "PingFang SC";
  font-size: 12px;
  letter-spacing: 1px;
}