姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

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

合并分支 'dev' 到 'master' 

框架初始化



查看合并请求 !3
内嵌 并排对比
正在显示 7 个修改的文件 包含 127 行增加 和 4 行删除
... ... @@ -12,6 +12,7 @@
},
"dependencies": {
"axios": "^1.6.5",
"normalize.css": "^8.0.1",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"vue": "^3.3.11",
... ...
... ... @@ -8,6 +8,9 @@ dependencies:
axios:
specifier: ^1.6.5
version: 1.6.5
normalize.css:
specifier: ^8.0.1
version: 8.0.1
pinia:
specifier: ^2.1.7
version: 2.1.7(vue@3.4.13)
... ... @@ -1244,6 +1247,10 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/normalize.css@8.0.1:
resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
dev: false
/nth-check@2.1.1:
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
dependencies:
... ...
<template>
<div class="counter">
<div class="head">
<div class="log">天津电子信息职业技术学院</div>
<div class="msg">
<div class="avt">
<img src="@/static/Avatar.png" alt="">
</div>
<div class="neme">XXX</div>
</div>
</div>
</div>
</template>
<style lang="scss">
.head {
width: 100%;
height: 80px;
color: #fff;
background-color: #6170c3;
display: flex;
align-items: center;
justify-content: space-between;
.log {
padding-left: 50px;
}
.msg {
padding-right: 50px;
display: flex;
align-items: center;
.avt {
padding-right: 20px;
width: 45px;
height: 45px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
}
</style>
\ No newline at end of file
... ...
:root {
width: 100%;
height: 100vh;
--bg-color: #f2f2f2; //默认背景颜色
}
... ...
... ... @@ -4,6 +4,8 @@ import { createPinia } from 'pinia'
import App from './App.vue'
import store from './store/index.js'
import router from './router'
import 'normalize.css/normalize.css'
import './index.scss'
const app = createApp(App)
... ...
<script setup>
import Head from '@/components/head.vue'
</script>
<template>
<div>这是首页架子（git测试）</div>
<!-- 这里是二级路由的出口 -->
<router-view></router-view>
<div class="counter">
<!-- 封住头部组件 -->
<Head></Head>
<div class="banner">
<!-- 左边部分 -->
<div class="left">
<div class="pic">
<img src="@/static/Avatar.png" alt="" />
</div>
<div class="name">XXX</div>
<div class="cont">
<div class="li" v-for="item in 8">首页</div>
</div>
<div class="one"></div>
</div>
<!-- 右边二级路由 -->
<div class="right">
<!-- 这里是二级路由的出口 -->
<router-view></router-view>
</div>
</div>
</div>
</template>
<style lang="scss">
.counter {
.banner {
display: flex;
.left {
position: relative;
margin: 40px 40px 0;
width: 15%;
background-color: #6170c3;
color: #fff;
border-radius: 18px;
.pic {
margin: 0 auto;
padding-top: 50px;
width: 75px;
height: 75px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.name {
margin-top: 10px;
text-align: center;
}
.cont {
margin-top: 20px;
.li {
line-height: 50px;
width: 100%;
height: 50px;
padding-left: 30px;
box-sizing: border-box;
}
}
.one {
background-color: pink;
}
}
}
}
</style>
... ...