样式布局初始化、首页页面开发

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 天择管理系统
+VITE_APP_TITLE = 数字营销实训系统
 
 # 开发环境配置
 VITE_APP_ENV = 'development'

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 天择管理系统
+VITE_APP_TITLE = 数字营销实训系统
 
 # 生产环境配置
 VITE_APP_ENV = 'production'

.env.staging

@@ -1,5 +1,5 @@
 # 页面标题
-VITE_APP_TITLE = 天择管理系统
+VITE_APP_TITLE = 数字营销实训系统
 
 # 生产环境配置
 VITE_APP_ENV = 'staging'

index.html

@@ -7,7 +7,7 @@
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="/favicon.ico">
-  <title>天择管理系统</title>
+  <title>数字营销实训系统</title>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,

src/assets/styles/sidebar.scss

@@ -14,8 +14,10 @@
   .sidebar-container {
     -webkit-transition: width .28s;
     transition: width 0.28s;
-    width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    width: 239px !important;
+    background:url('../images/sidebar-background.png') no-repeat center;
+    // background-color: $base-menu-background;
+    background-size: 100% 100%;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -68,12 +70,33 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      background-color: transparent !important;
+      padding-top: 20px;
+      padding-left: 10px;
+      .el-menu-item{
+        position: relative;
+        display: flex;
+        align-items: center;
+        // margin: 15px 0px;
+        margin-bottom: 20px;
+        height: 37px;
+        width: 213px;
+        // margin-left: -8px;
+        color: #fff;
+        background: url('../images/sidebar-normal.png') no-repeat;
+        background-size:100% 100% !important;
+      }
+      .is-active{
+        background: url('../images/sidebar-active.png') no-repeat !important;
+        background-size:100% 100%;
+     }
+
     }
 
     .el-menu-item, .menu-title {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
+      // overflow: hidden !important;
+      // text-overflow: ellipsis !important;
+      // white-space: nowrap !important;
     }
 
     .el-menu-item .el-menu-tooltip__trigger {

src/layout/components/Navbar.vue

@@ -1,21 +1,26 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
+    <hamburger
+      id="hamburger-container"
+      :is-active="appStore.sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
+    <breadcrumb
+      id="breadcrumb-container"
+      class="breadcrumb-container"
+      v-if="!settingsStore.topNav"
+    />
+    <top-nav
+      id="topmenu-container"
+      class="topmenu-container"
+      v-if="settingsStore.topNav"
+    />
 
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
         <header-search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
@@ -23,7 +28,11 @@
         </el-tooltip>
       </template>
       <div class="avatar-container">
-        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+        <el-dropdown
+          @command="handleCommand"
+          class="right-menu-item hover-effect"
+          trigger="click"
+        >
           <div class="avatar-wrapper">
             <img :src="userStore.avatar" class="user-avatar" />
             <el-icon><caret-bottom /></el-icon>
@@ -48,25 +57,25 @@
 </template>
 
 <script setup>
-import { ElMessageBox } from 'element-plus'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import HeaderSearch from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
-import useAppStore from '@/store/modules/app'
-import useUserStore from '@/store/modules/user'
-import useSettingsStore from '@/store/modules/settings'
-
-const appStore = useAppStore()
-const userStore = useUserStore()
-const settingsStore = useSettingsStore()
+import { ElMessageBox } from "element-plus";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import HeaderSearch from "@/components/HeaderSearch";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
+import useAppStore from "@/store/modules/app";
+import useUserStore from "@/store/modules/user";
+import useSettingsStore from "@/store/modules/settings";
+
+const appStore = useAppStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
 
 function toggleSideBar() {
-  appStore.toggleSideBar()
+  appStore.toggleSideBar();
 }
 
 function handleCommand(command) {
@@ -83,24 +92,26 @@ function handleCommand(command) {
 }
 
 function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    userStore.logOut().then(() => {
-      location.href = '/index';
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
     })
-  }).catch(() => { });
+    .catch(() => {});
 }
 
-const emits = defineEmits(['setLayout'])
+const emits = defineEmits(["setLayout"]);
 function setLayout() {
-  emits('setLayout');
+  emits("setLayout");
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .navbar {
   height: 50px;
   overflow: hidden;

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
@@ -13,7 +13,7 @@
         mode="vertical"
       >
         <sidebar-item
-          v-for="(route, index) in sidebarRouters"
+          v-for="(route, index) in constantRoutes"
           :key="route.path + index"
           :item="route"
           :base-path="route.path"
@@ -30,6 +30,7 @@ import variables from '@/assets/styles/variables.module.scss'
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
 import usePermissionStore from '@/store/modules/permission'
+import {constantRoutes} from '@/router/index.js'
 
 const route = useRoute();
 const appStore = useAppStore()

src/layout/index.vue

@@ -1,28 +1,42 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+  <div
+    :class="classObj"
+    class="app-wrapper"
+    :style="{ '--current-color': theme }"
+  >
+    <div class="navTitle">
+      <span class="nacber-name">天 择 数 字 营 销 实 训 系 统 </span>
+    </div>
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
     <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    <div
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+      class="main-container"
+    >
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar @setLayout="setLayout" />
-        <tags-view v-if="needTagsView" />
+        <!-- <navbar @setLayout="setLayout" />
+        <tags-view v-if="needTagsView" /> -->
       </div>
       <app-main />
       <settings ref="settingRef" />
-    </div> 
+    </div>
   </div>
 </template>
 
 <script setup>
-import { useWindowSize } from '@vueuse/core'
-import Sidebar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
-import defaultSettings from '@/settings'
+import { useWindowSize } from "@vueuse/core";
+import Sidebar from "./components/Sidebar/index.vue";
+import { AppMain, Navbar, Settings, TagsView } from "./components";
+import defaultSettings from "@/settings";
 
-import useAppStore from '@/store/modules/app'
-import useSettingsStore from '@/store/modules/settings'
+import useAppStore from "@/store/modules/app";
+import useSettingsStore from "@/store/modules/settings";
 
-const settingsStore = useSettingsStore()
+const settingsStore = useSettingsStore();
 const theme = computed(() => settingsStore.theme);
 const sideTheme = computed(() => settingsStore.sideTheme);
 const sidebar = computed(() => useAppStore().sidebar);
@@ -34,26 +48,26 @@ const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
   openSidebar: sidebar.value.opened,
   withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === 'mobile'
-}))
+  mobile: device.value === "mobile",
+}));
 
 const { width, height } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watchEffect(() => {
-  if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
+  if (device.value === "mobile" && sidebar.value.opened) {
+    useAppStore().closeSideBar({ withoutAnimation: false });
   }
   if (width.value - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile')
-    useAppStore().closeSideBar({ withoutAnimation: true })
+    useAppStore().toggleDevice("mobile");
+    useAppStore().closeSideBar({ withoutAnimation: true });
   } else {
-    useAppStore().toggleDevice('desktop')
+    useAppStore().toggleDevice("desktop");
   }
-})
+});
 
 function handleClickOutside() {
-  useAppStore().closeSideBar({ withoutAnimation: false })
+  useAppStore().closeSideBar({ withoutAnimation: false });
 }
 
 const settingRef = ref(null);
@@ -63,19 +77,59 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-  @import "@/assets/styles/mixin.scss";
-  @import "@/assets/styles/variables.module.scss";
+@import "@/assets/styles/mixin.scss";
+@import "@/assets/styles/variables.module.scss";
 
 .app-wrapper {
   @include clearfix;
   position: relative;
   height: 100%;
   width: 100%;
+  background: url("@/assets/images/背景.png");
 
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
   }
+  .navTitle {
+    background: url("@/assets/images/top.png");
+    height: 58px;
+    width: 100%;
+    z-index: 10000;
+    position: fixed;
+    top: 0;
+    background-size: 100% 100%;
+    .nacber-name {
+      height: 46px;
+      display: flex;
+      //  justify-content: center;
+      align-items: center;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #ffffff;
+      font-size: 27px;
+      margin-left: 33px;
+      margin-top: 3px;
+      letter-spacing: 1px;
+    }
+    
+  }
+  .sidebar-container {
+      margin-top: 58px;
+    }
+    .main-container {
+      // margin-top: 58px;
+      padding-top: 70px;
+      padding-left: 60px;
+      padding-right: 20px;
+
+      .caseData {
+        position: fixed;
+        right: 2%;
+        top: 10%;
+        z-index: 10000;
+      }
+    }
 }
 
 .drawer-bg {
@@ -108,4 +162,4 @@ function setLayout() {
 .mobile .fixed-header {
   width: 100%;
 }
-</style>
+</style>

src/permission.js

@@ -13,21 +13,21 @@ NProgress.configure({ showSpinner: false });
 
 const whiteList = ['/login', '/register'];
 
-router.beforeEach((to, from, next) => {
-  NProgress.start()
-  if (!getToken()) {
-      next()
-  } else {
-    // 没有token
-    if (whiteList.indexOf(to.path) !== -1) {
-      // 在免登录白名单，直接进入
-      next()
-    } else {
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
-      // NProgress.done()
-    }
-  }
-})
+// router.beforeEach((to, from, next) => {
+//   NProgress.start()
+//   if (!getToken()) {
+//       next()
+//   } else {
+//     // 没有token
+//     if (whiteList.indexOf(to.path) !== -1) {
+//       // 在免登录白名单，直接进入
+//       next()
+//     } else {
+//       next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+//       // NProgress.done()
+//     }
+//   }
+// })
 
 router.afterEach(() => {
   NProgress.done()

src/router/index.js

@@ -1,6 +1,6 @@
-import { createWebHistory, createRouter } from 'vue-router'
+import { createWebHistory, createRouter } from "vue-router";
 /* Layout */
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 /**
  * Note: 路由配置项
@@ -27,64 +27,88 @@ import Layout from '@/layout'
 // 公共路由
 export const constantRoutes = [
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Layout,
     hidden: true,
     children: [
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect/index.vue')
-      }
-    ]
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect/index.vue"),
+      },
+    ],
   },
   {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
+    path: "/login",
+    component: () => import("@/views/login"),
+    hidden: true,
   },
   {
-    path: '/register',
-    component: () => import('@/views/register'),
-    hidden: true
+    path: "/register",
+    component: () => import("@/views/register"),
+    hidden: true,
   },
   {
     path: "/:pathMatch(.*)*",
-    component: () => import('@/views/error/404'),
-    hidden: true
+    component: () => import("@/views/error/404"),
+    hidden: true,
+  },
+  {
+    path: "/401",
+    component: () => import("@/views/error/401"),
+    hidden: true,
+  },
+  {
+    path: "",
+    component: Layout,
+    redirect: "/index",
+    children: [
+      {
+        path: "/index",
+        component: () => import("@/views/index"),
+        name: "Index",
+        meta: { title: "首页", icon: "dashboard", affix: true },
+      },
+    ],
   },
   {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
+    path: "",
+    component: Layout,
+    redirect: "/digitalMarketAlgorithm",
+    children: [
+      {
+        path: "/digitalMarketAlgorithm",
+        component: () => import("@/views/digitalMarketAlgorithm/index"),
+        name: "digitalMarketAlgorithm",
+        meta: { title: "数字营销算法", icon: "dashboard", affix: true },
+      },
+    ],
   },
   {
-    path: '',
+    path: "",
     component: Layout,
-    redirect: '/index',
+    redirect: "/digitalMarketTech",
     children: [
       {
-        path: '/index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
+        path: "/digitalMarketTech",
+        component: () => import("@/views/digitalMarketTech/index"),
+        name: "digitalMarketTech",
+        meta: { title: "数字营销技术", icon: "dashboard", affix: true },
+      },
+    ],
   },
- 
-]
+];
 
 // 动态路由，基于用户权限动态去加载
-export const dynamicRoutes = [
-]
+export const dynamicRoutes = [];
 
 const router = createRouter({
   history: createWebHistory(),
   routes: constantRoutes,
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
-      return savedPosition
+      return savedPosition;
     } else {
-      return { top: 0 }
+      return { top: 0 };
     }
   },
 });

src/views/digitalMarketAlgorithm/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="content">数字营销算法</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.content{
+    color: #fff;
+}
+</style>

src/views/digitalMarketTech/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="content">数字营销技术</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.content{
+    color: #fff;
+}
+</style>
+