fix: 优化图书推荐系统
This commit is contained in:
Shu Guang
parent
6a69f05269
commit
779948ec47
@ -4,74 +4,75 @@
|
||||
<div class="login_box">
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar_box">
|
||||
<img src="https://xxx.xiaobaitiao.icu/img/icu/202312211243634.jpg" alt=""/>
|
||||
<img
|
||||
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- 登录表单区域 -->
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginFormRules"
|
||||
label-width="0px"
|
||||
class="login_form"
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginFormRules"
|
||||
label-width="0px"
|
||||
class="login_form"
|
||||
>
|
||||
<!-- 用户名 -->
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model.trim="loginForm.username"
|
||||
prefix-icon="iconfont icon-gerenxinxi"
|
||||
v-model.trim="loginForm.username"
|
||||
prefix-icon="iconfont icon-gerenxinxi"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 密码 -->
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
prefix-icon="iconfont icon-tianchongxing-"
|
||||
type="password"
|
||||
@keyup.enter.native="login"
|
||||
:show-password="true"
|
||||
v-model="loginForm.password"
|
||||
prefix-icon="iconfont icon-tianchongxing-"
|
||||
type="password"
|
||||
@keyup.enter.native="login"
|
||||
:show-password="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 按钮区域 -->
|
||||
<el-form-item class="btns">
|
||||
<el-button type="primary" @click="login" :loading="loginLoading">登录</el-button>
|
||||
<el-button type="primary" @click="login" :loading="loginLoading"
|
||||
>登录</el-button
|
||||
>
|
||||
<el-button type="info" @click="resetLoginForm">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<vue-particles
|
||||
class="login-bg"
|
||||
color="#39AFFD"
|
||||
:particleOpacity="0.7"
|
||||
:particlesNumber="100"
|
||||
shapeType="circle"
|
||||
:particleSize="4"
|
||||
linesColor="#8DD1FE"
|
||||
:linesWidth="1"
|
||||
:lineLinked="true"
|
||||
:lineOpacity="0.4"
|
||||
:linesDistance="150"
|
||||
:moveSpeed="3"
|
||||
:hoverEffect="true"
|
||||
hoverMode="grab"
|
||||
:clickEffect="true"
|
||||
clickMode="push"
|
||||
class="login-bg"
|
||||
color="#39AFFD"
|
||||
:particleOpacity="0.7"
|
||||
:particlesNumber="100"
|
||||
shapeType="circle"
|
||||
:particleSize="4"
|
||||
linesColor="#8DD1FE"
|
||||
:linesWidth="1"
|
||||
:lineLinked="true"
|
||||
:lineOpacity="0.4"
|
||||
:linesDistance="150"
|
||||
:moveSpeed="3"
|
||||
:hoverEffect="true"
|
||||
hoverMode="grab"
|
||||
:clickEffect="true"
|
||||
clickMode="push"
|
||||
>
|
||||
</vue-particles>
|
||||
<div class="footer">
|
||||
<span style="font-weight: bold;color:white;margin-bottom: 10px">
|
||||
<span style="font-weight: bold; color: white; margin-bottom: 10px">
|
||||
登录页面切换
|
||||
</span>
|
||||
<span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
|
||||
|
||||
</div>
|
||||
<div class="footer2">
|
||||
|
||||
</div>
|
||||
<div class="footer2"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -83,7 +84,7 @@ export default {
|
||||
//登录表单规则的验证对象
|
||||
loginFormRules: {
|
||||
username: [
|
||||
{required: true, message: "用户名不能为空", trigger: "blur"},
|
||||
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
||||
{
|
||||
min: 3,
|
||||
max: 20,
|
||||
@ -92,7 +93,7 @@ export default {
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{required: true, message: "密码不能为空", trigger: "blur"},
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
{
|
||||
min: 6,
|
||||
max: 15,
|
||||
@ -101,7 +102,7 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
loginLoading: false
|
||||
loginLoading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -119,13 +120,10 @@ export default {
|
||||
const username = this.loginForm.username;
|
||||
const password = this.loginForm.password;
|
||||
//向数据库发送axios请求，如果登录成功，就跳转
|
||||
const {data: res} = await this.$http.post(
|
||||
"admin/login",
|
||||
{
|
||||
username,
|
||||
password
|
||||
}
|
||||
);
|
||||
const { data: res } = await this.$http.post("admin/login", {
|
||||
username,
|
||||
password,
|
||||
});
|
||||
if (res.status !== 200) {
|
||||
this.loginLoading = false;
|
||||
return this.$message.error(res.msg);
|
||||
@ -159,7 +157,8 @@ export default {
|
||||
|
||||
.login_container {
|
||||
// background-color: #2b4b6b;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) no-repeat 0px 0px;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
|
||||
no-repeat 0px 0px;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar_box">
|
||||
<img
|
||||
src="https://xxx.xiaobaitiao.icu/img/icu/202312211243634.jpg"
|
||||
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
@ -63,22 +63,17 @@
|
||||
>
|
||||
</vue-particles>
|
||||
<div class="footer">
|
||||
<span style="font-weight: bold;color:white;">
|
||||
登录页面切换
|
||||
</span>
|
||||
<span style="font-weight: bold; color: white"> 登录页面切换 </span>
|
||||
<span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
|
||||
<span>
|
||||
<i class="iconfont icon-guanliyuanrenzheng" @click="goAdmin"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="footer2">
|
||||
|
||||
</div>
|
||||
<div class="footer2"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -169,8 +164,8 @@ export default {
|
||||
|
||||
.login_container {
|
||||
// background-color: #2b4b6b;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) no-repeat
|
||||
0px 0px;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
|
||||
no-repeat 0px 0px;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -28,20 +28,18 @@ export default {
|
||||
"bookadmin/query_book/" + this.bookNumber
|
||||
);
|
||||
if (res.status !== 200) {
|
||||
return this.$message.error(
|
||||
{
|
||||
message:res.msg,
|
||||
duration:1000
|
||||
}
|
||||
);
|
||||
return this.$message.error({
|
||||
message: res.msg,
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
// console.log(res);
|
||||
// this.$message.success(res.msg);
|
||||
this.$router.push({
|
||||
name:"bookexpire",
|
||||
query:{
|
||||
bookNumber:this.bookNumber
|
||||
}
|
||||
name: "bookexpire",
|
||||
query: {
|
||||
bookNumber: this.bookNumber,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
@ -83,4 +81,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-header>
|
||||
<div class="logo-container">
|
||||
<img src="" alt="" class="logo" />
|
||||
<span class="title">图书管理系统</span>
|
||||
<span class="title">图书推荐系统</span>
|
||||
<span class="subtitle">借阅者界面</span>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
@ -43,7 +43,7 @@
|
||||
>
|
||||
<div class="menu-header">
|
||||
<i class="el-icon-reading menu-icon"></i>
|
||||
<span v-if="!isCollapse" class="menu-title">图书管理系统</span>
|
||||
<span v-if="!isCollapse" class="menu-title">图书推荐系统</span>
|
||||
</div>
|
||||
|
||||
<el-menu-item index="index" @click="saveNavState('index')">
|
||||
|
||||
@ -1,44 +1,54 @@
|
||||
<template>
|
||||
<el-container class="home-container">
|
||||
<!-- 头部区域 -->
|
||||
<el-header>
|
||||
<div>
|
||||
<!-- <img src="../assets/heima.png" alt="" /> -->
|
||||
<span>欢迎登录图书管理系统</span>
|
||||
<span style="color: #ccc; font-size: 16px">系统管理人员页面</span>
|
||||
<div class="logo-container">
|
||||
<!-- <img src="../assets/logo.png" alt="" class="logo" /> -->
|
||||
<span class="title">图书推荐系统</span>
|
||||
<span class="subtitle">系统管理人员页面</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div>
|
||||
<el-avatar
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
:size="35"
|
||||
style="margin-right: 10px"
|
||||
></el-avatar>
|
||||
</div>
|
||||
<div class="user">管理员:{{ this.admin.adminName }}</div>
|
||||
<el-button type="info" @click="logout">退出</el-button>
|
||||
<div class="user-info">
|
||||
<el-avatar
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
:size="40"
|
||||
class="avatar"
|
||||
></el-avatar>
|
||||
<div class="user">管理员：{{ this.admin.adminName }}</div>
|
||||
<el-button type="primary" size="medium" @click="logout" plain
|
||||
>退出</el-button
|
||||
>
|
||||
</div>
|
||||
</el-header>
|
||||
<!-- 页面主体区域 -->
|
||||
<el-container>
|
||||
<!-- 侧边栏 -->
|
||||
<el-aside :width="isCollapse ? '64px' : '200px'">
|
||||
<div class="toggle-button" @click="toggleCollapse">|||</div>
|
||||
<el-aside
|
||||
:width="isCollapse ? '64px' : '240px'"
|
||||
class="sidebar-container"
|
||||
>
|
||||
<div class="toggle-button" @click="toggleCollapse">
|
||||
<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏菜单区域 -->
|
||||
<el-menu
|
||||
:default-active="activePath"
|
||||
class="el-menu-vertical-demo"
|
||||
background-color="#fff"
|
||||
text-color="black"
|
||||
active-text-color="#ffd04b"
|
||||
class="el-menu-vertical"
|
||||
background-color="#001529"
|
||||
text-color="rgba(255,255,255,0.65)"
|
||||
active-text-color="#fff"
|
||||
:router="true"
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="false"
|
||||
:collapse-transition="true"
|
||||
unique-opened
|
||||
>
|
||||
<div class="menu-header">
|
||||
<i class="el-icon-s-tools menu-icon"></i>
|
||||
<span v-if="!isCollapse" class="menu-title">系统管理</span>
|
||||
</div>
|
||||
|
||||
<el-menu-item index="bookmanage" @click="saveNavState('bookmanage')">
|
||||
<i class="el-icon-notebook-1"></i>
|
||||
<span slo="title">书籍管理</span>
|
||||
<span slot="title">书籍管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="booktype" @click="saveNavState('booktype')">
|
||||
<i class="el-icon-notebook-2"></i>
|
||||
@ -80,27 +90,24 @@
|
||||
<span slot="title">系统管理</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item
|
||||
index="intelligent_analysis"
|
||||
@click="saveNavState('intelligent_analysis')"
|
||||
index="intelligent_analysis"
|
||||
@click="saveNavState('intelligent_analysis')"
|
||||
>
|
||||
<i class="el-icon-data-line"></i>
|
||||
<span slot="title">智能分析</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<!-- 右侧内容主体 -->
|
||||
|
||||
<el-main>
|
||||
<!-- 路由占位符 -->
|
||||
<router-view></router-view>
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -160,68 +167,186 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 40%;
|
||||
color:#ccc;
|
||||
a {
|
||||
color:#ccc;
|
||||
}
|
||||
}
|
||||
<style lang="less" scoped>
|
||||
.home-container {
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: rgb(34, 34, 34);
|
||||
background: linear-gradient(90deg, #1890ff 0%, #36cfc9 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 0px;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
border-radius: 10px;
|
||||
> div {
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-left: 15px;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
margin-right: 12px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-right: 20px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #fff;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.toggle-button {
|
||||
background: #002140;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #002849;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
margin: 4px 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: #1890ff !important;
|
||||
color: #fff !important;
|
||||
border-right: 3px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #eaedf1;
|
||||
background-color: #f0f2f5;
|
||||
padding: 20px;
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10px;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.toggle-button {
|
||||
background-color: #4a5064;
|
||||
font-size: 10px;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
//设置文字之间的间距
|
||||
letter-spacing: 0.2em;
|
||||
cursor: pointer;
|
||||
|
||||
.sidebar-container {
|
||||
transition: width 0.3s;
|
||||
background-color: #001529;
|
||||
overflow: hidden;
|
||||
|
||||
.menu-header {
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
|
||||
&:not(.el-menu--collapse) {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #1890ff !important;
|
||||
color: #fff !important;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: inherit;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user {
|
||||
margin-right: 15px;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
|
||||
.el-main {
|
||||
padding: 20px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
background-color: rgb(51, 122, 183) !important;
|
||||
}
|
||||
// .el-menu-item{
|
||||
// color:rgb(135, 206, 235) !important;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -1,44 +1,54 @@
|
||||
<template>
|
||||
<el-container class="home-container">
|
||||
<!-- 头部区域 -->
|
||||
<el-header>
|
||||
<div>
|
||||
<!-- <img src="../assets/heima.png" alt="" /> -->
|
||||
<span>欢迎登录图书管理系统</span>
|
||||
<span style="color: #ccc; font-size: 16px">图书馆管理人员页面</span>
|
||||
<div class="logo-container">
|
||||
<!-- <img src="../assets/logo.png" alt="" class="logo" /> -->
|
||||
<span class="title">图书推荐系统</span>
|
||||
<span class="subtitle">图书管理员页面</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div>
|
||||
<el-avatar
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
:size="35"
|
||||
style="margin-right: 10px"
|
||||
></el-avatar>
|
||||
</div>
|
||||
<div class="user">管理员:{{ this.bookAdmin.bookAdminName }}</div>
|
||||
<el-button type="info" @click="logout">退出</el-button>
|
||||
<div class="user-info">
|
||||
<el-avatar
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
:size="40"
|
||||
class="avatar"
|
||||
></el-avatar>
|
||||
<div class="user">管理员：{{ this.bookAdmin.bookAdminName }}</div>
|
||||
<el-button type="primary" size="medium" @click="logout" plain
|
||||
>退出</el-button
|
||||
>
|
||||
</div>
|
||||
</el-header>
|
||||
<!-- 页面主体区域 -->
|
||||
<el-container>
|
||||
<!-- 侧边栏 -->
|
||||
<el-aside :width="isCollapse ? '64px' : '200px'">
|
||||
<div class="toggle-button" @click="toggleCollapse">|||</div>
|
||||
<el-aside
|
||||
:width="isCollapse ? '64px' : '240px'"
|
||||
class="sidebar-container"
|
||||
>
|
||||
<div class="toggle-button" @click="toggleCollapse">
|
||||
<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏菜单区域 -->
|
||||
<el-menu
|
||||
:default-active="activePath"
|
||||
class="el-menu-vertical-demo"
|
||||
background-color="#fff"
|
||||
text-color="black"
|
||||
active-text-color="#ffd04b"
|
||||
class="el-menu-vertical"
|
||||
background-color="#001529"
|
||||
text-color="rgba(255,255,255,0.65)"
|
||||
active-text-color="#fff"
|
||||
:router="true"
|
||||
:collapse="isCollapse"
|
||||
:collapse-transition="false"
|
||||
:collapse-transition="true"
|
||||
unique-opened
|
||||
>
|
||||
<div class="menu-header">
|
||||
<i class="el-icon-collection menu-icon"></i>
|
||||
<span v-if="!isCollapse" class="menu-title">图书管理</span>
|
||||
</div>
|
||||
|
||||
<el-menu-item index="borrowbook" @click="saveNavState('borrowbook')">
|
||||
<i class="el-icon-collection"></i>
|
||||
<span slo="title">借阅图书</span>
|
||||
<span slot="title">借阅图书</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="returnbook" @click="saveNavState('returnbook')">
|
||||
<i class="el-icon-collection"></i>
|
||||
@ -67,19 +77,16 @@
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<!-- 右侧内容主体 -->
|
||||
|
||||
<el-main>
|
||||
<!-- 路由占位符 -->
|
||||
<router-view></router-view>
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -96,16 +103,16 @@ export default {
|
||||
isCollapse: false,
|
||||
//被激活的链接地址
|
||||
activePath: "",
|
||||
bookAdmin:{
|
||||
bookAdminId:Number,
|
||||
status:Number,
|
||||
username:"",
|
||||
password:"",
|
||||
bookAdminName:"",
|
||||
email:"",
|
||||
createTime:"",
|
||||
updateTime:""
|
||||
}
|
||||
bookAdmin: {
|
||||
bookAdminId: Number,
|
||||
status: Number,
|
||||
username: "",
|
||||
password: "",
|
||||
bookAdminName: "",
|
||||
email: "",
|
||||
createTime: "",
|
||||
updateTime: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
@ -116,7 +123,10 @@ export default {
|
||||
const stringId = window.sessionStorage.getItem("bookAdminId");
|
||||
const id = parseInt(stringId);
|
||||
this.bookAdmin.bookAdminId = id;
|
||||
const { data: res } = await this.$http.post("bookadmin/getData", this.bookAdmin);
|
||||
const { data: res } = await this.$http.post(
|
||||
"bookadmin/getData",
|
||||
this.bookAdmin
|
||||
);
|
||||
// console.log(res);
|
||||
this.bookAdmin = res.data;
|
||||
},
|
||||
@ -141,69 +151,186 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 40%;
|
||||
color:#ccc;
|
||||
a {
|
||||
color:#ccc;
|
||||
}
|
||||
}
|
||||
<style lang="less" scoped>
|
||||
.home-container {
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: rgb(34, 34, 34);
|
||||
background: linear-gradient(90deg, #1890ff 0%, #36cfc9 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 0px;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
border-radius: 10px;
|
||||
> div {
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-left: 15px;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
margin-right: 12px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-right: 20px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #fff;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.toggle-button {
|
||||
background: #002140;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #002849;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
margin: 4px 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: #1890ff !important;
|
||||
color: #fff !important;
|
||||
border-right: 3px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #eaedf1;
|
||||
background-color: #f0f2f5;
|
||||
padding: 20px;
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10px;
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.toggle-button {
|
||||
background-color: #4a5064;
|
||||
font-size: 10px;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
//设置文字之间的间距
|
||||
letter-spacing: 0.2em;
|
||||
cursor: pointer;
|
||||
|
||||
.sidebar-container {
|
||||
transition: width 0.3s;
|
||||
background-color: #001529;
|
||||
overflow: hidden;
|
||||
|
||||
.menu-header {
|
||||
height: 56px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
|
||||
&:not(.el-menu--collapse) {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #1890ff !important;
|
||||
color: #fff !important;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: inherit;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user {
|
||||
margin-right: 15px;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
|
||||
.el-main {
|
||||
padding: 20px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
background-color: rgb(51, 122, 183) !important;
|
||||
}
|
||||
// .el-menu-item{
|
||||
// color:rgb(135, 206, 235) !important;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -1,60 +1,59 @@
|
||||
<template>
|
||||
<div class="comment_container">
|
||||
<div class="backgroundImg">
|
||||
<img
|
||||
src="https://xxx.xiaobaitiao.icu/img/icu/202312211243628.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="barrages-drop">
|
||||
<vue-baberrage
|
||||
:isShow="barrageIsShow"
|
||||
:barrageList="barrageList"
|
||||
:maxWordCount="maxWordCount"
|
||||
:throttleGap="throttleGap"
|
||||
:loop="barrageLoop"
|
||||
:boxHeight="boxHeight"
|
||||
:boxWidth="boxWidth"
|
||||
:messageHeight="messageHeight"
|
||||
:lanesCount="lanesCount"
|
||||
style="width: 1330px; height: 750px"
|
||||
>
|
||||
</vue-baberrage>
|
||||
<div class="addMain">
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model.trim="input"
|
||||
class="input-with-select"
|
||||
@keyup.enter.native="addContent"
|
||||
<div class="comment-container">
|
||||
<div class="background-wrapper"></div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="barrage-box">
|
||||
<vue-baberrage
|
||||
:isShow="barrageIsShow"
|
||||
:barrageList="barrageList"
|
||||
:maxWordCount="50"
|
||||
:throttleGap="2000"
|
||||
:loop="false"
|
||||
:boxHeight="600"
|
||||
:messageHeight="50"
|
||||
:lanesCount="8"
|
||||
class="barrage-component"
|
||||
>
|
||||
</vue-baberrage>
|
||||
</div>
|
||||
|
||||
<div class="input-box">
|
||||
<el-input
|
||||
v-model.trim="input"
|
||||
placeholder="发送一条友善的评论吧~"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
class="comment-input"
|
||||
>
|
||||
<template slot="prepend">
|
||||
<i class="el-icon-chat-line-round"></i>
|
||||
</template>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-edit"
|
||||
type="primary"
|
||||
:loading="sending"
|
||||
@click="addContent"
|
||||
></el-button>
|
||||
>
|
||||
发送弹幕
|
||||
</el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { MESSAGE_TYPE } from "vue-baberrage";
|
||||
import { nanoid, random } from "nanoid";
|
||||
import _ from "lodash";
|
||||
|
||||
export default {
|
||||
name: "Comment",
|
||||
data() {
|
||||
return {
|
||||
barrageIsShow: true, //是否展示弹幕
|
||||
messageHeight: 3, //消息高度(测试不生效)
|
||||
barrageLoop: false, //是否循环播放
|
||||
maxWordCount: 2, //弹幕字数(测试不生效)
|
||||
lanesCount: 1, //固定弹幕(测试不生效)
|
||||
boxWidth: 1600, //弹幕宽度
|
||||
boxHeight: 200, //弹幕高度(测试不生效)
|
||||
throttleGap: 3000, //消息间隔
|
||||
barrageIsShow: true,
|
||||
input: "",
|
||||
//弹幕列表，格式为数组
|
||||
sending: false,
|
||||
barrageList: [],
|
||||
barrage: {
|
||||
id: "",
|
||||
@ -63,81 +62,179 @@ export default {
|
||||
msg: "",
|
||||
time: "",
|
||||
type: MESSAGE_TYPE.NORMAL,
|
||||
barrageStyle: "",
|
||||
barrageStyle: {
|
||||
fontSize: "16px",
|
||||
padding: "5px 10px",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.6)",
|
||||
color: "#fff",
|
||||
borderRadius: "4px",
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addContent:_.throttle(async function(){
|
||||
// 先判断文本内容是否为空或者是无意义的数字，如果是提示用户信息
|
||||
if(this.input.trim()===''||/^\d+$/.test(this.input)||/^[a-zA-Z]+$/.test(this.input)){
|
||||
this.$message.info({
|
||||
message: "请不要输入无意义的内容",
|
||||
duration:1000
|
||||
})
|
||||
return;
|
||||
}
|
||||
// 文本框中内容赋值给barrage
|
||||
this.barrage.msg = this.input;
|
||||
//向数据库发送请求 addComment
|
||||
const {data:res} = await this.$http.post('user/add_comment',this.barrage);
|
||||
if(res.status !== 200){
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
//调用获取新的留言列表
|
||||
this.getCommentList();
|
||||
//重置内容框
|
||||
this.input = "";
|
||||
this.$message.success(res.msg);
|
||||
},5000,{ trailing: false }),
|
||||
addContent: _.throttle(
|
||||
async function () {
|
||||
if (
|
||||
!this.input.trim() ||
|
||||
/^\d+$/.test(this.input) ||
|
||||
/^[a-zA-Z]+$/.test(this.input)
|
||||
) {
|
||||
this.$message.warning("请输入有意义的评论内容");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.sending = true;
|
||||
this.barrage.msg = this.input;
|
||||
const { data: res } = await this.$http.post(
|
||||
"user/add_comment",
|
||||
this.barrage
|
||||
);
|
||||
|
||||
if (res.status !== 200) {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
|
||||
await this.getCommentList();
|
||||
this.input = "";
|
||||
this.$message.success("发送成功");
|
||||
} catch (error) {
|
||||
this.$message.error(error.message || "发送失败");
|
||||
} finally {
|
||||
this.sending = false;
|
||||
}
|
||||
},
|
||||
3000,
|
||||
{ trailing: false }
|
||||
),
|
||||
|
||||
async getCommentList() {
|
||||
// 发送axios请求
|
||||
const { data: res } = await this.$http.get("user/get_commentlist");
|
||||
// console.log(res);
|
||||
if (res.status !== 200) {
|
||||
return this.$message.error(res.msg);
|
||||
try {
|
||||
const { data: res } = await this.$http.get("user/get_commentlist");
|
||||
if (res.status !== 200) {
|
||||
throw new Error(res.msg);
|
||||
}
|
||||
this.barrageList = [...res.data, {}];
|
||||
} catch (error) {
|
||||
this.$message.error("获取评论列表失败");
|
||||
}
|
||||
this.$message.success(res.msg);
|
||||
this.barrageList = res.data
|
||||
//添加空对象，数组更新，组件更新
|
||||
this.barrageList.push({})
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
mounted(){
|
||||
mounted() {
|
||||
this.getCommentList();
|
||||
}
|
||||
// 定时刷新弹幕列表
|
||||
setInterval(() => {
|
||||
this.getCommentList();
|
||||
}, 30000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.comment_container {
|
||||
.comment-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.backgroundImg {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
||||
.background-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.5;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.3;
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
rgba(255, 255, 255, 0.3)
|
||||
);
|
||||
}
|
||||
}
|
||||
.barrages-drop {
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.addMain {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background-color: pink;
|
||||
top: 450px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.barrage-box {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.barrage-component {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 20px;
|
||||
|
||||
.comment-input {
|
||||
/deep/ .el-input-group__prepend {
|
||||
background: #fff;
|
||||
padding: 0 15px;
|
||||
i {
|
||||
font-size: 18px;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-input__inner {
|
||||
height: 45px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/deep/ .el-button {
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media screen and (max-width: 768px) {
|
||||
.input-box {
|
||||
padding: 10px;
|
||||
|
||||
.comment-input {
|
||||
/deep/ .el-input__inner {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,96 +1,117 @@
|
||||
<template>
|
||||
<div class="information_container">
|
||||
<div class="backgroundImg">
|
||||
<img
|
||||
src="https://xxx.xiaobaitiao.icu/img/icu/202312211243635.jpg"
|
||||
alt="背景图片"
|
||||
/>
|
||||
</div>
|
||||
<div class="information_header">
|
||||
<p>个人信息</p>
|
||||
<p>
|
||||
<i class="el-icon-s-flag"></i> By reading we enrich the mind, by
|
||||
conversation we polish it.
|
||||
</p>
|
||||
</div>
|
||||
<div class="information_banner"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
<div class="information_banner_left" >
|
||||
<div class="banner_left_main" v-if="show">
|
||||
<div class="number">
|
||||
<i class="el-icon-collection-tag"></i> 借阅证编号:
|
||||
{{ this.user.cardNumber }}
|
||||
</div>
|
||||
<div class="name">
|
||||
<i class="iconfont icon-gerenxinxi"></i> 借阅证姓名:
|
||||
{{ this.user.cardName }}
|
||||
</div>
|
||||
<div class="rule">
|
||||
<i class="iconfont icon-guizeshezhi"></i> 规则编号:
|
||||
{{ this.user.ruleNumber }}
|
||||
</div>
|
||||
<div class="status">
|
||||
<i class="el-icon-refresh"></i> 状态:
|
||||
{{ this.user.status === 1 ? "可用" : "禁用" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="information-container">
|
||||
<el-card class="info-card">
|
||||
<div class="info-header">
|
||||
<h2>个人信息</h2>
|
||||
<p class="motto">
|
||||
<i class="el-icon-reading"></i>
|
||||
By reading we enrich the mind, by conversation we polish it.
|
||||
</p>
|
||||
</div>
|
||||
<div class="information_banner_right">
|
||||
<el-button type="primary" class="changePWD" @click="showEditDialog" v-if="show"
|
||||
>修改密码</el-button
|
||||
>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="修改密码"
|
||||
:visible.sync="editDialogVisible"
|
||||
width="50%"
|
||||
@close="editDialogClosed"
|
||||
|
||||
<div
|
||||
class="info-content"
|
||||
v-loading="loading"
|
||||
element-loading-text="加载中..."
|
||||
>
|
||||
<el-form
|
||||
:model="editForm"
|
||||
ref="editFormRef"
|
||||
:rules="editFormRules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="新密码" prop="password">
|
||||
<el-input v-model="editForm.password" type="password" placeholder="请输入新密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="confirmPassword">
|
||||
<el-input v-model="editForm.confirmPassword" type="password" placeholder="请再次输入新密码"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="changePassword"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<template v-if="show">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="info-item">
|
||||
<i class="el-icon-collection-tag"></i>
|
||||
<span class="label">借阅证编号：</span>
|
||||
<span class="value">{{ user.cardNumber }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="el-icon-user"></i>
|
||||
<span class="label">借阅证姓名：</span>
|
||||
<span class="value">{{ user.cardName }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="el-icon-document"></i>
|
||||
<span class="label">规则编号：</span>
|
||||
<span class="value">{{ user.ruleNumber }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<i class="el-icon-circle-check"></i>
|
||||
<span class="label">状态：</span>
|
||||
<el-tag :type="user.status === 1 ? 'success' : 'danger'">
|
||||
{{ user.status === 1 ? "可用" : "禁用" }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="action-buttons">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="showEditDialog"
|
||||
icon="el-icon-key"
|
||||
>
|
||||
修改密码
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
title="修改密码"
|
||||
:visible.sync="editDialogVisible"
|
||||
width="40%"
|
||||
@close="editDialogClosed"
|
||||
center
|
||||
>
|
||||
<el-form
|
||||
:model="editForm"
|
||||
ref="editFormRef"
|
||||
:rules="editFormRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="新密码" prop="password">
|
||||
<el-input
|
||||
v-model="editForm.password"
|
||||
type="password"
|
||||
placeholder="请输入新密码"
|
||||
show-password
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="editForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请再次输入新密码"
|
||||
show-password
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="editDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="changePassword">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Information",
|
||||
data() {
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.editForm.password) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
const validatePass2 = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请再次输入密码"));
|
||||
} else if (value !== this.editForm.password) {
|
||||
callback(new Error("两次输入密码不一致!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
user: {
|
||||
ruleNumber: Number,
|
||||
cardNumber: Number,
|
||||
status: Number,
|
||||
userId: Number,
|
||||
ruleNumber: "",
|
||||
cardNumber: "",
|
||||
status: 0,
|
||||
userId: "",
|
||||
cardName: "",
|
||||
username: "",
|
||||
password: "",
|
||||
@ -101,67 +122,70 @@ export default {
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
editFormRules:{
|
||||
password:[
|
||||
{required:true,message:"请输入新密码",trigger:"blur"},
|
||||
{min:6,max:15,message:"新密码长度在6-15个字符",trigger:"blur"}
|
||||
editFormRules: {
|
||||
password: [
|
||||
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||||
{
|
||||
min: 6,
|
||||
max: 15,
|
||||
message: "长度在 6 到 15 个字符",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
confirmPassword:[
|
||||
{validator:validatePass2,trigger:"blur"}
|
||||
]
|
||||
|
||||
},
|
||||
confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
|
||||
},
|
||||
editDialogVisible: false,
|
||||
show:false,
|
||||
loading:true
|
||||
show: false,
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//让修改公告的对话框可见,并从数据库中回显数据
|
||||
showEditDialog() {
|
||||
// 让修改公告的对话框可见
|
||||
this.editDialogVisible = true;
|
||||
},
|
||||
//监听修改对话框的关闭，一旦对话框关闭，就重置表单，回显数据
|
||||
editDialogClosed() {
|
||||
this.$refs.editFormRef.resetFields();
|
||||
},
|
||||
async getUserInformaton() {
|
||||
// 先从sessionStorage中获取用户id
|
||||
const userId = window.sessionStorage.getItem("userId");
|
||||
// 发送axios请求，携带用户id，获取个人信息
|
||||
this.loading = true;
|
||||
const { data: res } = await this.$http.get(
|
||||
"user/get_information/" + userId
|
||||
);
|
||||
if (res.status !== 200) {
|
||||
try {
|
||||
const userId = window.sessionStorage.getItem("userId");
|
||||
const { data: res } = await this.$http.get(
|
||||
`user/get_information/${userId}`
|
||||
);
|
||||
|
||||
return this.$message.error(res.msg);
|
||||
if (res.status !== 200) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.user = res.data;
|
||||
this.show = true;
|
||||
this.$message.success({ message: res.msg, duration: 1000 });
|
||||
} catch (error) {
|
||||
this.$message.error("获取用户信息失败");
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
this.$message.success({
|
||||
message: res.msg,
|
||||
duration: 1000,
|
||||
});
|
||||
this.user = res.data;
|
||||
this.show = true;
|
||||
this.loading = false;
|
||||
|
||||
},
|
||||
async changePassword(){
|
||||
async changePassword() {
|
||||
try {
|
||||
const { data: res } = await this.$http.post("user/update_password", {
|
||||
password: this.editForm.password,
|
||||
userId: window.sessionStorage.getItem("userId"),
|
||||
});
|
||||
|
||||
const {data:res} = await this.$http.post('user/update_password',{
|
||||
password:this.editForm.password,
|
||||
userId:window.sessionStorage.getItem('userId')
|
||||
})
|
||||
if(res.status !== 200){
|
||||
return this.$message.error(res.msg);
|
||||
if (res.status !== 200) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
this.$message.success(res.msg);
|
||||
this.editDialogVisible = false;
|
||||
this.$refs.editFormRef.resetFields();
|
||||
window.sessionStorage.clear();
|
||||
this.$router.push("/login");
|
||||
} catch (error) {
|
||||
this.$message.error("修改密码失败");
|
||||
}
|
||||
this.$message.success(res.msg)
|
||||
this.editDialogVisible = false;
|
||||
this.$refs.editFormRef.resetFields();
|
||||
window.sessionStorage.clear();
|
||||
this.$router.push("/login");
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUserInformaton();
|
||||
@ -170,62 +194,123 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.information_container {
|
||||
.information-container {
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.backgroundImg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
background: #f0f2f5;
|
||||
|
||||
.background-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
|
||||
.info-header {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.motto {
|
||||
color: #606266;
|
||||
font-size: 16px;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: 30px;
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateX(5px);
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #409eff;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #606266;
|
||||
margin-right: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
|
||||
.el-button {
|
||||
padding: 12px 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.information_header {
|
||||
height: 200px;
|
||||
// background-color: pink;
|
||||
text-align: center;
|
||||
p:nth-child(1) {
|
||||
line-height: 140px;
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
|
||||
// 响应式适配
|
||||
@media screen and (max-width: 768px) {
|
||||
.information-container {
|
||||
padding: 10px;
|
||||
|
||||
.info-card {
|
||||
margin: 20px auto;
|
||||
|
||||
.info-header {
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p:nth-child(2) {
|
||||
color: black;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.information_banner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 400px;
|
||||
// background-color: pink;
|
||||
.information_banner_left {
|
||||
flex: 0.5;
|
||||
// background-color: brown;
|
||||
text-align: center;
|
||||
}
|
||||
.information_banner_right {
|
||||
flex: 0.5;
|
||||
// background-color: skyblue;
|
||||
text-align: left;
|
||||
line-height: 400px;
|
||||
}
|
||||
}
|
||||
.banner_left_main {
|
||||
margin-top: 120px;
|
||||
color: black;
|
||||
font-size: 20px;
|
||||
div {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.changePWD {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,98 +1,185 @@
|
||||
<template>
|
||||
<div class="notice_container">
|
||||
<div class="header">
|
||||
<div class="scroll-text" ref="scrollText">
|
||||
<i class="el-icon-s-opportunity"></i> {{ text }}
|
||||
<i class="el-icon-s-opportunity"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<div class="banner_header"><p>近期公告</p></div>
|
||||
<div class="banner_main"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
<div class="banner_main_item" v-for="item in noticeList" :key="item.noticeId">
|
||||
<div class="banner_main_item_header"> <p> {{ item.noticeTitle }} {{ item.createTime }}</p></div>
|
||||
|
||||
<div class="banner_main_item_main">
|
||||
<p>{{ item.noticeContent }}</p>
|
||||
</div>
|
||||
<div class="notice-container">
|
||||
<el-card class="notice-card">
|
||||
<!-- 顶部滚动通知 -->
|
||||
<div class="notice-header">
|
||||
<div class="scroll-text" ref="scrollText">
|
||||
<i class="el-icon-bell"></i>
|
||||
<span>{{ text }}</span>
|
||||
<i class="el-icon-bell"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公告列表 -->
|
||||
<div class="notice-content">
|
||||
<div class="section-title">
|
||||
<i class="el-icon-message"></i>
|
||||
<span>近期公告</span>
|
||||
</div>
|
||||
|
||||
<el-timeline v-loading="loading">
|
||||
<el-timeline-item
|
||||
v-for="item in noticeList"
|
||||
:key="item.noticeId"
|
||||
:timestamp="item.createTime"
|
||||
placement="top"
|
||||
:type="getTimelineItemType(item.noticeId)"
|
||||
>
|
||||
<el-card class="notice-item">
|
||||
<div class="notice-item-title">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>{{ item.noticeTitle }}</span>
|
||||
</div>
|
||||
<div class="notice-item-content">
|
||||
{{ item.noticeContent }}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "Notice",
|
||||
data() {
|
||||
return {
|
||||
text: "图书馆公告栏,记得查收公告呀!小项目请勿恶意攻击,谢谢",
|
||||
noticeList:[
|
||||
{
|
||||
noticeId:0,
|
||||
noticeAdminId:Number,
|
||||
noticeTitle:"",
|
||||
noticeContent:"",
|
||||
createTime:"",
|
||||
updateTime:""
|
||||
}
|
||||
],
|
||||
loading:true
|
||||
text: "欢迎访问图书馆公告栏，请及时查看最新公告！",
|
||||
noticeList: [],
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async getRuleList(){
|
||||
this.loading = true;
|
||||
const {data:res} = await this.$http.get('user/get_noticelist')
|
||||
if(res.status!== 200){
|
||||
async getRuleList() {
|
||||
try {
|
||||
const { data: res } = await this.$http.get("user/get_noticelist");
|
||||
if (res.status !== 200) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.noticeList = res.data;
|
||||
this.$message.success({
|
||||
message: res.msg,
|
||||
duration: 1000,
|
||||
});
|
||||
} catch (error) {
|
||||
this.$message.error("获取公告列表失败");
|
||||
} finally {
|
||||
this.loading = false;
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.$message.success({
|
||||
message:res.msg,
|
||||
duration:1000
|
||||
})
|
||||
this.noticeList = res.data;
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
getTimelineItemType(id) {
|
||||
const types = ["primary", "success", "warning", "danger"];
|
||||
return types[id % types.length];
|
||||
},
|
||||
initScrollText() {
|
||||
const containerWidth = this.$refs.scrollText.offsetWidth;
|
||||
const textWidth = this.$refs.scrollText.scrollWidth;
|
||||
if (textWidth > containerWidth) {
|
||||
this.$refs.scrollText.style.animation = "scroll 15s linear infinite";
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const containerWidth = this.$refs.scrollText.offsetWidth;
|
||||
const textWidth = this.$refs.scrollText.scrollWidth;
|
||||
|
||||
// If the text is longer than the container, start the animation
|
||||
if (textWidth > containerWidth) {
|
||||
this.$refs.scrollText.style.animation = "scroll 10s linear infinite";
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.initScrollText();
|
||||
});
|
||||
},
|
||||
created(){
|
||||
created() {
|
||||
this.getRuleList();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.notice_container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(70, 130, 180);
|
||||
border-radius: 15px;
|
||||
// box-shadow: 0px 0px 5px 5px rgb(66, 142, 5);
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.scroll-text {
|
||||
white-space: nowrap;
|
||||
animation: scroll 10s linear infinite;
|
||||
.notice-container {
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 120px);
|
||||
background: #f5f7fa;
|
||||
|
||||
.notice-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.scroll-text {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
i {
|
||||
margin: 0 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #f0f2f5;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: #1890ff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-item {
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.notice-item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
i {
|
||||
color: #1890ff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-item-content {
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
@ -103,71 +190,27 @@ export default {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: pink;
|
||||
margin-top:30px;
|
||||
}
|
||||
.banner_header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
// background-color: brown;
|
||||
|
||||
p {
|
||||
color:black;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
.banner_main{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color:skyblue;
|
||||
|
||||
}
|
||||
// 响应式适配
|
||||
@media screen and (max-width: 768px) {
|
||||
.notice-container {
|
||||
padding: 10px;
|
||||
|
||||
.banner_main_item:nth-child(n+2) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.banner_main_item:nth-child(n+2){
|
||||
background-color: #D1EEEE;
|
||||
}
|
||||
.banner_main_item:nth-child(1){
|
||||
background-color: pink;
|
||||
}
|
||||
.notice-header {
|
||||
padding: 10px;
|
||||
|
||||
.banner_main_item {
|
||||
width: 80%;
|
||||
height: 120px;
|
||||
// background-color: aqua;
|
||||
.banner_main_item_header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
// background-color: pink;
|
||||
border:1px solid skyblue;
|
||||
box-sizing: border-box;
|
||||
p {
|
||||
color:rgb(175, 129, 143);
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
.scroll-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.banner_main_item_main{
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: white;
|
||||
border:1px solid skyblue;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
p {
|
||||
line-height: 70px;
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 20px;
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,114 +1,183 @@
|
||||
<template>
|
||||
<div class="rule_container">
|
||||
<div class="header">
|
||||
<p>读者规则信息查看</p>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<el-tooltip
|
||||
v-for="item in ruleList"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
:key="item.ruleId"
|
||||
effect="dark"
|
||||
placement="right"
|
||||
<div class="rule-container">
|
||||
<el-card class="rule-card">
|
||||
<div slot="header" class="header">
|
||||
<i class="el-icon-reading"></i>
|
||||
<span>读者规则信息查看</span>
|
||||
</div>
|
||||
|
||||
<el-row
|
||||
:gutter="20"
|
||||
v-loading="loading"
|
||||
element-loading-text="加载中..."
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.7)"
|
||||
>
|
||||
<div slot="content" class="content_tip">可借阅数量: {{ item.bookLimitNumber }}<br/>可借阅天数: {{ item.bookDays }}
|
||||
<br/>可借阅图书馆: {{ item.bookLimitLibrary }}<br/>过期扣费/天: {{ item.bookOverdueFee }}</div>
|
||||
<el-button style="font-size:16px">借阅证规则编号: {{ item.bookRuleId }}</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
</div>
|
||||
<el-col :span="12" v-for="(item, index) in ruleList" :key="item.ruleId">
|
||||
<el-card
|
||||
class="rule-item"
|
||||
:class="{ 'rule-item-odd': index % 2 === 0 }"
|
||||
>
|
||||
<div class="rule-title">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>借阅证规则 #{{ item.bookRuleId }}</span>
|
||||
</div>
|
||||
<div class="rule-content">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="可借阅数量">
|
||||
<el-tag size="medium">{{ item.bookLimitNumber }} 本</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="可借阅天数">
|
||||
<el-tag size="medium" type="success"
|
||||
>{{ item.bookDays }} 天</el-tag
|
||||
>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="可借阅图书馆">
|
||||
<el-tag size="medium" type="warning">{{
|
||||
item.bookLimitLibrary
|
||||
}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="过期扣费/天">
|
||||
<el-tag size="medium" type="danger"
|
||||
>￥{{ item.bookOverdueFee }}</el-tag
|
||||
>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Loading } from 'element-ui';
|
||||
export default {
|
||||
data(){
|
||||
name: "Rule",
|
||||
data() {
|
||||
return {
|
||||
ruleList:[
|
||||
{
|
||||
ruleId:0,
|
||||
bookRuleId:Number,
|
||||
bookDays:Number,
|
||||
bookLimitNumber:Number,
|
||||
bookOverdueFee:Number,
|
||||
bookLimitLibrary:"",
|
||||
createTime:"",
|
||||
updateTime:"",
|
||||
|
||||
ruleList: [],
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async getRuleList() {
|
||||
try {
|
||||
const { data: res } = await this.$http.get("user/get_rulelist");
|
||||
if (res.status !== 200) {
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
|
||||
],
|
||||
loading:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
async getRuleList(){
|
||||
const {data:res} = await this.$http.get("user/get_rulelist")
|
||||
if(res.status !== 200){
|
||||
this.ruleList = res.data;
|
||||
this.$message.success({
|
||||
message: res.msg,
|
||||
duration: 1000,
|
||||
});
|
||||
} catch (error) {
|
||||
this.$message.error("获取规则列表失败");
|
||||
} finally {
|
||||
this.loading = false;
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message.success({
|
||||
message:res.msg,
|
||||
duration:1000
|
||||
})
|
||||
this.loading = false;
|
||||
this.ruleList = res.data
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getRuleList();
|
||||
},
|
||||
created(){
|
||||
this.getRuleList()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.rule_container {
|
||||
position: relative;
|
||||
}
|
||||
.header {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
p {
|
||||
font-size: 36px;
|
||||
color: rgb(70, 130, 180);
|
||||
.rule-container {
|
||||
padding: 20px;
|
||||
|
||||
.rule-card {
|
||||
background: #f5f7fa;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
color: #303133;
|
||||
margin-bottom: 20px;
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
font-size: 28px;
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.rule-item-odd {
|
||||
background: linear-gradient(135deg, #e6f3ff 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.rule-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
color: #409eff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-content {
|
||||
/deep/ .el-descriptions {
|
||||
.el-descriptions-item__label {
|
||||
width: 120px;
|
||||
color: #606266;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.el-descriptions-item__content {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
font-size: 14px;
|
||||
padding: 0 12px;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
transform: translate(-50%);
|
||||
|
||||
// 响应式布局
|
||||
@media screen and (max-width: 768px) {
|
||||
.rule-container {
|
||||
padding: 10px;
|
||||
|
||||
.rule-card {
|
||||
.header {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.rule-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tooltip{
|
||||
width: 500px;
|
||||
font-size: 16px;
|
||||
color:white;
|
||||
}
|
||||
.el-tooltip:hover{
|
||||
color:black;
|
||||
}
|
||||
.el-tooltip:nth-child(1){
|
||||
margin-top:100px;
|
||||
}
|
||||
.el-tooltip:nth-child(n+2){
|
||||
margin-top:50px;
|
||||
margin-left:0px;
|
||||
}
|
||||
.el-tooltip:nth-child(odd){
|
||||
background-color: pink;
|
||||
}
|
||||
.el-tooltip:nth-child(even){
|
||||
background-color: rgb(49, 176, 213)
|
||||
}
|
||||
.content_tip {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user