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" @keyup.enter="pageChange(1)">
          <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"
            @click="pageChange(1)"
            >{{ Mylangue ? "搜索" : "Search" }}</el-button
          >
          <el-button size="small" @click="reset">{{
            Mylangue ? "重置" : "Reset"
          }}</el-button>
        </div>
        <!-- 没有数据 -->
        <div class="noneInfo" v-if="data.length === 0">
          <p>{{ Mylangue ? "暂无数据..." : "no data..." }}</p>
        </div>
        <!-- 内容 -->
        <div class="rowAll" v-else>
          <div
            @click="lookInfo(item)"
            class="row"
            :title="item.name"
            v-for="item in data"
            :key="item.id"
          >
            <img v-lazy="`/data/goods/${item.id}.jpg`" alt="" />
            <p>{{ item.name }}</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"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 点击之后出来的藏品信息 -->
    <div class="infoBox" v-if="infoShow">
      <!-- 查看图片 -->
      <viewer class="viewerCla" ref="viewer" :images="lookPics">
        <img :src="lookPics[0]" alt="" />
      </viewer>
      <div class="imgBox">
        <img
          v-lazy="`/data/goods/${goodInfo.id}.jpg`"
          alt=""
          @click="loogImg(goodInfo.id)"
        />
      </div>
      <div class="txtBox">
        <h3>{{ goodInfo.name }}</h3>
        <p v-html="goodInfo.txt"></p>
      </div>
      <!-- 关闭按钮 -->
      <i class="el-icon-close" @click="infoShow = false"></i>
    </div>
  </div>
</template>

<script>
import { qualityData, qualityDataEn } from "./quality.js";
export default {
  name: "qualityCom",
  components: {},
  data() {
    //这里存放数据
    return {
      input: "",
      formData: {
        pageNum: 1,
        pageSize: 8,
      },
      dataAll: [],
      data: [],
      total: 0,
      // 关于点击藏品出来的页面数据
      goodInfo: {},
      infoShow: false,
      lookPics: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击藏品里面的图片查看大图
    loogImg(id) {
      let dom = this.$refs.viewer.$viewer;
      this.lookPics = [`/data/goods/${id}.jpg`];
      dom.show();
    },
    // 点击藏品
    lookInfo(item) {
      this.goodInfo = item;
      this.infoShow = true;
    },
    // 点击重置
    reset() {
      this.input = "";
      this.pageChange(1);
    },
    // 分页器方法
    currentChange(val) {
      this.pageChange(val);
    },
    // 封装一个控制分页的方法
    pageChange(i) {
      let temp = this.dataAll.filter((v) => v.name.includes(this.input));
      this.total = temp.length;
      if (this.isMobile) this.data = [...temp];
      else this.data = temp.slice((i - 1) * 8, i * 8);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 控制分页器的英文版文字
    if (!this.Mylangue) {
      // 英文版
      this.dataAll = qualityDataEn;
      let dom = document.getElementsByClassName("el-pagination__jump");
      if (dom && dom[0]) {
        dom[0].childNodes[0].nodeValue = "Jump to";
        dom[0].childNodes[2].nodeValue = "page";
      }
    } else this.dataAll = qualityData;
    this.pageChange(1);
  },
  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, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  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;
      }
    }
    .noneInfo {
      margin-top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 30px;
      height: 420px;
    }
    .rowAll {
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      height: 420px;
      .row {
        cursor: pointer;
        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;
    }
  }
  .infoBox {
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    .viewerCla img {
      display: none;
    }
    .imgBox {
      padding-top: 20px;
      width: 100%;
      height: 70vh;
      display: flex;
      justify-content: center;
      align-items: center;
      & > img {
        cursor: pointer;
        max-width: 100%;
        max-height: 100%;
      }
    }
    .txtBox {
      padding-right: 15px;
      color: #fff;
      width: 80%;
      margin: 20px auto 0;
      padding-bottom: 20px;
      overflow-y: auto;
      height: calc(30vh - 20px);
      & > h3 {
        font-size: 20px;
        font-weight: 700;
      }
      & > p {
        line-height: 24px;
        margin-top: 10px;
        font-size: 16px;
      }
    }
    .el-icon-close {
      cursor: pointer;
      position: absolute;
      font-size: 30px;
      top: 30px;
      right: 30px;
      color: #fff;
    }
  }
}

@media only screen and (max-width: 800px) {
  .quality {
    .main {
      top: 60px;
      transform: translate(-50%, 0);
      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;
        }
      }
      .noneInfo {
        margin-top: 20px;
        height: calc(100% - 42px);
      }
      .rowAll {
        justify-content: center;
        margin-top: 20px;
        height: calc(100% - 42px);
        overflow-y: auto;
        .row {
          margin-right: 0;
          margin-bottom: 10px;
        }
      }
    }
    .infoBox {
      .imgBox{
        height: 60vh;
        padding-top: 35px;
      }
      .txtBox{
        height: calc(40vh - 20px);
      }
      .el-icon-close {
        right: 10px;
        top: 10px;
      }
    }
  }
}
</style>