fix: 优化页面
This commit is contained in:
Shu Guang
parent
420f8317af
commit
6a69f05269
53
package-lock.json
generated
53
package-lock.json
generated
@ -19,7 +19,7 @@
|
||||
"nanoid": "^4.0.0",
|
||||
"node-polyfill-webpack-plugin": "^2.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"swiper": "^3.4.2",
|
||||
"swiper": "^5.4.5",
|
||||
"vue": "^2.6.14",
|
||||
"vue-baberrage": "^3.2.4",
|
||||
"vue-json-excel": "^0.3.0",
|
||||
@ -5267,6 +5267,14 @@
|
||||
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/dom7": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
|
||||
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
|
||||
"dependencies": {
|
||||
"ssr-window": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/domain-browser": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-4.22.0.tgz",
|
||||
@ -10420,6 +10428,11 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ssr-window": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
|
||||
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
|
||||
},
|
||||
"node_modules/ssri": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
|
||||
@ -10624,11 +10637,20 @@
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-3.4.2.tgz",
|
||||
"integrity": "sha512-bXolyzBIawQRluQwFbN8DYpe6Q02bKJ2/h4JV+6dzN/WX8a8ZFPa+F0o8z7hEHSyh2NzKkTWaogaTZYVfgmKTw==",
|
||||
"version": "5.4.5",
|
||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
|
||||
"integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"dom7": "^2.1.5",
|
||||
"ssr-window": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/vladimirkharlampidi"
|
||||
}
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
@ -15539,6 +15561,14 @@
|
||||
"entities": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"dom7": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
|
||||
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
|
||||
"requires": {
|
||||
"ssr-window": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"domain-browser": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-4.22.0.tgz",
|
||||
@ -19146,6 +19176,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"ssr-window": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
|
||||
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
|
||||
},
|
||||
"ssri": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
|
||||
@ -19292,9 +19327,13 @@
|
||||
}
|
||||
},
|
||||
"swiper": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-3.4.2.tgz",
|
||||
"integrity": "sha512-bXolyzBIawQRluQwFbN8DYpe6Q02bKJ2/h4JV+6dzN/WX8a8ZFPa+F0o8z7hEHSyh2NzKkTWaogaTZYVfgmKTw=="
|
||||
"version": "5.4.5",
|
||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
|
||||
"integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
|
||||
"requires": {
|
||||
"dom7": "^2.1.5",
|
||||
"ssr-window": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"tapable": {
|
||||
"version": "2.2.1",
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
"nanoid": "^4.0.0",
|
||||
"node-polyfill-webpack-plugin": "^2.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"swiper": "^3.4.2",
|
||||
"swiper": "^5.4.5",
|
||||
"vue": "^2.6.14",
|
||||
"vue-baberrage": "^3.2.4",
|
||||
"vue-json-excel": "^0.3.0",
|
||||
|
||||
@ -1,88 +1,113 @@
|
||||
<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="" 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.user.cardName }}</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.user.cardName }}</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" :router="true" :collapse="isCollapse" :collapse-transition="false">
|
||||
<el-menu
|
||||
:default-active="activePath"
|
||||
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="true"
|
||||
unique-opened
|
||||
>
|
||||
<div class="menu-header">
|
||||
<i class="el-icon-reading menu-icon"></i>
|
||||
<span v-if="!isCollapse" class="menu-title">图书管理系统</span>
|
||||
</div>
|
||||
|
||||
<el-menu-item index="index" @click="saveNavState('index')">
|
||||
<i class="iconfont icon-shouyefill"></i>
|
||||
<span slo="title">首页</span>
|
||||
<i class="el-icon-s-home"></i>
|
||||
<span slot="title">首页</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="search" @click="saveNavState('search')">
|
||||
<i class="iconfont icon-sousuoxiao"></i>
|
||||
<i class="el-icon-search"></i>
|
||||
<span slot="title">图书查询</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="rule" @click="saveNavState('rule')">
|
||||
<i class="iconfont icon-guizeshezhi"></i>
|
||||
<i class="el-icon-s-order"></i>
|
||||
<span slot="title">读者规则</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="notice" @click="saveNavState('notice')">
|
||||
<i class="iconfont icon-gonggao1"></i>
|
||||
<i class="el-icon-bell"></i>
|
||||
<span slot="title">查看公告</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="information" @click="saveNavState('information')">
|
||||
<i class="iconfont icon-gerenxinxi"></i>
|
||||
|
||||
<el-menu-item
|
||||
index="information"
|
||||
@click="saveNavState('information')"
|
||||
>
|
||||
<i class="el-icon-user"></i>
|
||||
<span slot="title">个人信息</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="borrow" @click="saveNavState('borrow')">
|
||||
<i class="iconfont icon-tushuqikan"></i>
|
||||
<i class="el-icon-notebook-2"></i>
|
||||
<span slot="title">借阅信息</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="violation" @click="saveNavState('violation')">
|
||||
<i class="iconfont icon-weizhangchaxun"></i>
|
||||
<i class="el-icon-warning"></i>
|
||||
<span slot="title">违章信息</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item index="comment" @click="saveNavState('comment')">
|
||||
<i class="iconfont icon-liuyan"></i>
|
||||
<i class="el-icon-chat-line-round"></i>
|
||||
<span slot="title">读者留言</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="intelligent" @click="saveNavState('intelligent')">
|
||||
|
||||
<el-menu-item
|
||||
index="intelligent"
|
||||
@click="saveNavState('intelligent')"
|
||||
>
|
||||
<i class="el-icon-monitor"></i>
|
||||
<span slot="title">智能推荐</span>
|
||||
</el-menu-item>
|
||||
<!-- <el-menu-item index="chat" @click="saveNavState('chat')">-->
|
||||
<!-- <i class="el-icon-monitor"></i>-->
|
||||
<!-- <span slot="title">图书反馈</span>-->
|
||||
<!-- </el-menu-item>-->
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<!-- 右侧内容主体 -->
|
||||
<el-main>
|
||||
<!-- 路由占位符 -->
|
||||
<router-view></router-view>
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
<el-main>
|
||||
<router-view></router-view>
|
||||
<div class="footer"></div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -122,17 +147,16 @@ export default {
|
||||
this.user.userId = id;
|
||||
const { data: res } = await this.$http.post("user/getData", this.user);
|
||||
console.log(res);
|
||||
window.sessionStorage.setItem('cardNumber', res.data.cardNumber)
|
||||
window.sessionStorage.setItem("cardNumber", res.data.cardNumber);
|
||||
this.user = res.data;
|
||||
},
|
||||
async mounted() { },
|
||||
async mounted() {},
|
||||
methods: {
|
||||
logout() {
|
||||
window.sessionStorage.clear();
|
||||
this.$router.push("/login");
|
||||
},
|
||||
|
||||
|
||||
//点击按钮，切换菜单的折叠与展开
|
||||
toggleCollapse() {
|
||||
this.isCollapse = !this.isCollapse;
|
||||
@ -146,85 +170,205 @@ export default {
|
||||
},
|
||||
toGitee() {
|
||||
console.log(1123);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 40%;
|
||||
color: #ccc;
|
||||
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
>div {
|
||||
.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: #f5f5f5;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
margin: 4px 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: #e6f7ff !important;
|
||||
color: #1890ff !important;
|
||||
border-right: 3px solid #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
height: 32px;
|
||||
background: #002140;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
//设置文字之间的间距
|
||||
letter-spacing: 0.2em;
|
||||
line-height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
transition: all 0.3s;
|
||||
|
||||
.user {
|
||||
margin-right: 15px;
|
||||
color: #ccc;
|
||||
&:hover {
|
||||
background: #002849;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item:hover {
|
||||
background-color: rgb(51, 122, 183) !important;
|
||||
.el-main {
|
||||
padding: 20px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
// .el-menu-item{
|
||||
// color:rgb(135, 206, 235) !important;
|
||||
// }</style>
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,104 @@
|
||||
<template>
|
||||
<div class="index">
|
||||
<div class="welcome-section">
|
||||
<h1>欢迎使用图书推荐系统</h1>
|
||||
<p>发现知识的海洋，开启阅读之旅</p>
|
||||
</div>
|
||||
<swiperVue />
|
||||
<div class="feature-section">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="feature-card">
|
||||
<i class="el-icon-reading"></i>
|
||||
<h3>海量藏书</h3>
|
||||
<p>丰富的图书资源，满足您的阅读需求</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="feature-card">
|
||||
<i class="el-icon-search"></i>
|
||||
<h3>智能推荐</h3>
|
||||
<p>个性化的图书推荐，找到您喜欢的书籍</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="feature-card">
|
||||
<i class="el-icon-service"></i>
|
||||
<h3>便捷服务</h3>
|
||||
<p>简单的借阅流程，贴心的读者服务</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperVue from "../../components/Swiper/swiper.vue"
|
||||
import swiperVue from "../../components/Swiper/swiper.vue";
|
||||
export default {
|
||||
name: "index",
|
||||
components:{
|
||||
swiperVue
|
||||
components: {
|
||||
swiperVue,
|
||||
},
|
||||
created() {
|
||||
// const {data:res} = await this.$http.get('/user/test');
|
||||
// console.log(res);
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.index {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
|
||||
.welcome-section {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
margin-top: 40px;
|
||||
padding: 20px 0;
|
||||
|
||||
.feature-card {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 48px;
|
||||
color: #409eff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,10 @@
|
||||
<div class="login_box">
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar_box">
|
||||
<img src="../assets/images/dinosaur.jpg" alt="" />
|
||||
<img
|
||||
src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- 登录表单区域 -->
|
||||
<el-form
|
||||
|
||||
@ -1,53 +1,55 @@
|
||||
<template>
|
||||
<!--基础存放容器-->
|
||||
<div class="swiper-section">
|
||||
<div class="swiper-container">
|
||||
<!-- 需要进行轮播的部分 -->
|
||||
<div class="swiper-wrapper">
|
||||
<!-- 每个节点 -->
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
data-src="https://pic.yupi.icu/5563/202311091857319.jpg"
|
||||
src="https://pic.yupi.icu/5563/202311091902481.gif"
|
||||
alt="书籍1"
|
||||
class="swiper-lazy"
|
||||
/>
|
||||
<div
|
||||
class="swiper-slide"
|
||||
v-for="(item, index) in swiperItems"
|
||||
:key="index"
|
||||
>
|
||||
<div class="slide-content">
|
||||
<img :src="item.image" :alt="item.title" class="swiper-lazy" />
|
||||
<div class="slide-info">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
data-src="https://pic.yupi.icu/5563/202311091857306.jpg"
|
||||
src="https://pic.yupi.icu/5563/202311091902481.gif"
|
||||
alt="书籍2"
|
||||
class="swiper-lazy"
|
||||
/>
|
||||
<div class="swiper-lazy-preloader"></div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
data-src="https://pic.yupi.icu/5563/202311091857330.jpg"
|
||||
src="https://pic.yupi.icu/5563/202311091902481.gif"
|
||||
alt="书籍3"
|
||||
class="swiper-lazy"
|
||||
/>
|
||||
<div class="swiper-lazy-preloader"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--如果需要使用分页器-->
|
||||
<div class="swiper-pagination swiper-pagination-white"></div>
|
||||
|
||||
<!-- 如果需要使用前进后退按钮 -->
|
||||
<div class="swiper-button-prev swiper-button-white"></div>
|
||||
<div class="swiper-button-next swiper-button-white"></div>
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiper from "swiper";
|
||||
import Swiper from "swiper";
|
||||
import "swiper/css/swiper.css";
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
name: "SwiperComponent",
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
swiperItems: [
|
||||
{
|
||||
image: "https://pic.yupi.icu/5563/202311091857319.jpg",
|
||||
title: "精选图书推荐",
|
||||
description: "发现更多优质读物",
|
||||
},
|
||||
{
|
||||
image: "https://pic.yupi.icu/5563/202311091857306.jpg",
|
||||
title: "特色主题书单",
|
||||
description: "探索不同领域的知识",
|
||||
},
|
||||
{
|
||||
image: "https://pic.yupi.icu/5563/202311091857330.jpg",
|
||||
title: "新书速递",
|
||||
description: "第一时间了解新书资讯",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initSwiper();
|
||||
@ -55,44 +57,114 @@ export default {
|
||||
methods: {
|
||||
initSwiper() {
|
||||
new Swiper(".swiper-container", {
|
||||
//设置轮播的循环方式
|
||||
loop: true,
|
||||
|
||||
//设置自动播放间隔时间
|
||||
autoplay: 2000,
|
||||
|
||||
// 轮播效果,默认为平滑轮播
|
||||
effect: "slide",
|
||||
|
||||
//分页器
|
||||
pagination: ".swiper-pagination",
|
||||
|
||||
//前进后退按钮
|
||||
prevButton: ".swiper-button-prev",
|
||||
nextButton: ".swiper-button-next",
|
||||
|
||||
// 用户中断轮播后续播
|
||||
autoplayDisableOnInteraction: false,
|
||||
//懒加载
|
||||
lazyLoading: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
effect: "slide", // 改为滑动效果
|
||||
speed: 800,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../../../node_modules/swiper/dist/css/swiper.css";
|
||||
|
||||
.swiper-container {
|
||||
width: 1000px;
|
||||
height: 650px;
|
||||
margin-top: 40px;
|
||||
<style lang="less" scoped>
|
||||
.swiper-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #f5f7fa;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
.swiper-container {
|
||||
width: 1200px;
|
||||
height: 500px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
position: relative;
|
||||
|
||||
.slide-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.slide-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 30px;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
|
||||
color: #fff;
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
opacity: 0.7;
|
||||
|
||||
&-active {
|
||||
background: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-lazy-preloader {
|
||||
border-color: #409eff;
|
||||
}
|
||||
</style>
|
||||
@ -5,7 +5,7 @@ import router from './router'
|
||||
//引入element ui 组件库
|
||||
import './plugins/element.js'
|
||||
//引入粒子插件
|
||||
import VueParticles from 'vue-particles'
|
||||
// import VueParticles from 'vue-particles'
|
||||
//引入全局样式表
|
||||
import './assets/css/global.css'
|
||||
//引入图书管理系统的图标和字体库
|
||||
@ -32,7 +32,7 @@ Vue.prototype._ = _ //全局导入的挂载方式
|
||||
Vue.prototype.$echarts = echarts
|
||||
|
||||
//注册粒子插件
|
||||
Vue.use(VueParticles)
|
||||
// Vue.use(VueParticles)
|
||||
//main.js:
|
||||
import { vueBaberrage } from 'vue-baberrage'
|
||||
//使用弹幕插件
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user