前端代码布局模板

左侧侧边栏+中间内容+右侧边栏 代码模板

<el-main>
  <div class="wrapper">
    <el-row :gutter="20">
      <!-- 左侧占位 -->
      <el-col :sm="2" class="hidden-xs-only" style="opacity: 0;"></el-col>

      <!-- 左侧侧边栏 -->
      <el-col :xs="24" :sm="4" class="sidebar-left">
        <el-card class="left-sidebar">
          <div slot="header" class="sidebar-title">
            <span>左侧栏分类</span>
          </div>
          <div class="sidebar-content">
            <ul class="category-list">
              <li v-for="category in leftSidebarCategories" :key="category.id"
                  :class="{ active: category.id === activeCategoryId }"
                  @click="selectCategory(category)">
                {{ category.name }}
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <!-- 主内容区域 -->
      <el-col :xs="24" :sm="16" class="main-content">


        <!-- 主要的博客列表内容 -->
        <el-card style="background-color: rgba(255,255,255,0.9)" class="left-item">
          <!-- ...现有代码的主内容区域... -->
          <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">推荐</el-menu-item>
              <el-menu-item index="2">最新</el-menu-item>
            </el-menu>
          </el-header>
          <el-main>
            <!-- 遍历电影列表 -->
            <div
                class="entry"
                v-for="(a, index) in article"
                :key="a.id"
            >
              <!-- 使用 el-row 和 el-col 创建布局 -->
              <el-row :gutter="20">
                <!-- 左侧内容占16格 -->
                <el-col :span="18">
                  <div class="entry-content">
                    <div class="title">
                      <span>测试{{ a.title }}</span>
                    </div>
                    <div class="content" style="margin-bottom: 30px;margin-top: 30px; font-size: 18px; font-weight: inherit;white-space: pre-wrap">
                      <span>{{ a.summary }}</span>
                    </div>
                    <div class="author-info">
                      <!-- 作者名称 -->
                      <span class="name" style="max-width: 160px; font-size: 18px; font-weight: 400">{{ user.name }}</span>
                      <span class="fenge" style="margin :20px;line-height: 20px;">|</span>
                      <!-- 发布时间 -->
                      <span class="publis_time" style="max-width: 160px; font-size: 18px; font-weight: 400">{{ a.publishedAt }}</span>
                      <!-- 观看次数 -->
                      <span class="numwatch">
                        <img src="@/assets/images/eye.svg" alt="Watch Icon" class="icon-watch">{{ a.numwatch }}
                      </span>
                      <!-- 点赞次数 -->
                      <span class="numlike">
                        <img src="@/assets/images/like.svg" alt="Like Icon" class="icon-like">{{ a.numlike }}
                      </span>
                    </div>
                  </div>
                </el-col>
                <!-- 右侧图片占6格 -->
                <el-col :span="6">
                  <div class="image-gallery">
                    <!-- 假设每个电影对象包含一个图片URL -->
                    <img :src="a.url" :alt="a.title" class="card-img" @click="goToBlogDetail(a.id)">
                  </div>
                </el-col>
              </el-row>
              <!-- 在不是最后一个电影项时添加分隔线 -->
              <el-divider v-if="index < article.length - 1"></el-divider>
            </div>

          </el-main>
        </el-card>

      </el-col>

      <!-- 右侧侧边栏 -->
      <el-col :xs="24" :sm="4" class="sidebar-right">
        <el-card class="right-sidebar">
          <!-- 右侧栏内容，例如标签列表或推荐博客 -->
          <div class="sidebar-content">
            <!-- ...现有代码的右侧侧边栏内容... -->
          </div>
        </el-card>
      </el-col>
      </div>
    </el-main>

.sidebar-left .el-card, .sidebar-right .el-card {
  margin-bottom: 20px;
}

.wrapper {
  width: 60%; /* 设置为原宽度的80% */
  margin: 0 auto;
}

.category-list li {
  padding: 10px;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
}

.category-list li.active {
  background-color: #E4E7ED;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px; /* 与内容部分的间距 */
}

.content {
  margin-bottom: 16px; /* 与用户信息部分的间距 */
  /* 根据需要添加更多样式 */
}

.el-row {
  margin-bottom: 20px;
}

.entry-content {
  padding: 20px; /* 根据需要调整内边距 */
}

.image-gallery {
  text-align: center; /* 让图片水平居中 */
  padding: 20px; /* 根据需要调整内边距 */
  height: 220px;
}


.card-img {
  max-width: 100%;
  height: 80%;
  cursor: pointer; /* 鼠标悬停时显示手形光标 */
  transition: transform 0.3s ease; /* 平滑缩放效果 */
}

.card-img:hover {
  transform: scale(1.05); /* 鼠标悬停时图片放大 */
}

/*水平*/
.author-info {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 水平开始对齐 */


}

.publis_time,
.numwatch,
.numlike {
  white-space: nowrap; /* 防止文本换行 */
  margin-left: 10px; /* 为每个元素添加左边距，除了第一个 */
  max-width: 160px; /* 最大宽度限制 */
  font-weight: inherit;
  margin-right: 40px;
  font-size: 13px;
  line-height: 20px;

}
/* 选择除了第一个以外的所有 .numlike 元素 */
.name{
  max-width: 160px; /* 最大宽度限制 */
  font-size: 18px;
  font-weight: 400;
}

.content{
  margin-bottom: 30px;
  margin-top: 30px;
  font-size: 18px;
  font-weight: inherit;
  /* 移除 white-space: nowrap; 以允许自动换行 */
  /* 如果需要限制宽度并超出时显示省略号，可以使用以下属性 */
  max-width: 100%; /* 或者您希望限制的具体宽度 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
  word-wrap: break-word; /* 允许长单词换行 */
}
.icon-watch, .icon-like {
  width: 24px; /* 根据需要设置大小 */
  height: 24px;
  vertical-align: middle; /* 确保图像与文本垂直对齐 */
}