Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
552ccf03 1 parent b75b8777

fix 细节调整

Inline Side-by-side
Showing 2 changed files with 18 additions and 15 deletions
1 /* 1 /*
2 * @Date: 2023-05-29 11:10:19 2 * @Date: 2023-05-29 11:10:19
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-20 17:29:12 4 + * @LastEditTime: 2024-09-20 17:54:57
5 * @FilePath: /map-demo/src/route.js 5 * @FilePath: /map-demo/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -64,7 +64,7 @@ export default [ ...@@ -64,7 +64,7 @@ export default [
64 }, 64 },
65 { 65 {
66 path: '/bieyuan/info', 66 path: '/bieyuan/info',
67 - component: () => import('@/views/bieyuan/info_w.vue'), 67 + component: () => import('@/views/bieyuan/info.vue'),
68 meta: { 68 meta: {
69 title: '详情页', 69 title: '详情页',
70 }, 70 },
......
1 <!-- 1 <!--
2 * @Date: 2024-09-15 22:08:49 2 * @Date: 2024-09-15 22:08:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-20 17:35:46 4 + * @LastEditTime: 2024-09-20 18:19:58
5 * @FilePath: /map-demo/src/views/bieyuan/info.vue 5 * @FilePath: /map-demo/src/views/bieyuan/info.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div class="info-page"> 9 <div class="info-page">
10 - <div> 10 + <div style="position: relative;">
11 <van-config-provider :theme-vars="themeVars"> 11 <van-config-provider :theme-vars="themeVars">
12 <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000"> 12 <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
13 <van-swipe-item v-for="image in images" :key="image"> 13 <van-swipe-item v-for="image in images" :key="image">
...@@ -15,7 +15,9 @@ ...@@ -15,7 +15,9 @@
15 </van-swipe-item> 15 </van-swipe-item>
16 </van-swipe> 16 </van-swipe>
17 </van-config-provider> 17 </van-config-provider>
18 + <div style="position: absolute; bottom: -13px; left: 0; right: 0; width: 100%; height: 1rem; box-shadow: rgba(241, 242, 248, 0.8) 0px -3px 20px 12px"></div>
18 </div> 19 </div>
20 + <div style=" position: absolute; top: 12.5rem;">
19 <div class="info-content-wrapper"> 21 <div class="info-content-wrapper">
20 <div class="info-header"> 22 <div class="info-header">
21 <div> 23 <div>
...@@ -73,14 +75,14 @@ ...@@ -73,14 +75,14 @@
73 </div> 75 </div>
74 <div class="van-hairline--bottom" style="margin: 0 1rem;"></div> 76 <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
75 </div> 77 </div>
76 - <!--<div class="audio-wrapper"> 78 + <div class="audio-wrapper">
77 <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index"> 79 <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
78 <div>{{ item.text }}</div> 80 <div>{{ item.text }}</div>
79 - <!~~ <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> ~~> 81 + <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
80 <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" /> 82 <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
81 <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" /> 83 <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
82 </div> 84 </div>
83 - </div>--> 85 + </div>
84 <div style="padding: 0 1rem;"> 86 <div style="padding: 0 1rem;">
85 <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;"> 87 <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
86 </div> 88 </div>
...@@ -97,6 +99,7 @@ ...@@ -97,6 +99,7 @@
97 /> 99 />
98 </div> 100 </div>
99 </div> 101 </div>
102 + </div>
100 </template> 103 </template>
101 104
102 <script setup> 105 <script setup>
...@@ -114,6 +117,7 @@ const $router = useRouter(); ...@@ -114,6 +117,7 @@ const $router = useRouter();
114 117
115 const themeVars = ref({ 118 const themeVars = ref({
116 swipeIndicatorInactiveBackground: '#fff', 119 swipeIndicatorInactiveBackground: '#fff',
120 + swipeIndicatorMargin: '1.5rem'
117 }); 121 });
118 122
119 const images = ref([ 123 const images = ref([
...@@ -150,8 +154,8 @@ const playAudio = (item, index) => { ...@@ -150,8 +154,8 @@ const playAudio = (item, index) => {
150 console.warn('success'); 154 console.warn('success');
151 item.play = true; 155 item.play = true;
152 // 存放到pinia里面控制 156 // 存放到pinia里面控制
153 - store.changeAudioSrc(audio.value.src); 157 + // store.changeAudioSrc(audio.value.src);
154 - store.changeAudioStatus('play'); 158 + // store.changeAudioStatus('play');
155 }).catch((e) => { 159 }).catch((e) => {
156 // 失败 160 // 失败
157 console.log('Operation is too fast, audio play fails') 161 console.log('Operation is too fast, audio play fails')
...@@ -174,10 +178,10 @@ onMounted(() => { ...@@ -174,10 +178,10 @@ onMounted(() => {
174 } 178 }
175 }) 179 })
176 180
177 -// onUnmounted(() => { 181 +onUnmounted(() => {
178 -// audio.value.pause(); 182 + audio.value.pause();
179 -// store.changeAudioStatus('pause'); 183 + store.changeAudioStatus('pause');
180 -// }) 184 +})
181 185
182 const audio_play = (src, index) => { 186 const audio_play = (src, index) => {
183 audio.value.src = src; 187 audio.value.src = src;
...@@ -233,8 +237,7 @@ defineExpose({ ...@@ -233,8 +237,7 @@ defineExpose({
233 overflow: scroll; 237 overflow: scroll;
234 position: relative; 238 position: relative;
235 .info-content-wrapper { 239 .info-content-wrapper {
236 - // position: absolute; 240 + box-shadow: 0px -3px 6px 0 rgba(241, 242, 248, 0.8);
237 - // top: 14.9rem;
238 margin: 1rem; 241 margin: 1rem;
239 margin-top: 0; 242 margin-top: 0;
240 // padding: 1rem; 243 // padding: 1rem;
......