xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf:统一layout宽度

Browse Source
This commit is contained in:
Xwen
2023-12-20 21:52:42 +08:00
parent 8f81888784
commit 64cdcea6b9
7 changed files with 203 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Yi.Bbs.Vue3/src/layout/AppBody.vue
View File

@@ -1,24 +1,20 @@
<template class="back-color">
<template class="back-color"> <div class="content-main">
<RouterView />
<div class="content-main"> </div>
<RouterView />
</div>
</template> </template>
<style scoped> <style scoped>
.body-main {
.body-main{ min-height: 10rem;
min-height: 10rem; min-width: 10rem;
min-width: 10rem; background-color: #f0f2f5;
background-color:#F0F2F5;
} }
.content-main{ .content-main {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-height: 1150px; width: 1300px;
min-height: 1150px;
} }
</style> </style>

2
Yi.Bbs.Vue3/src/layout/AppHeader.vue
View File

@@ -123,7 +123,7 @@ const isLogin = getToken("AccessToken") ? true : false;
<style scoped lang="scss"> <style scoped lang="scss">
.header { .header {
padding: 0 100px; padding: 0 100px;
width: 1200px; width: 1300px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;

2
Yi.Bbs.Vue3/src/stores/user.js
View File

@@ -44,12 +44,10 @@ const useUserStore = defineStore("user", {
const res = response.data; const res = response.data;
const user = res.user; const user = res.user;
console.log(user, "user");
const avatar = const avatar =
user.icon == "" || user.icon == null user.icon == "" || user.icon == null
? "/favicon.ico" ? "/favicon.ico"
: import.meta.env.VITE_APP_BASEAPI + "/file/" + user.icon; : import.meta.env.VITE_APP_BASEAPI + "/file/" + user.icon;
console.log(avatar, "avatar");
if (res.roleCodes && res.roleCodes.length > 0) { if (res.roleCodes && res.roleCodes.length > 0) {
// 验证返回的roles是否是一个非空数组 // 验证返回的roles是否是一个非空数组
this.roles = res.roleCodes; this.roles = res.roleCodes;

150
Yi.Bbs.Vue3/src/views/Article.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="width: 90%; min-width: 1200px"> <div class="article-box">
<!-- <div style="width: 1200px;"> --> <!-- <div style="width: 1200px;"> -->
<el-row :gutter="20" class="top-div"> <el-row :gutter="20" class="top-div">
<el-col :span="5"> <el-col :span="5">
@@ -383,88 +383,92 @@ watch(
); );
</script> </script>
<style scoped> <style scoped>
.comment { .article-box {
min-height: 40rem; width: 100%;
}
.art-info-left .el-col {
margin-bottom: 1rem;
}
.art-info-ul span {
margin-left: 1rem;
}
.art-info-ul .el-tag {
margin-left: 1rem;
}
.art-info-ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
margin-bottom: 0.5rem;
}
.art-info-right {
height: 100%; height: 100%;
} .comment {
min-height: 40rem;
}
.left-div .el-col { .art-info-left .el-col {
background-color: #ffffff; margin-bottom: 1rem;
min-height: 12rem; }
margin-bottom: 1rem;
}
.right-div .el-col { .art-info-ul span {
background-color: #ffffff; margin-left: 1rem;
min-height: 10rem; }
margin-bottom: 1rem;
}
.left-top-div .el-col { .art-info-ul .el-tag {
min-height: 2rem; margin-left: 1rem;
background-color: #fafafa; }
margin-bottom: 1rem;
margin-left: 10px;
}
.top-div { .art-info-ul {
padding-top: 1rem; padding: 0;
} margin: 0;
}
.left-top-div { li {
font-size: small; list-style: none;
text-align: center; margin-bottom: 0.5rem;
line-height: 2rem; }
}
h2 { .art-info-right {
margin-bottom: 0.5em; height: 100%;
color: rgba(0, 0, 0, 0.85); }
font-weight: 600;
font-size: 30px;
line-height: 1.35;
}
.left-div .el-col { .left-div .el-col {
padding: 1.4rem 1.4rem 0.5rem 1.4rem; background-color: #ffffff;
} min-height: 12rem;
margin-bottom: 1rem;
}
.el-space { .right-div .el-col {
display: flex; background-color: #ffffff;
vertical-align: top; min-height: 10rem;
justify-content: space-evenly; margin-bottom: 1rem;
} }
.tab-divider { .left-top-div .el-col {
margin-bottom: 0.5rem; min-height: 2rem;
} background-color: #fafafa;
margin-bottom: 1rem;
margin-left: 10px;
}
.breadcrumb { .top-div {
margin-bottom: 10px; padding-top: 1rem;
}
.left-top-div {
font-size: small;
text-align: center;
line-height: 2rem;
}
h2 {
margin-bottom: 0.5em;
color: rgba(0, 0, 0, 0.85);
font-weight: 600;
font-size: 30px;
line-height: 1.35;
}
.left-div .el-col {
padding: 1.4rem 1.4rem 0.5rem 1.4rem;
}
.el-space {
display: flex;
vertical-align: top;
justify-content: space-evenly;
}
.tab-divider {
margin-bottom: 0.5rem;
}
.breadcrumb {
margin-bottom: 10px;
}
} }
</style> </style>

122
Yi.Bbs.Vue3/src/views/Discuss.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="width: 1200px" class="body-div"> <div class="discuss-box">
<div class="header"> <div class="header">
<el-form :inline="true"> <el-form :inline="true">
<el-form-item label="标题："> <el-form-item label="标题：">
@@ -24,7 +24,7 @@
@click="enterEditArticle" @click="enterEditArticle"
type="primary" type="primary"
v-hasPer="['bbs:discuss:add']" v-hasPer="['bbs:discuss:add']"
>分享</el-button >发布主题</el-button
> >
<el-dropdown> <el-dropdown>
<span class="el-dropdown-link"> <span class="el-dropdown-link">
@@ -183,65 +183,69 @@ watch(
{ immediate: true } { immediate: true }
); );
</script> </script>
<style scoped> <style scoped lang="scss">
.el-pagination { .discuss-box {
margin: 2rem 0rem 2rem 0rem; width: 100%;
justify-content: right; height: 100%;
} .el-pagination {
.body-div { margin: 2rem 0rem 2rem 0rem;
justify-content: right;
}
/* .body-div {
min-height: 1000px; min-height: 1000px;
} } */
.el-dropdown-link { .el-dropdown-link {
cursor: pointer; cursor: pointer;
color: var(--el-color-primary); color: var(--el-color-primary);
display: flex; display: flex;
align-items: center; align-items: center;
} }
.header { .header {
background-color: #ffffff; background-color: #ffffff;
padding: 1rem; padding: 1rem;
margin: 1rem 0rem; margin: 1rem 0rem;
} }
.collapse-top { .collapse-top {
padding-left: 2rem; padding-left: 2rem;
} }
.header .el-input { .header .el-input {
} }
.el-tabs { .el-tabs {
background-color: #ffffff; background-color: #ffffff;
padding-left: 2rem; padding-left: 2rem;
} }
.el-tabs >>> .el-tabs__header { .el-tabs >>> .el-tabs__header {
margin-bottom: 0; margin-bottom: 0;
} }
.div-item { .div-item {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.el-form { .el-form {
--el-form-label-font-size: var(--el-font-size-base); --el-form-label-font-size: var(--el-font-size-base);
display: flex; display: flex;
align-items: center; align-items: center;
} }
.el-form-item { .el-form-item {
padding-top: 0.8rem; padding-top: 0.8rem;
} }
.form-right { .form-right {
align-items: center; align-items: center;
display: flex; display: flex;
margin-left: auto; margin-left: auto;
} }
.form-right .el-button { .form-right .el-button {
margin-right: 0.6rem; margin-right: 0.6rem;
} }
.header .el-input { .header .el-input {
width: 20rem; width: 20rem;
} }
.collapse-list >>> .el-collapse-item__header { .collapse-list >>> .el-collapse-item__header {
border-bottom-color: #f0f2f5 !important; border-bottom-color: #f0f2f5 !important;
} }
.el-divider { .el-divider {
margin: 0.5rem 0; margin: 0.5rem 0;
}
} }
</style> </style>

6
Yi.Bbs.Vue3/src/views/Login.vue
View File

@@ -44,12 +44,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <h2> 登录-欢迎</h2>
<el-input v-model="loginForm.userName" placeholder="用户名" />
<el-input v-model="loginForm.password" placeholder="密码" show-password />
<el-button class="login-btn" type="primary" @click="login">登录</el-button>
<br>
<el-button class="login-btn" type="primary" @click="guestlogin">游客临时登录</el-button> -->
</template> </template>
<script setup> <script setup>
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";

90
Yi.Bbs.Vue3/src/views/home/Index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="width: 1200px"> <div class="home-box">
<el-row :gutter="20" class="top-div"> <el-row :gutter="20" class="top-div">
<el-col :span="17"> <el-col :span="17">
<div class="scrollbar"> <div class="scrollbar">
@@ -157,48 +157,52 @@ const statisOptions = computed(() => {
}; };
}); });
</script> </script>
<style scoped> <style scoped lang="scss">
.introduce { .home-box {
color: rgba(0, 0, 0, 0.45);
font-size: small;
}
.plate {
background: transparent !important;
}
.left-div .el-col {
background-color: #ffffff;
margin-bottom: 1rem;
}
.right-div .el-col {
background-color: #ffffff;
margin-bottom: 1rem;
}
.carousel-font {
position: absolute;
z-index: 1;
top: 10%;
left: 10%;
}
.top-div {
padding-top: 0.5rem;
}
.scrollbar {
display: block;
margin-bottom: 0.5rem;
}
.VisitsLineChart >>> .el-card__body {
padding: 0.5rem;
}
.statisChart {
width: 100%; width: 100%;
height: 300px; height: 100%;
.introduce {
color: rgba(0, 0, 0, 0.45);
font-size: small;
}
.plate {
background: transparent !important;
}
.left-div .el-col {
background-color: #ffffff;
margin-bottom: 1rem;
}
.right-div .el-col {
background-color: #ffffff;
margin-bottom: 1rem;
}
.carousel-font {
position: absolute;
z-index: 1;
top: 10%;
left: 10%;
}
.top-div {
padding-top: 0.5rem;
}
.scrollbar {
display: block;
margin-bottom: 0.5rem;
}
.VisitsLineChart >>> .el-card__body {
padding: 0.5rem;
}
.statisChart {
width: 100%;
height: 300px;
}
} }
</style> </style>