记录毕业设计前后端搭建

理解归理解

已于 2024-05-13 15:33:41 修改

阅读量215

点赞数 1

分类专栏： vue 文章标签：课程设计

于 2023-04-14 11:29:44 首次发布

本文链接：https://blog.csdn.net/qq_61398236/article/details/130148257

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文记录了一位后端程序员在前端实现的创新，包括自封装导航栏并添加鼠标移动动画效果，以及相册瀑布流布局和文字hover偏移的实现。此外，还提到了使用MavonEditor创建文章编辑界面，并且系统图片存储采用七牛云服务。

摘要由CSDN通过智能技术生成

项目部署地址：徐闫东

本篇记录上一篇登录后进入系统的一些想法与实现方案，先上UI图

导航栏本来是想用elementUI现成的menu组件的，但是因为技术太菜没办法把导航调到右边去于是。。。。。。自己封装了一个导航栏，封装的就不放出来了，记录下导航栏随鼠标移动实现动画的效果

<div class="tItem" @click="goHome">
    <div class="tab-item"><i class="el-icon-s-home"></i>首页</div>
</div>


.tItem::before {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #00a9fe;
  transition: all .3s linear;
}

.tItem:hover::before {
  left: 0;
  width: 100%
}

.tItem {
  position: relative;
  float: left;
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
}

记录一下作为一个后端程序员比较得意的前端页面！！！

页面采用了多个动画效果以及对相册内的瀑布流布局，可能代码写的比较低级，但是实现效果还不错，记录下实现思路。

首先是相册处两处从不同方向通过hover实现偏移的效果，思路很简单首先将横杠和文字偏移出div框，然后将overflow设置为hidden,然后hover时偏移进div展示，设置动画时间，实现文字横线位移的效果，代码如下：

 <div style="margin: 5px" class="title_name">{{item.type_name}}</div>//名字
 <div style="margin: 5px" class="title_dec">{{item.type_dec}}</div> //描述

.title_dec{//初始设置偏移
        opacity: 0;
        transition: opacity .35s,transform .35s;
        transform: translate3d(100%,0,0);
        font-size: 15px;
        padding: 0.4rem 0 0;
    }
.empty:hover .title_dec{//偏移回去
        opacity: 1;
        transform: translate3d(0,0,0);
    }
.title_name:after{//标题下的横线使用伪元素
        position: absolute;
        bottom: 50%;
        left: 0;
        width: 95%;
        height: 2px;
        background: #eaeaea;
        content: "";
        transition: transform .35s;
        transform: translate3d(-100%,0,0);
    }
 .empty:hover .title_name:after{
        transform: translateZ(0);
    }

瀑布流布局代码：

<div class="albumsLists">
            <div class="album" v-for="item in albumList" :key="item.album_path">
                    <el-image
                            :src="item.album_path"
                            :preview-src-list="previewList">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
            </div>
        </div>



    .albumsLists{
        position: relative;
        min-height: 146px;
        width: 80%;
         column-count: 4;/*设置每一行最多四列*/
        column-gap: 5px;/*相当于每一个div之间的margin*/
        margin: auto;
        counter-reset: items;
    }
 .album{
        padding: 2px;
        position: relative;/*设置为相对定位*/
        border-radius: 4px;
    }
    .album img{
        display: block;/*块级元素*/
        width: 100%;
        height: auto;
    }

/*下面是通过伪元素实现图片上的数字递增以及蒙层效果*/
    .album::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 99%;
        display: flex;
        align-items: center;
        justify-content: center;
        counter-increment: items;
        content: counter(items);
        font-size: 15px;
        color: #cccccc;
        font-weight: bolder;
        background-color: rgba(0,0,0,0.3);
        transition: color 0.3s ease,background-color 0.3s ease;
        pointer-events:none;
        border-radius: 4px;
    }
    .album:hover::after{
        color: transparent;
        background-color: rgba(0,0,0,0.1);
    }