前端小练--社区主页

Huterox2023-08-05 9:02

文章目录

前言

废话不多说，直接看到效果：

是的也许你已经发现了这个页面和某个网站长得贼像。没错是这样的，这个布局我确实看起来很舒服。当然这个只是我作为毕业设计的一部分。中文编程语言+对应社区平台才是我完整的毕设。

那么同样的，废话不多说，直接发车了。

首页

结构

首先的话，还是老规矩，先看到结构：

html 复制代码 
<template>
    <div class="body">
        <div class="left-affix">

            <div class="affix-item ribbon">
                Hlang解析<span>付费</span>
            </div>

            <div class="affix-item">
                Hlang文档
            </div>

            <div class="affix-item bottom_line">
                Hlang下载
            </div>
            
            <div class="affix-item">
                关注
            </div>

            <div class="affix-item">
                综合
            </div>

            <div class="affix-item">
                前端
            </div>

            <div class="affix-item">
                后端
            </div>

            <div class="affix-item">
                嵌入式
            </div>

            <div class="affix-item">
                人工智能
            </div>

        </div>

        <div class="main">
            <!-- 推荐榜单文章、专栏，作者 -->
            <div class="top-recommend">
                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-article.png">
                        <span class="top-reco-title-text">
                            推荐文章TOP3
                        </span>
                    </div>
        
                    <div class="top-reco-cent-item" v-for="(item, index) in top_articles" :key="item">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item
                            placement="bottom"
                            effect="light"
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                {{ item }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>

                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-clounm.png">
                        <span class="top-reco-title-text">
                            推荐专栏TOP3
                        </span>
                    </div>

                    <div class="top-reco-cent-item" v-for="(item, index) in top_columns" :key="item">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item
                            placement="bottom"
                            effect="light"
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                {{ item }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>

                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-people.png">
                        <span class="top-reco-title-text">
                            推荐作者TOP3
                        </span>
                    </div>

                    <div class="top-reco-cent-item" v-for="(item, index) in top_writers" :key="index">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item.name
                            placement="bottom"
                            effect="light"
                           
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                <img class="top-reco-title-img" :src="item.avatar">
                                &nbsp;
                                {{ item.name }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <!-- 推荐内容（文章，专栏，专栏分两类，系统专栏，用户自己创建的专栏） -->
            <div class="reco-body-content">

                <div class="body-content-nav">
                    <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">推荐</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/' }">最新</el-breadcrumb-item>
                    <el-breadcrumb-item>Hlang社区</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="reco-body-content-items">
                        <BlogItem></BlogItem>
                        <BlogItem></BlogItem>
                        <BlogItem></BlogItem>
                        <BlogItem></BlogItem>
                        <BlogItem></BlogItem>
                        <br>
                </div>
            </div>

        </div>
        <!-- 右边的侧边栏 -->
        <div class="right-affix">

            <div class="r-affix-it day">
                <div class="day-left">
                    <div class="day-left-top">
                        <span class="s-p-top">累计点亮</span>
                        &nbsp;
                        <span class="s-p-top-day">127天</span>
                    </div>
                        <span class="s-p-but">点亮在社区的每一天</span>
                </div>

                <div class="day-right">
                    <el-button type="primary" :icon="Check" circle />
                </div>
            </div>

            <!-- 广告走马灯 -->
            <div class="r-affix-it carousel">
    
                <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in affix_imgs" :key="item">
                <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
                    <div>
                        <img class="img-affix-r" :src="item">
                    </div>
                </el-carousel-item>
                </el-carousel>
            
            </div>



        </div>
    </div>
</template>

这次的话，结构看起来稍微复杂了一点，但是实际上的话，主体结构是很简单的；

只不过，里面各个小组件之间有不同的布局而已。

当然在这里，还封装了一个组件，也就是文章item的一个展示。

固定导航栏

ok,我们这里的话，主要看到的是左边的固定的导航栏，因为右边那个是一样的。左边这个还多了东西。

左侧导航item

首先我们先看到主体结构：

html 复制代码 
        <div class="left-affix">

            <div class="affix-item ribbon">
                Hlang解析<span>付费</span>
            </div>

            <div class="affix-item">
                Hlang文档
            </div>

            <div class="affix-item bottom_line">
                Hlang下载
            </div>
            
            <div class="affix-item">
                关注
            </div>

            <div class="affix-item">
                综合
            </div>

            <div class="affix-item">
                前端
            </div>

            <div class="affix-item">
                后端
            </div>

            <div class="affix-item">
                嵌入式
            </div>

            <div class="affix-item">
                人工智能
            </div>

        </div>

先看到这个对应的css

css 复制代码 
.left-affix{

    cursor: pointer;
    padding-top: 30px;
    position: fixed;
    top: 13.5%;
    left: 14.5%;
    border-radius: 10px;
    width: 120px;
    height: 500px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 10px;
}



.affix-item{

    /* font-family: Georgia; */
    font-weight: 600;
    display: flex;
    justify-items: center;
    align-items: center;
    width: 80%;
    height: 45px;
    text-align: center;
    font-size: 18px;
    color: rgb(75, 73, 73);
    border-radius: 10px;
    padding-left: 15px;
    /* border-bottom: thick double #32a1ce; */
    
}
.affix-item:hover{
    
    background-color: rgb(229, 232, 232);
    color: rgb(43, 115, 230);
}

这个的话就是flex竖直的主轴，然后居中，这个没啥。

item标志

然后的话，主要在这里要说明的是这个：

的一个实现。

没错，这个就是这个项目盈利的地方。软件都是开源的，但是解析是收费的。啥意思，其实就像有些开源项目一样，大体文档是免费的，但是详细文档，如何实现，设计是收费的，你可以选择看这个文档，也可以直接选择自己啃源码。当然这部分其实我是开源直接做gitpage上面，搞这个的，但是想着干脆做一套算了。重点是，文档会流出，防君子不防小人，但是这个在线的话，虽然也会，但是我让那些小人尽可能提高获取成本，难度。

这里的话主要是这个：

css 复制代码 
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F7E652 0%, #F7C94A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 15px; right: -13px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #F7C94A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F7C94A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #F7C94A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F7C94A;
}

来实现，这个效果。不过注意的是，这个是放在第一个栏的！

头部推荐

之后是头部的推荐实现，就是这个：

这个的话，比较简单，主要是调整比较麻烦：

html 复制代码 
<div class="top-recommend">
                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-article.png">
                        <span class="top-reco-title-text">
                            推荐文章TOP3
                        </span>
                    </div>
        
                    <div class="top-reco-cent-item" v-for="(item, index) in top_articles" :key="item">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item
                            placement="bottom"
                            effect="light"
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                {{ item }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>

                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-clounm.png">
                        <span class="top-reco-title-text">
                            推荐专栏TOP3
                        </span>
                    </div>

                    <div class="top-reco-cent-item" v-for="(item, index) in top_columns" :key="item">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item
                            placement="bottom"
                            effect="light"
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                {{ item }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>

                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-people.png">
                        <span class="top-reco-title-text">
                            推荐作者TOP3
                        </span>
                    </div>

                    <div class="top-reco-cent-item" v-for="(item, index) in top_writers" :key="index">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item.name
                            placement="bottom"
                            effect="light"
                           
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                <img class="top-reco-title-img" :src="item.avatar">
                                &nbsp;
                                {{ item.name }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>
            </div>

主体就是一个flex布局，就可以了：

css 复制代码 
.top-recommend{

    display: flex;
    align-items: center;
    justify-items: center;
    gap: 10px;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    background-color: white;
}

.top-reco-title{

    padding-top: 3px;
    display: flex;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 35px;
    border-bottom: thick double #32a1ce;
}

.top-reco-title-text{
    text-align: center;
    padding-left: 10px;
}

.top-reco-title-img{
    padding-left: 5px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: white;
}

文章展示ITEM实现

之后的话，就是，这个组件。

ToolTip

然后，这个组件的话有个点，就是这个：

这个东西的话，是基于element-plus的那个tooltip实现的。

html 复制代码 
                <el-tooltip placement="top" effect="light">
                    <template #content>
                        <div class="writer-info-show">
                            <div class="w-i-s-top">
                                <!-- 作者信息 -->
                                <div class="w-i-s-top-info">
                                    <!-- 头像 -->
                                    <img src="~@/assets/image/card1.png" class="w-i-s-t-info-avator">
                                    <div class="w-i-s-top-info-text">
                                        <div class="w-i-s-top-info-text-title overtext">
                                            Huterox
                                        </div>
                                        <div class="w-i-s-top-info-text-motto overtext">
                                            除非我不想赢，否则没人能让我输
                                        </div>
                                    </div>
                                </div>
                                <!-- 关注 -->
                                <div class="w-i-s-top-add">
                                    <el-button type="primary" round>关注</el-button>
                                </div>
                                
                            </div>
                            <div class="w-i-s-bottom">
                                <div class="w-i-s-bottom-item overtext">
                                    粉丝：60
                                </div>
                                <div class="w-i-s-bottom-item overtext">
                                    博文：350
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="m-l-t-item back_bule overtext">
                        Huterox
                    </div>
                </el-tooltip>

这个功能的话，用的应该是比较多的。不过在我这里的话，也就是这种item会用到，所以没有封装成新的组件，用的频率虽然高，但是和博文ITEM一起用。

完整实现

ok,说完了这些细节，我们来看到完整代码：

html 复制代码 
<template>
    <div class="main-item">
        <!-- 左边 -->
        <div class="main-left">
            <div class="main-left-top">
                <!-- 作者 -->
                <el-tooltip placement="top" effect="light">
                    <template #content>
                        <div class="writer-info-show">
                            <div class="w-i-s-top">
                                <!-- 作者信息 -->
                                <div class="w-i-s-top-info">
                                    <!-- 头像 -->
                                    <img src="~@/assets/image/card1.png" class="w-i-s-t-info-avator">
                                    <div class="w-i-s-top-info-text">
                                        <div class="w-i-s-top-info-text-title overtext">
                                            Huterox
                                        </div>
                                        <div class="w-i-s-top-info-text-motto overtext">
                                            除非我不想赢，否则没人能让我输
                                        </div>
                                    </div>
                                </div>
                                <!-- 关注 -->
                                <div class="w-i-s-top-add">
                                    <el-button type="primary" round>关注</el-button>
                                </div>
                                
                            </div>
                            <div class="w-i-s-bottom">
                                <div class="w-i-s-bottom-item overtext">
                                    粉丝：60
                                </div>
                                <div class="w-i-s-bottom-item overtext">
                                    博文：350
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="m-l-t-item back_bule overtext">
                        Huterox
                    </div>
                </el-tooltip>
                <!-- 日期 -->
                <div class="m-l-t-item gary overtext">
                    2023-8-4
                </div>
                <!-- 专栏 -->
                <div class="m-l-t-item back_bule gary overtext">
                    深度学习
                </div>
            </div>
            <div class="main-left-title overtext">
                手写目标检测框架
            </div>
            <div class="main-left-centent overtext gary">
                对yolo算法进行复现
            </div>
            <div class="main-left-bootom">
                <!-- 浏览量 -->
                <div class="m-l-b-item-i">
                    <img src="~@/assets/image/read.png" class="m-l-b-item-img">
                    <div class="m-l-b-text">123</div>
                </div>
                <!-- 点赞量 -->
                <div class="m-l-b-item-i">
                    <img src="~@/assets/image/good.png" class="m-l-b-item-img">
                    <div class="m-l-b-text">666</div>
                </div>
                <!-- 评论数 -->
                <div class="m-l-b-item-i">
                    <img src="~@/assets/image/comment.png" class="m-l-b-item-img">
                    <div class="m-l-b-text">123</div>
                </div>
                
            </div>
        </div>
        <!-- 右边图片 -->
        <div class="main-right">
            <img src="~@/assets/image/card1.png" class="main-right-img">
        </div>
        

    </div>
</template>

<script lang="ts" setup>
</script>

<style scoped>

.w-i-s-bottom{

    display: flex;
    align-items: center;
    justify-items: center;
    font-size: 15px;
}

.w-i-s-bottom-item{
    
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-items: center;
    width: 110px;
    height: 50px;
}

.w-i-s-top-add{
    width: 80px;
    margin: 5px auto;
}

.w-i-s-top-info-text-title{
    font-weight: 600;
    width: 170px;

}
.w-i-s-top-info-text-motto{
    color: #5f6061;
    width: 170px;
}
.w-i-s-top-info-text{

    margin-left: 5px;
    height: 100%;
    margin-top: 5px;
}
.w-i-s-t-info-avator{
    width: 50px;
    height: 50px;
    border-radius: 100%;
}
.w-i-s-top-info{
    display: flex;
    width: 100px;
}
.w-i-s-bottom{
    width: 100%;
    height: 50px;
}
.w-i-s-top{
    width: 100%;
    height: 100px;
    border-bottom: thick double #32a1ce;
}

.writer-info-show{
    width: 250px;
    height: 150px;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.m-l-b-text{
    display: flex;
    justify-items: center;
    align-items: center;
    font-size: 8px;
    color: #87898a;
}
.m-l-b-item-i{
    display: flex;
    width: 40px;
    
}
.m-l-b-item-img{
    height: 100%;
    width: 20px;
}

.main-right-img{
    height: 100px;
    width: 100%;
}

.main-right{
    display: flex;
    height: 100px;
    width: 20%;
}

.m-l-b-item{
    height: 100%;
    width: 60px;
}
.main-left-bootom{
    display: flex;
    justify-items: center;
    width: 100%;
    height: 15px;
    gap: 10px;
}

.main-left-centent{

    display: flex;
    justify-items: center;
    align-items: center;
    height: 30px;
    width: 100%;
    display: flex;
    justify-items: center;
    
}

.main-left-title{
    height: 25px;
    width: 100%;
    font-size: 20px;
    font-weight: bolder;
    display: flex;
    justify-items: center;
}

.m-l-t-item{

    display: flex;
    align-items: center;
    justify-items: center;
    padding-left: 3px;
    font-size: 8px;
    width: 60px;
    border-right: solid rgb(145, 142, 142);
}

.gary{
    color: rgb(135, 133, 133);
}

.back_bule:hover{
    color: rgb(17, 128, 239);
}

.main-left-top{
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-items: center;
    height: 15px;
    gap: 5px;
}

.main-left{
    gap: 2px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    width: 80%;
}
.overtext{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.main-item{

    padding: 3px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-items: center;
    height: 100px;
    border-bottom: thick double #32a1ce;

}
</style>

有一说一，这段时间学习数学，让我的耐心变得好了很多。因为有时候步骤就是这样繁琐，繁琐但是好歹有思路，能做。

首页完整实现

ok,那么接下来就是我们对应首页的全部实现了：

html 复制代码 
<template>
    <div class="body">
        <div class="left-affix">

            <div class="affix-item ribbon">
                Hlang解析<span>付费</span>
            </div>

            <div class="affix-item">
                Hlang文档
            </div>

            <div class="affix-item bottom_line">
                Hlang下载
            </div>
            
            <div class="affix-item">
                关注
            </div>

            <div class="affix-item">
                综合
            </div>

            <div class="affix-item">
                前端
            </div>

            <div class="affix-item">
                后端
            </div>

            <div class="affix-item">
                嵌入式
            </div>

            <div class="affix-item">
                人工智能
            </div>

        </div>

        <div class="main">
            <!-- 推荐榜单文章、专栏，作者 -->
            <div class="top-recommend">
                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-article.png">
                        <span class="top-reco-title-text">
                            推荐文章TOP3
                        </span>
                    </div>
        
                    <div class="top-reco-cent-item" v-for="(item, index) in top_articles" :key="item">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item
                            placement="bottom"
                            effect="light"
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                {{ item }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>

                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-clounm.png">
                        <span class="top-reco-title-text">
                            推荐专栏TOP3
                        </span>
                    </div>

                    <div class="top-reco-cent-item" v-for="(item, index) in top_columns" :key="item">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item
                            placement="bottom"
                            effect="light"
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                {{ item }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>

                <div class="top-reco-div">
                    <div class="top-reco-title">
                        <img class="top-reco-title-img" src="~@/assets/image/top-people.png">
                        <span class="top-reco-title-text">
                            推荐作者TOP3
                        </span>
                    </div>

                    <div class="top-reco-cent-item" v-for="(item, index) in top_writers" :key="index">
                        <div class="top-reco-cent-item-le" v-bind:style="top_colors[index]">
                            {{ index+1 }}
                        </div>
                        <el-tooltip
                            :content=item.name
                            placement="bottom"
                            effect="light"
                           
                        >
                            <top-reco-cent-item class="top-reco-cent-item-rg overtext">
                                <img class="top-reco-title-img" :src="item.avatar">
                                &nbsp;
                                {{ item.name }}
                            </top-reco-cent-item>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <!-- 推荐内容（文章，专栏，专栏分两类，系统专栏，用户自己创建的专栏） -->
            <div class="reco-body-content">

                <div class="body-content-nav">
                    <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">推荐</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/' }">最新</el-breadcrumb-item>
                    <el-breadcrumb-item>Hlang社区</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="reco-body-content-items">
                        <BlogItem></BlogItem>
                        <BlogItem></BlogItem>
                        <BlogItem></BlogItem>
                        <BlogItem></BlogItem>
                        <BlogItem></BlogItem>
                        <br>
                </div>
            </div>

        </div>
        <!-- 右边的侧边栏 -->
        <div class="right-affix">

            <div class="r-affix-it day">
                <div class="day-left">
                    <div class="day-left-top">
                        <span class="s-p-top">累计点亮</span>
                        &nbsp;
                        <span class="s-p-top-day">127天</span>
                    </div>
                        <span class="s-p-but">点亮在社区的每一天</span>
                </div>

                <div class="day-right">
                    <el-button type="primary" :icon="Check" circle />
                </div>
            </div>

            <!-- 广告走马灯 -->
            <div class="r-affix-it carousel">
    
                <el-carousel :interval="5000" arrow="always">
                <el-carousel-item v-for="item in affix_imgs" :key="item">
                <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
                    <div>
                        <img class="img-affix-r" :src="item">
                    </div>
                </el-carousel-item>
                </el-carousel>
            
            </div>



        </div>
    </div>
</template>

<script lang="ts" setup>
import {
  Check,
} from '@element-plus/icons-vue'

import BlogItem from '../components/BlogItem.vue'



const affix_imgs = [
    '../../src/assets/image/affix1.png',
    '../../src/assets/image/affix2.png',
    '../../src/assets/image/affix3.png',

];

const top_colors = [
    "color: rgb(228, 98, 98);",
    "color: rgb(255, 111, 0);",
    "color: rgb(255, 111, 0);"
]

const top_articles = [
    "TypeChat 入门指南",
    "慎重选择~~第四家公司刚刚开我，加入重新找工作大队！！！",
    "禁止别人调试自己的前端页面代码"
]

const top_columns = [
    "【Spring技术体系】技术研究院",
    "JS每日一算法",
    "人工智能周刊"
]

const top_writers = [
    {"avatar":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg","name":"Huterox1"},
    {"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png","name":"Huterox2"},
    {"avatar":"https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg","name":"Huterox3"},
]

</script>

<style scoped>


.reco-body-content-items{

    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 90%;
    gap: 10px;
    display: flex;

}

.bottom_line{
    border-bottom: thick double #32a1ce;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F7E652 0%, #F7C94A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 15px; right: -13px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #F7C94A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F7C94A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #F7C94A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F7C94A;
}


.body-content-nav{
    padding-top: 20px;
    padding-left: 20px;
    font-size: 30px;
    height: 50px;

}

.overtext{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.top-reco-cent-item-rg{

    
    cursor: pointer;
    display: flex;
    justify-items: center;
    align-items: center;
    height: 100%;
    width: 80%;
    color: rgb(114, 111, 111);
}
.top-reco-cent-item-rg:hover{
    color: #32a1ce;
}
.top-reco-cent-item-le{

    display: flex;
    justify-items: center;
    align-items: center;
    height: 100%;
    width: 15px;
    font-size: 15px;
    font-weight: 600;

}
.top-reco-cent-item{

    margin-top: 5px;
    display: flex;
    gap: 3px;
    height: 40px;
    width: 100%;


}

.top-reco-title-text{
    text-align: center;
    padding-left: 10px;
}

.top-reco-title-img{
    padding-left: 5px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: white;
}

.top-reco-title{

    padding-top: 3px;
    display: flex;
    justify-items: center;
    align-items: center;
    width: 100%;
    height: 35px;
    border-bottom: thick double #32a1ce;
}

.top-reco-div{

    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    border-radius: 10px;
    width: 30%;
    height: 96%;
    
    border-right: thick double #32a1ce;
    
}


.day-right{
    margin-left: 20px;
}

.carousel{
    border-radius: 10px;
    width: 100%;
    margin: 0 auto;
}

.img-affix-r{
    background-size: cover;
    height: 300px;
    width: 100%;
}

.day-left-top{
    padding-left: 20px;
    width: 150px;
}

.s-p-but{
    padding-left: 20px;
    margin-top: 10px;
    font-size: 12px;
    color: rgb(120, 122, 123);
}
.s-p-top-day{
    font-weight: bolder;
    font-size: 20px;
    color: rgba(4, 88, 244, 0.849);
}
.s-p-top{
    font-weight: bold;
    font-size: 15px;
}
.day{
    
    border-radius: 10px;
    display: flex;
    gap: 20px;
    height: 100px;
    align-items: center;
    justify-items: center;
}

.day:hover{
  margin-top: 2px;
  -webkit-box-shadow: 0px 0px 24px 6px rgb(64, 177, 252);
  -moz-box-shadow: 0px 0px 24px 6px rgb(47, 161, 237);
  box-shadow: 0px 0px 24px 6px rgb(53, 163, 235);
}

.r-affix-it{

    cursor: default;
    width: 100%;
    background-color: white;
}

.top-recommend{

    display: flex;
    align-items: center;
    justify-items: center;
    gap: 10px;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    background-color: white;
}

.reco-body-content{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-items: center;
    gap: 10px;
    width: 100%;
    /* height: 1300px; */
    border-radius: 10px;
    background-color: white;
}

.main{

    border-radius: 10px;
    width: 52%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}

.right-affix{

    gap: 30px;
    padding-top: 20px;
    position: fixed;
    top: 11.5%;
    right: 2.3%;
    border-radius: 10px;
    width: 320px;
    height: 500px;
    /* background-color: white; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
}


.affix-item{

    /* font-family: Georgia; */
    font-weight: 600;
    display: flex;
    justify-items: center;
    align-items: center;
    width: 80%;
    height: 45px;
    text-align: center;
    font-size: 18px;
    color: rgb(75, 73, 73);
    border-radius: 10px;
    padding-left: 15px;
    /* border-bottom: thick double #32a1ce; */
    
}
.affix-item:hover{
    
    background-color: rgb(229, 232, 232);
    color: rgb(43, 115, 230);
}

.left-affix{

    cursor: pointer;
    padding-top: 30px;
    position: fixed;
    top: 13.5%;
    left: 14.5%;
    border-radius: 10px;
    width: 120px;
    height: 500px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 10px;
}
.body{
    margin-top: 20px;
    width: 100%;
}
</style>
相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了，像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架：性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器：npm vs pnpm
前端·javascript·面试
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek RAGFlow构建本地知识库系统10Mac cursor设置jdk、Maven版本