|
|
@@ -30,6 +30,7 @@
|
|
|
<!-- 内容 -->
|
|
|
<div class="rowAll" v-else>
|
|
|
<div
|
|
|
+ @click="lookInfo(item)"
|
|
|
class="row"
|
|
|
:title="item.name"
|
|
|
v-for="item in data"
|
|
|
@@ -52,13 +53,33 @@
|
|
|
</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";
|
|
|
+import { qualityData, qualityDataEn } from "./quality.js";
|
|
|
export default {
|
|
|
- name: "quality",
|
|
|
+ name: "qualityCom",
|
|
|
components: {},
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
@@ -71,6 +92,10 @@ export default {
|
|
|
dataAll: [],
|
|
|
data: [],
|
|
|
total: 0,
|
|
|
+ // 关于点击藏品出来的页面数据
|
|
|
+ goodInfo: {},
|
|
|
+ infoShow: false,
|
|
|
+ lookPics: [],
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -79,6 +104,17 @@ export default {
|
|
|
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 = "";
|
|
|
@@ -130,7 +166,7 @@ export default {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- z-index: 9999;
|
|
|
+ z-index: 9998;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
.main {
|
|
|
@@ -236,6 +272,57 @@ export default {
|
|
|
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) {
|
|
|
@@ -279,6 +366,19 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .infoBox {
|
|
|
+ .imgBox{
|
|
|
+ height: 60vh;
|
|
|
+ padding-top: 35px;
|
|
|
+ }
|
|
|
+ .txtBox{
|
|
|
+ height: calc(40vh - 20px);
|
|
|
+ }
|
|
|
+ .el-icon-close {
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
