修改

马宇豪

2024-11-13 12a7587eb12e3d33809ef9c169dd76b20ac707c4

 src/views/homePage.vue

@@ -1,51 +1,6 @@
<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" style="z-index: 1">
        <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" style="z-index: 1">
        <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" @openDetails="openDetails"/>
        <Notice v-if="state.activeMenu==2" ref="noticeRef" @openDetails="openDetails"/>
        <Laws v-if="state.activeMenu==3" ref="lawsRef" @openDetails="openDetails"/>
        <Publish v-if="state.activeMenu==4" ref="publishRef" @openDetails="openDetails"/>
        <Details v-if="state.activeMenu==0" ref="detailsRef" @backJump="changeTab"></Details>
      </div>
    </div>
    <login-form ref="loginRef"/>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright ©2023-{{nowYear}} All Rights Reserved.</span>
@@ -56,11 +11,7 @@
<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.vue'
import LoginForm from './components/loginForm'
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
@@ -76,11 +27,8 @@
  second: '2-digit'
}

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

const state = reactive({
  activeMenu: 1,
  date: '',
@@ -130,19 +78,6 @@
    redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });

const changeTab=(num)=>{
  state.activeMenu = num
}

const openDetails=(type,id)=>{
  state.activeMenu = 0
  nextTick(() => {
    proxy.$refs.detailsRef.openDetail(type,id)
  })
  // detailsRef.value.openDetail(type,id)

}

</script>

<style lang='scss' scoped>
@@ -151,104 +86,6 @@
  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: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;

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

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


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

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

          &:hover{
            background: #294582;
          }
        }
        .active{
          background: #294582;
        }
      }
    }
  }
}
.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 {
@@ -259,8 +96,6 @@
  width: 100%;
  text-align: center;
  color: #fff;
  background: #385ca7;
  font-family: "PingFang SC";
  font-size: 12px;
  letter-spacing: 1px;
}