|
@@ -23,7 +23,7 @@
|
|
|
:key="item.id"
|
|
|
:class="`HD1_3 HD1_3_${index + 1} ${
|
|
|
pageLev === item.id ? 'HD1_3Ac' : ''
|
|
|
- } ${imgBottomLoc(pageLev,item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
|
|
|
+ } ${imgBottomLoc(pageLev, item.id)} ${pageShow ? 'HD1_3AcBottom' : ''}
|
|
|
`"
|
|
|
@click="ImgClick(item)"
|
|
|
>
|
|
@@ -46,9 +46,9 @@
|
|
|
|
|
|
<img
|
|
|
:src="
|
|
|
- require(`@/assets/images/HD1/img${
|
|
|
- pageShow ? '' : '_list'
|
|
|
- }_${item.imgName}.png`)
|
|
|
+ require(`@/assets/images/HD1/img${pageShow ? '' : '_list'}_${
|
|
|
+ item.imgName
|
|
|
+ }.png`)
|
|
|
"
|
|
|
alt=""
|
|
|
>
|
|
@@ -63,11 +63,6 @@
|
|
|
<p>{{ txtShow.desc }}</p>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 滑动限位提示语 -->
|
|
|
- <div :class="`HD1_5 ${txtTit ? 'HD1_5Show' : ''}`">
|
|
|
- 暂无更多内容
|
|
|
- </div>
|
|
|
-
|
|
|
<BtnBack
|
|
|
color="green"
|
|
|
@click="backBtnFu"
|
|
@@ -103,6 +98,21 @@ const imgList = [
|
|
|
},
|
|
|
]
|
|
|
|
|
|
+const imgListLocObj = {
|
|
|
+ 11: {
|
|
|
+ 12: "HD1_3HideRight",
|
|
|
+ 13: "HD1_3HideLeft",
|
|
|
+ },
|
|
|
+ 12: {
|
|
|
+ 13: "HD1_3HideRight",
|
|
|
+ 11: "HD1_3HideLeft",
|
|
|
+ },
|
|
|
+ 13: {
|
|
|
+ 11: "HD1_3HideRight",
|
|
|
+ 12: "HD1_3HideLeft",
|
|
|
+ },
|
|
|
+}
|
|
|
+
|
|
|
// 当前页面 层级
|
|
|
const pageLev = ref(1)
|
|
|
const pageShow = ref(false)
|
|
@@ -149,9 +159,6 @@ const ImgClick = (item) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 底部文字提示显示和隐藏
|
|
|
-const txtTit = ref(false)
|
|
|
-
|
|
|
const swChange = ref(true)
|
|
|
|
|
|
// 左滑右滑
|
|
@@ -162,18 +169,10 @@ const onSwipeChange = (num, index) => {
|
|
|
if (index === 0 && num === -1) {
|
|
|
// 第一 还向左滑
|
|
|
newItem = imgList[imgList.length - 1]
|
|
|
- // txtTit.value = true
|
|
|
- // setTimeout(() => {
|
|
|
- // txtTit.value = false
|
|
|
- // }, 1000)
|
|
|
// return
|
|
|
}
|
|
|
if (index === imgList.length - 1 && num === 1) {
|
|
|
newItem = imgList[0]
|
|
|
- // txtTit.value = true
|
|
|
- // setTimeout(() => {
|
|
|
- // txtTit.value = false
|
|
|
- // }, 1000)
|
|
|
// return
|
|
|
}
|
|
|
|
|
@@ -184,8 +183,6 @@ const onSwipeChange = (num, index) => {
|
|
|
}, 600)
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
pageLev.value = newItem.id
|
|
|
|
|
|
setTimeout(() => {
|
|
@@ -197,30 +194,14 @@ const onSwipeChange = (num, index) => {
|
|
|
}
|
|
|
|
|
|
// 判断画轴的位置 在 左边还是右边
|
|
|
-const imgBottomLoc = (nowId, itemId)=>{
|
|
|
- // nowId:当前id
|
|
|
+const imgBottomLoc = (nowId, itemId) => {
|
|
|
+ // nowId:当前选中的id
|
|
|
// itemId 11 12 13
|
|
|
// nowId 11的时候 itemId 12在右边 itemId 13在左边
|
|
|
// nowId 12的时候 itemId 11在左边 itemId 13在右边
|
|
|
// nowId 13的时候 itemId 11在右边 itemId 12在左边
|
|
|
- const obj = {
|
|
|
- 11: {
|
|
|
- 12: 'HD1_3HideRight',
|
|
|
- 13: 'HD1_3HideLeft'
|
|
|
- },
|
|
|
- 12: {
|
|
|
- 13: 'HD1_3HideRight',
|
|
|
- 11: 'HD1_3HideLeft'
|
|
|
- },
|
|
|
- 13: {
|
|
|
- 11: 'HD1_3HideRight',
|
|
|
- 12: 'HD1_3HideLeft'
|
|
|
- },
|
|
|
- }
|
|
|
- return pageShow.value ? obj[nowId][itemId] : ''
|
|
|
-
|
|
|
+ return pageShow.value ? imgListLocObj[nowId][itemId] : ""
|
|
|
}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
@@ -279,7 +260,7 @@ const imgBottomLoc = (nowId, itemId)=>{
|
|
|
.HD1_3 {
|
|
|
position: absolute;
|
|
|
z-index: 10;
|
|
|
- transition: all 1s;
|
|
|
+ transition: bottom 1s;
|
|
|
width: 100%;
|
|
|
& > img {
|
|
|
width: 100%;
|
|
@@ -303,6 +284,7 @@ const imgBottomLoc = (nowId, itemId)=>{
|
|
|
.HD1_3Ac {
|
|
|
bottom: -5px;
|
|
|
right: 0;
|
|
|
+ opacity: 1;
|
|
|
.HD1_3AcMove {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
@@ -317,14 +299,12 @@ const imgBottomLoc = (nowId, itemId)=>{
|
|
|
}
|
|
|
|
|
|
.HD1_3HideLeft {
|
|
|
- left: -100%;
|
|
|
- right: auto;
|
|
|
+ right: 100%;
|
|
|
bottom: -8%;
|
|
|
opacity: 0;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
.HD1_3HideRight {
|
|
|
- left: auto;
|
|
|
right: -100%;
|
|
|
bottom: -8%;
|
|
|
opacity: 0;
|
|
@@ -332,6 +312,7 @@ const imgBottomLoc = (nowId, itemId)=>{
|
|
|
}
|
|
|
.HD1_3AcBottom {
|
|
|
bottom: -50px;
|
|
|
+ transition: right 1s, opacity 0.8s;
|
|
|
}
|
|
|
|
|
|
.HD1_4 {
|
|
@@ -371,25 +352,6 @@ const imgBottomLoc = (nowId, itemId)=>{
|
|
|
opacity: 1;
|
|
|
top: 8%;
|
|
|
}
|
|
|
-
|
|
|
- .HD1_5 {
|
|
|
- position: absolute;
|
|
|
- bottom: 5%;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- z-index: 30;
|
|
|
- font-size: 12px;
|
|
|
- color: #92a47f;
|
|
|
- letter-spacing: 4px;
|
|
|
- opacity: 0;
|
|
|
- transition: opacity 0.5s;
|
|
|
- pointer-events: none;
|
|
|
- font-family: KingHwa_OldSong, KingHwa_OldSong;
|
|
|
- }
|
|
|
- .HD1_5Show {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
.hotspot-detail-2 {
|
|
|
background-image: url("../assets/images/HD1/bg_paper.jpg");
|