|
|
@@ -13,7 +13,7 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 人体模型 + 穴位标注 -->
|
|
|
- <scroll-view class="body-scroll" scroll-y :scroll-top="scrollTop" @scroll="onScroll" scroll-with-animation>
|
|
|
+ <scroll-view class="body-scroll" :scroll-y="!isLandscape" :show-scrollbar="false" :scroll-top="scrollTop" @scroll="onScroll" scroll-with-animation>
|
|
|
<view class="body-content">
|
|
|
<view class="body-wrapper">
|
|
|
<!-- 中线参考 -->
|
|
|
@@ -52,7 +52,7 @@
|
|
|
<view class="list-header">
|
|
|
<text class="list-title">穴位清单</text>
|
|
|
</view>
|
|
|
- <scroll-view class="list-scroll" scroll-y>
|
|
|
+ <scroll-view class="list-scroll" :scroll-y="!isLandscape" :show-scrollbar="false">
|
|
|
<view class="list-grid">
|
|
|
<view
|
|
|
v-for="(point, index) in acupointList"
|
|
|
@@ -159,6 +159,7 @@ import { getBackAcupoints } from '@/utils/api/acupoint.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ isLandscape: false,
|
|
|
statusBarHeight: 44,
|
|
|
loading: false,
|
|
|
acupointList: [],
|
|
|
@@ -218,9 +219,18 @@ export default {
|
|
|
onLoad() {
|
|
|
const sysInfo = uni.getSystemInfoSync()
|
|
|
this.statusBarHeight = sysInfo.statusBarHeight || 44
|
|
|
+ this.checkOrientation(sysInfo)
|
|
|
this.loadAcupoints()
|
|
|
},
|
|
|
+ onResize(res) {
|
|
|
+ this.checkOrientation(res.size || uni.getSystemInfoSync())
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ checkOrientation(size) {
|
|
|
+ if (size && size.windowWidth && size.windowHeight) {
|
|
|
+ this.isLandscape = size.windowWidth > size.windowHeight
|
|
|
+ }
|
|
|
+ },
|
|
|
goBack() {
|
|
|
uni.navigateBack()
|
|
|
},
|
|
|
@@ -382,10 +392,20 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+/* 隐藏滚动条 */
|
|
|
+::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ width: 0 !important;
|
|
|
+ height: 0 !important;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
.page {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
background: linear-gradient(to bottom, #389588, rgba(56,149,136,0.3) 40%, #F8F8F8 60%);
|
|
|
}
|
|
|
.status-bar {
|
|
|
@@ -514,6 +534,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.06);
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
.list-header {
|
|
|
display: flex;
|
|
|
@@ -529,13 +550,14 @@ export default {
|
|
|
.list-scroll {
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
- padding: 4px 8px 20px 8px;
|
|
|
}
|
|
|
.list-grid {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 10px;
|
|
|
+ padding: 4px 8px 20px 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
.list-item {
|
|
|
display: flex;
|
