姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

作者 姚富强
提交 864ae5066718fe43300ae4017f896ff7a84dfd60 2 个父辈 f84cfac1 4d08fb9e

合并分支 'dev' 到 'master' 

框架初始化



查看合并请求 !3
内嵌 并排对比
正在显示 7 个修改的文件 包含 127 行增加 和 4 行删除
@@ -12,6 +12,7 @@ @@ -12,6 +12,7 @@
12 }, 12 },
13 "dependencies": { 13 "dependencies": {
14 "axios": "^1.6.5", 14 "axios": "^1.6.5",
  15 + "normalize.css": "^8.0.1",
15 "pinia": "^2.1.7", 16 "pinia": "^2.1.7",
16 "pinia-plugin-persistedstate": "^3.2.1", 17 "pinia-plugin-persistedstate": "^3.2.1",
17 "vue": "^3.3.11", 18 "vue": "^3.3.11",
@@ -8,6 +8,9 @@ dependencies: @@ -8,6 +8,9 @@ dependencies:
8 axios: 8 axios:
9 specifier: ^1.6.5 9 specifier: ^1.6.5
10 version: 1.6.5 10 version: 1.6.5
  11 + normalize.css:
  12 + specifier: ^8.0.1
  13 + version: 8.0.1
11 pinia: 14 pinia:
12 specifier: ^2.1.7 15 specifier: ^2.1.7
13 version: 2.1.7(vue@3.4.13) 16 version: 2.1.7(vue@3.4.13)
@@ -1244,6 +1247,10 @@ packages: @@ -1244,6 +1247,10 @@ packages:
1244 engines: {node: '>=0.10.0'} 1247 engines: {node: '>=0.10.0'}
1245 dev: true 1248 dev: true
1246 1249
  1250 + /normalize.css@8.0.1:
  1251 + resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
  1252 + dev: false
  1253 +
1247 /nth-check@2.1.1: 1254 /nth-check@2.1.1:
1248 resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} 1255 resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
1249 dependencies: 1256 dependencies:
  1 +<template>
  2 + <div class="counter">
  3 + <div class="head">
  4 + <div class="log">天津电子信息职业技术学院</div>
  5 + <div class="msg">
  6 + <div class="avt">
  7 + <img src="@/static/Avatar.png" alt="">
  8 + </div>
  9 + <div class="neme">XXX</div>
  10 + </div>
  11 + </div>
  12 + </div>
  13 + </template>
  14 + <style lang="scss">
  15 + .head {
  16 + width: 100%;
  17 + height: 80px;
  18 + color: #fff;
  19 + background-color: #6170c3;
  20 + display: flex;
  21 + align-items: center;
  22 + justify-content: space-between;
  23 + .log {
  24 + padding-left: 50px;
  25 +
  26 + }
  27 + .msg {
  28 + padding-right: 50px;
  29 + display: flex;
  30 + align-items: center;
  31 + .avt {
  32 + padding-right: 20px;
  33 + width: 45px;
  34 + height: 45px;
  35 + img {
  36 + width: 100%;
  37 + height: 100%;
  38 + border-radius: 50%;
  39 + }
  40 + }
  41 + }
  42 +
  43 + }
  44 +
  45 + </style>
  1 +:root {
  2 + width: 100%;
  3 + height: 100vh;
  4 + --bg-color: #f2f2f2; //默认背景颜色
  5 +}
@@ -4,6 +4,8 @@ import { createPinia } from 'pinia' @@ -4,6 +4,8 @@ import { createPinia } from 'pinia'
4 import App from './App.vue' 4 import App from './App.vue'
5 import store from './store/index.js' 5 import store from './store/index.js'
6 import router from './router' 6 import router from './router'
  7 +import 'normalize.css/normalize.css'
  8 +import './index.scss'
7 9
8 const app = createApp(App) 10 const app = createApp(App)
9 11
1 <script setup> 1 <script setup>
2 - 2 +import Head from '@/components/head.vue'
3 </script> 3 </script>
4 4
5 <template> 5 <template>
6 - <div>这是首页架子（git测试）</div>  
7 - <!-- 这里是二级路由的出口 -->  
8 - <router-view></router-view> 6 + <div class="counter">
  7 + <!-- 封住头部组件 -->
  8 + <Head></Head>
  9 + <div class="banner">
  10 + <!-- 左边部分 -->
  11 + <div class="left">
  12 + <div class="pic">
  13 + <img src="@/static/Avatar.png" alt="" />
  14 + </div>
  15 + <div class="name">XXX</div>
  16 + <div class="cont">
  17 + <div class="li" v-for="item in 8">首页</div>
  18 + </div>
  19 + <div class="one"></div>
  20 + </div>
  21 + <!-- 右边二级路由 -->
  22 + <div class="right">
  23 + <!-- 这里是二级路由的出口 -->
  24 + <router-view></router-view>
  25 + </div>
  26 + </div>
  27 + </div>
9 </template> 28 </template>
  29 +<style lang="scss">
  30 +.counter {
  31 + .banner {
  32 +display: flex;
  33 +
  34 + .left {
  35 + position: relative;
  36 + margin: 40px 40px 0;
  37 + width: 15%;
  38 + background-color: #6170c3;
  39 + color: #fff;
  40 + border-radius: 18px;
  41 + .pic {
  42 + margin: 0 auto;
  43 + padding-top: 50px;
  44 + width: 75px;
  45 + height: 75px;
  46 + img {
  47 + width: 100%;
  48 + height: 100%;
  49 + border-radius: 50%;
  50 + }
  51 + }
  52 + .name {
  53 + margin-top: 10px;
  54 + text-align: center;
  55 + }
  56 + .cont {
  57 + margin-top: 20px;
  58 + .li {
  59 + line-height: 50px;
  60 + width: 100%;
  61 + height: 50px;
  62 + padding-left: 30px;
  63 + box-sizing: border-box;
  64 + }
  65 + }
  66 + .one {
  67 + background-color: pink;
  68 + }
  69 + }
  70 +}
  71 +}
  72 +</style>