From 999935f3e7a6ff1cf286bedfdbb7ccd64bed556a Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期二, 28 六月 2022 17:08:03 +0800 Subject: [PATCH] 'lct' --- src/views/home/index.vue | 247 +++++++++++++++++++++++------------------------- 1 files changed, 119 insertions(+), 128 deletions(-) diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 45dd9ce..762393f 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -2,14 +2,14 @@ <div class="home-container"> <el-row :gutter="15" class="home-card-one mb15"> <el-col - :xs="24" - :sm="12" - :md="12" - :lg="4" - :xl="4" - v-for="(v, k) in homeOne" - :key="k" - :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }" + :xs="24" + :sm="12" + :md="12" + :lg="4" + :xl="4" + v-for="(v, k) in homeOne" + :key="k" + :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }" > <div class="home-card-item flex" > <el-button @click="renderMenu(v.id)">{{v.name}}</el-button> @@ -50,142 +50,133 @@ </template> <script lang="ts"> -import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue'; -import * as echarts from 'echarts'; -import { storeToRefs } from 'pinia'; -import { useThemeConfig } from '/@/stores/themeConfig'; -import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; -import { initBackEndControlRoutes } from '/@/router/backEnd'; -import {Session} from "/@/utils/storage"; -import {useRoutesList} from "/@/stores/routesList"; -import pinia from "/@/stores"; + import { toRefs, reactive, defineComponent, } from 'vue'; + import { storeToRefs } from 'pinia'; + import { initBackEndControlRoutes } from '/@/router/backEnd'; + import {useUserInfo} from "/@/stores/userInfo"; + import { Session } from '/@/utils/storage'; + let global: any = { + homeChartOne: null, + homeChartTwo: null, + homeCharThree: null, + dispose: [null, '', undefined], + }; -let global: any = { - homeChartOne: null, - homeChartTwo: null, - homeCharThree: null, - dispose: [null, '', undefined], -}; - -interface stateType { - projectId:string, - homeOne: Array <type> -} -interface type { - id:number, - name: string -} -export default defineComponent({ - name: 'home', - setup() { - const storesRoutesList = useRoutesList(pinia); - const { routesList } = storeToRefs(storesRoutesList); - // const storesTagsViewRoutes = useTagsViewRoutes(); - // const storesThemeConfig = useThemeConfig(); - const state = reactive<stateType>({ - projectId:'', - homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'系统1'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}], - }); - // 折线图 - const renderMenu = async (value: string) => { - state.projectId = value - Session.set('projectId',value) - await initBackEndControlRoutes(); - }; - return { - renderMenu, - ...toRefs(state), - }; - }, -}); + interface stateType { + homeOne: Array <type> + } + interface type { + id:number, + name: string + } + export default defineComponent({ + name: 'home', + setup() { + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo); + const state = reactive<stateType>({ + homeOne:[{id:1,name:'基础数据权限管理系统'},{id:2,name:'系统1'},{id:3,name:'系统2'},{id:4,name:'系统3'},{id:5,name:'系统4'}], + }); + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId',value) + userInfos.value.projectId = value + await initBackEndControlRoutes(); + }; + return { + renderMenu, + ...toRefs(state), + }; + }, + }); </script> <style scoped lang="scss"> -$homeNavLengh: 8; -.home-container { - overflow: hidden; - .home-card-one, - .home-card-two, - .home-card-three { - .home-card-item { - width: 100%; - height: 130px; - border-radius: 4px; - transition: all ease 0.3s; - padding: 20px; - overflow: hidden; - background: var(--el-color-white); - color: var(--el-text-color-primary); - border: 1px solid var(--next-border-color-light); - &:hover { - box-shadow: 0 2px 12px var(--next-color-dark-hover); + $homeNavLengh: 8; + .home-container { + overflow: hidden; + .home-card-one, + .home-card-two, + .home-card-three { + .home-card-item { + width: 100%; + height: 130px; + border-radius: 4px; transition: all ease 0.3s; - } - &-icon { - width: 70px; - height: 70px; - border-radius: 100%; - flex-shrink: 1; - i { - color: var(--el-text-color-placeholder); + padding: 20px; + overflow: hidden; + background: var(--el-color-white); + color: var(--el-text-color-primary); + border: 1px solid var(--next-border-color-light); + &:hover { + box-shadow: 0 2px 12px var(--next-color-dark-hover); + transition: all ease 0.3s; + } + &-icon { + width: 70px; + height: 70px; + border-radius: 100%; + flex-shrink: 1; + i { + color: var(--el-text-color-placeholder); + } + } + &-title { + font-size: 15px; + font-weight: bold; + height: 30px; } } - &-title { - font-size: 15px; - font-weight: bold; - height: 30px; + } + .home-card-one { + @for $i from 0 through 3 { + .home-one-animation#{$i} { + opacity: 0; + animation-name: error-num; + animation-duration: 0.5s; + animation-fill-mode: forwards; + animation-delay: calc($i/10) + s; + } } } - } - .home-card-one { - @for $i from 0 through 3 { - .home-one-animation#{$i} { - opacity: 0; - animation-name: error-num; - animation-duration: 0.5s; - animation-fill-mode: forwards; - animation-delay: calc($i/10) + s; - } - } - } - .home-card-two, - .home-card-three { - .home-card-item { - height: 400px; - width: 100%; - overflow: hidden; - .home-monitor { - height: 100%; - .flex-warp-item { - width: 25%; - height: 111px; - display: flex; - .flex-warp-item-box { - margin: auto; - text-align: center; - color: var(--el-text-color-primary); + .home-card-two, + .home-card-three { + .home-card-item { + height: 400px; + width: 100%; + overflow: hidden; + .home-monitor { + height: 100%; + .flex-warp-item { + width: 25%; + height: 111px; display: flex; - border-radius: 5px; - background: var(--next-bg-color); - cursor: pointer; - transition: all 0.3s ease; - &:hover { - background: var(--el-color-primary-light-9); + .flex-warp-item-box { + margin: auto; + text-align: center; + color: var(--el-text-color-primary); + display: flex; + border-radius: 5px; + background: var(--next-bg-color); + cursor: pointer; transition: all 0.3s ease; + &:hover { + background: var(--el-color-primary-light-9); + transition: all 0.3s ease; + } } - } - @for $i from 0 through $homeNavLengh { - .home-animation#{$i} { - opacity: 0; - animation-name: error-num; - animation-duration: 0.5s; - animation-fill-mode: forwards; - animation-delay: calc($i/10) + s; + @for $i from 0 through $homeNavLengh { + .home-animation#{$i} { + opacity: 0; + animation-name: error-num; + animation-duration: 0.5s; + animation-fill-mode: forwards; + animation-delay: calc($i/10) + s; + } } } } } } } -} </style> -- Gitblit v1.9.2