Seven_teams/web/src/views/tab4/index.vue

<template>
  <div class="tab4">
    <!-- 顶部 -->
    <div class="left">
      <ul>
        <li
          :class="{ active: formData.type === item.type }"
          v-for="item in listData"
          :key="item.id"
          @click="cutTab(item)"
        >
          <p v-if="formData.type === item.type">
            ◆&emsp;{{ item.name }}&emsp;◆
          </p>
          <p v-else>{{ item.name }}</p>
          <span> {{ item.biaoshi }} </span>
        </li>
      </ul>
      <div class="search" @keyup.enter="mySearch">
        <el-input
          placeholder="请输入关键词..."
          suffix-icon="el-icon-search"
          v-model="formData.searchKey"
        >
        </el-input>
        <span class="btn" @click="mySearch"></span>
      </div>
    </div>
    <!-- 下部内容 -->
    <div class="conten">
      <!-- 文章列表 -->
      <div class="conBox" v-show="cutShow">
        <div class="row" v-for="i in 7" :key="i" @click="cutPage(i)">
          <div class="row_left">
            <div>04</div>
            <span>2021-01</span>
          </div>
          <div class="row_right">
            <h1>社会主义革命和建设时期</h1>
            <p>
              队官兵积极投身社会主义革命和建设，全面履行保卫祖国、保卫人民和平劳动的职能。这一时期，涌现出了打出国威军威的抗美援朝“大功连”，守卫北京天安门展示中国军人良好形象的“天安门前好五连”等多个先进集体，为新生人民政权提供了坚强后盾新生人民政权提供了坚强后盾新生人民政权提供了坚强后盾新生人民政权提供了坚强后盾新生人民政权提供了坚强后盾。
            </p>
          </div>
        </div>
      </div>
      <!-- 文章详情 -->
      <div class="conBox conBox2" v-show="!cutShow">
        <span class="el-icon-arrow-left" @click="cutShow = true"
          >返回教育<span>基地</span></span
        >
        <h1 class="title">国宾护卫中队</h1>
        <!-- 中间简介 -->
        <div class="box2_jc">
          <div>
            <img src="../../assets/img/tab4box1.png" alt="" />
            <span>北京武警执勤第七支队</span>
          </div>
          <div>
            <img src="../../assets/img/tab4box2.png" alt="" />
            <span>刘芳/武翀</span>
          </div>
          <div>
            <img src="../../assets/img/tab4box3.png" alt="" />
            <span>2021-11-05</span>
          </div>
        </div>
        <!-- 详情 -->
        <div class="box2_conten">
          <p v-for="i in 30" :key="i">
            2014年10月21日，重组后的国宾护卫队开始执行第一次护卫任务。2014年10月21日，重组后的国宾护卫队开始执行第一次护卫任务。2014年10月21日，重组后的国宾护卫队开始执行第一次护卫任务。2014年10月21日，重组后的国宾护卫队开始执行第一次护卫任务。2014年10月21日，重组后的国宾护卫队开始执行第一次护卫任务。2014年10月21日，重组后的国宾护卫队开始执行第一次护卫任务。2014年10月21日，重组后的国宾护卫队开始执行第一次护卫任务。2014年10月21日，重组后的国宾护卫队开始执行第一次护卫任务。
          </p>
        </div>
      </div>
    </div>
    <!-- 加载更多 -->
    <div class="moreDin" v-show="cutShow">
      <i class="el-icon-d-arrow-right"></i>
      <span>加载更多</span>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      cutShow: true,
      listData: [
        { biaoshi: "/", id: 1, name: "知识阅览", type: "model" },
        { biaoshi: "", id: 2, name: "知识共享", type: "video" },
      ],
      formData: {
        pageNum: 1,
        pageSize: 8,
        searchKey: "",
        type: "model",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击文章查看详情
    cutPage() {
      this.cutShow = false;
    },
    mySearch() {},
    cutTab(val) {
      if (this.formData.type === val.type) return;
      this.formData.pageNum = 1;
      this.formData.type = val.type;
      // this.goodList(this.formData);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.tab4 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #3e3e3e;
  .left {
    position: relative;
    width: 100%;
    height: 200px;
    background: url("../../assets/img/tab4Tab.png");
    background-size: 100% 100%;
    ul {
      padding-left: 35px;
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      li {
        display: flex;
        justify-content: center;
        font-size: 20px;
        color: #fff;
        width: 240px;
        cursor: pointer;
        &:hover {
          color: #f2cd83;
        }
        & > span {
          margin-left: 50px;
          color: #fff !important;
        }
        & > p {
          text-align: center;
          width: 145px;
        }
      }
      .active {
        color: #f2cd83;
      }
    }
    .search {
      z-index: 10;
      /*修改提示文字的颜色*/
      /deep/input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #be1220;
      }
      /deep/input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #be1220;
      }
      /deep/input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #be1220;
      }
      /deep/input:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #be1220;
      }

      width: 700px;
      height: 50px;
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      /deep/.el-input__suffix {
        width: 50px;
        height: 50px;
        font-size: 20px;
        right: 0;
      }
      /deep/.el-input__inner {
        border-radius: 50px;
        height: 50px;
        border: 1px solid #be1220;
      }
      .btn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: transparent;
      }
    }
  }
  .conten {
    padding: 50px 220px 0px 250px;
    flex: 1;
    background: url("../../assets/img/tabBg.png");
    background-size: 100% 100%;
    .conBox {
      max-height: 510px;
      overflow-y: auto;
      padding-right: 30px;
      width: 100%;
      .row {
        cursor: pointer;
        color: #fff;
        display: flex;
        height: 170px;
        background-color: rgba(158, 102, 107, 0.5);
        &:nth-of-type(3n + 2) {
          background-color: rgba(227, 200, 187, 0.3);
          color: #9e666b;
        }
        &:nth-of-type(3n + 3) {
          background-color: rgba(158, 102, 107, 0.2);
          color: #9e666b;
        }
        .row_left {
          padding-top: 20px;
          width: 210px;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          & > div {
            font-weight: 700;
            font-size: 70px;
          }
          & > span {
            font-size: 26px;
          }
        }
        .row_right {
          flex: 1;
          padding: 30px;
          & > h1 {
            font-size: 30px;
            margin-bottom: 20px;
          }
          & > p {
            font-size: 20px;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal !important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
    .conBox2 {
      position: relative;
      overflow-y: visible;
      /deep/.el-icon-arrow-left {
        font-size: 20px;
        line-height: 40px;
        cursor: pointer;
        color: #be1220;
        position: absolute;
        left: 0;
        top: 0;
        & > span {
          font-size: 21px;
        }
      }
      .title {
        font-size: 30px;
        font-weight: 700;
        text-align: center;
      }
      .box2_jc {
        margin: 24px 0;
        display: flex;
        justify-content: center;
        & > div {
          display: flex;
          align-items: center;
          color: #9c9c9c;
          margin-right: 120px;
          & > img {
            width: 20px;
            height: 20px;
          }
          & > span {
            margin-left: 5px;
            font-size: 16px;
          }
        }
      }
      .box2_conten {
        font-size: 18px;
        line-height: 30px;
        color: #626260;
        padding-right: 40px;
        height: 430px;
        overflow-y: auto;
      }
    }
  }
  .moreDin {
    cursor: pointer;
    color: #bb111f;
    font-size: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    & > i {
      margin-right: 10px;
      transform: rotate(90deg);
    }
  }
}
</style>