DaLiEH/web/src/views/gui/component/quality.vue

<template>
  <div class="quality">
    <div class="main">
      <div class="top">
        <h2>{{Mylangue?'精品典藏':'Collections'}}</h2>
        <i class="el-icon-close" @click="$emit('close')"></i>
      </div>
      <div class="conten">
        <div class="search">
          <el-input
            v-model="input"
            :placeholder="Mylangue?'请输入藏品名称...':'Enter title here'"
            suffix-icon="el-icon-search"
          ></el-input>
          <el-button type="primary" size="small" style="margin-left: 15px"
            >{{Mylangue?'搜索':'Search'}}</el-button
          >
          <el-button size="small">{{Mylangue?'重置':'Reset'}}</el-button>
        </div>
        <!-- 内容 -->
        <div class="rowAll">
          <div class="row" v-for="i in 8" :key="i">
            <img src="../../../assets/images/myModel.jpg" alt="" />
            <p>藏品名称</p>
          </div>
        </div>
        <!-- 分页 -->
        <div class="pagination" v-if="!isMobile">
          <el-pagination
            layout="prev,pager,next,jumper"
            :page-size="8"
            :current-page="formData.pageNum"
            @current-change="currentChange"
            @size-change="sizeChange"
            :total="50"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "quality",
  components: {},
  data() {
    //这里存放数据
    return {
      input: "",
      formData: {
        pageNum: 1,
        pageSize: 8,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 分页器方法
    currentChange(val) {
      // console.log('当前页改变了', val)
      this.formData.pageNum = val;
    },
    sizeChange(val) {
      // console.log('条数改变了', val)
      this.formData.pageNum = 1;
      this.formData.pageSize = val;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 控制分页器的英文版文字
    if(!this.Mylangue) {
      let dom = document.getElementsByClassName("el-pagination__jump")
      dom[0].childNodes[0].nodeValue = "Jump to";
      dom[0].childNodes[2].nodeValue = "page";
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
::-webkit-scrollbar-thumb {
  outline: 2px solid #165491;
}
.quality {
  background-color: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  .main {
    padding: 20px;
    padding-top: 100px;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 1100px;
    height: 800px;
    background: url("../../../assets/img/bg.png");
    background-size: 100% 100%;
  }
  .top {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #165491;
    font-weight: 700;
    font-size: 22px;
    & > i {
      cursor: pointer;
      font-size: 30px;
    }
  }
  .conten {
    padding: 30px 20px;
    border-radius: 3px;
    width: 100%;
    height: 610px;
    background-color: rgba(22, 84, 145, 0.5);
    .search {
      display: flex;
      width: 500px;
      margin: 0 auto;
      /deep/.el-input__icon {
        line-height: 30px;
        color: #165491;
        font-size: 18px;
      }
    }
    .rowAll {
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      .row {
        margin-right: 10px;
        margin-bottom: 20px;
        overflow: hidden;
        border-radius: 5px;
        background-color: #fff;
        width: 247px;
        height: 190px;
        & > img {
          width: 247px;
          height: 150px;
          object-fit: cover;
        }
        & > p {
          width: 95%;
          background: url("../../../assets/img/come.png") no-repeat right center;
          padding: 0 30px 0 10px;
          height: 40px;
          line-height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #999999;
          font-size: 16px;
        }
        &:nth-of-type(4n) {
          margin-right: 0;
        }
        &:hover {
          background-color: #165491;
          & > p {
            background: url("../../../assets/img/comeAc.png") no-repeat right
              center;
            color: #fff;
          }
        }
      }
    }
    .pagination {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

@media only screen and (max-width: 800px) {
  .quality {
    .main {
      max-height: 640px;
      width: 100%;
      max-width: 350px;
      height: calc(100vh - 150px);
      background: url("../../../assets/imgM/bg.png");
      background-size: 100% 100%;
      padding-top: 70px;
    }
    .top {
      margin-bottom: 5px;
    }
    .conten {
      height: calc(100% - 30px);
      padding: 10px;
      .search {
        width: 100%;
        button{
          width: 56px !important;
          padding: 5px 8px !important;
        }
      }
      .rowAll{
        justify-content: center;
        margin-top: 20px;
        height: calc(100% - 42px);
        overflow-y: auto;
        .row{
          margin-right: 0;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>