From a7efb7d64225639c2eca1175b96c8d5b64b40c13 Mon Sep 17 00:00:00 2001
From: 康凯 <kangk26@foxmail.com>
Date: Thu, 27 Jan 2022 10:58:55 +0800
Subject: [PATCH] 修复：相关图片列表页面因屏幕长度太小造成排版混乱
---
src/views/scenery/detailImage.vue | 30 +++++++++++++++++++++++++++---
1 files changed, 27 insertions(+), 3 deletions(-)
diff --git a/src/views/scenery/detailImage.vue b/src/views/scenery/detailImage.vue
index a4986ef..7d609ab 100644
--- a/src/views/scenery/detailImage.vue
+++ b/src/views/scenery/detailImage.vue
@@ -6,6 +6,7 @@
<img :src="item.path"/>
</mt-swipe-item>
</mt-swipe>
+ <div class="swipe-tip">{{ swipeTip.current }}/{{ swipeTip.total }}</div>
</div>
<div class="content">
<mt-navbar v-model="navIndex">
@@ -45,12 +46,17 @@
path: "",
keyWord: "",
introduction: "",
+ },
+ swipeTip: {
+ current: 0,
+ total: 0
}
}
},
methods: {
ChangeImage: function (index) {
this.image = this.images.data[index];
+ this.swipeTip.current = index + 1;
},
},
created() {
@@ -59,6 +65,8 @@
Api_GetImageDetail(imageId, 1, objId, 999).then(res => {
this.images = res;
this.image = res.data[0];
+ this.swipeTip.current = 1;
+ this.swipeTip.total = res.data.length;
}, rej => {
alert(rej);
}).catch(err => {
@@ -79,6 +87,7 @@
.images {
width: 100%;
height: 31.5vh;
+ position: relative;
}
.images img {
@@ -97,12 +106,12 @@
padding-top: 1vh;
}
-.content > div{
+.content > div {
width: 90%;
margin-left: 5%;
}
-.content > .line{
+.content > .line {
width: 100%;
background: #F8F8F8;
margin-left: 0;
@@ -113,7 +122,7 @@
width: 100%;
}
-.mint-navbar /deep/ .mint-tab-item{
+.mint-navbar /deep/ .mint-tab-item {
display: flex;
flex-direction: column;
justify-content: center;
@@ -159,4 +168,19 @@
opacity: 1;
margin-top: 2vh;
}
+
+.swipe-tip {
+ width: 15vw;
+ position: absolute;
+ right: 5vw;
+ bottom: 2vh;
+
+ font-size: 1.5rem;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ line-height: 3.37rem;
+ color: #FFFFFF;
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: 100px
+}
</style>
--
Gitblit v1.9.3