From 3b9d46eafa758de140ee042a3f6c704da55e039c Mon Sep 17 00:00:00 2001 From: leecr1215 Date: Fri, 9 Jun 2023 22:30:53 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=EA=B9=8C=EC=A7=80=20?= =?UTF-8?q?=EC=A1=B4=EC=9E=AC=ED=95=98=EB=8A=94=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20nav=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=A0=84?= =?UTF-8?q?=EC=B2=B4=20=EC=9D=BD=EB=8A=94=20=EB=B2=84=ED=8A=BC=20text=20?= =?UTF-8?q?=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor : css 수정 --- src/views/passenger/BusSearchView.vue | 2 +- src/views/passenger/KeyboardSearchView.vue | 28 ++++----- src/views/passenger/StationListView.vue | 61 ++++++++++++++------ src/views/passenger/StopBusListView.vue | 66 +++++++++++++++------- 4 files changed, 105 insertions(+), 52 deletions(-) diff --git a/src/views/passenger/BusSearchView.vue b/src/views/passenger/BusSearchView.vue index c38cf23..d28a6ff 100644 --- a/src/views/passenger/BusSearchView.vue +++ b/src/views/passenger/BusSearchView.vue @@ -40,7 +40,7 @@ }, setup() { // 읽어줄 전체 텍스트 - const wholeText = ref('버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 '); + const wholeText = ref('음성으로 버스 노선 검색. 버튼을 누른 후 검색어를 말해주세요. 음성 검색 버튼 '); const title = ref('버튼을 누른 후 검색어를 말해주세요'); const input = ref(''); diff --git a/src/views/passenger/KeyboardSearchView.vue b/src/views/passenger/KeyboardSearchView.vue index 78114ca..33a05f3 100644 --- a/src/views/passenger/KeyboardSearchView.vue +++ b/src/views/passenger/KeyboardSearchView.vue @@ -6,9 +6,9 @@

노 선

정류장

- + @@ -221,7 +221,7 @@ } .scroll { - max-height: 100vh; + max-height: 70vh; overflow: scroll; } diff --git a/src/views/passenger/StationListView.vue b/src/views/passenger/StationListView.vue index 1aa373c..16726b3 100644 --- a/src/views/passenger/StationListView.vue +++ b/src/views/passenger/StationListView.vue @@ -1,20 +1,24 @@ @@ -23,9 +27,11 @@ import axios from 'axios'; import {useRoute} from 'vue-router'; import router from '@/router'; + import NavComp from '@/components/NavComp.vue'; export default { name: 'testView', + components: {NavComp}, data() { return { bus_active: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false], @@ -40,6 +46,9 @@ const stops = ref({}); const title = ref({}); + // 읽을 전체 text + const wholeText = ref(''); + // 사용자 위치 확인 및 버스 경유하는 정류장 출력 const locationSuccess = pos => { userLat.value = pos.coords.latitude; @@ -56,6 +65,7 @@ stops.value = res.data.msgBody.itemList; console.log('stops: ', stops.value); title.value = stops.value[0].busRouteNm; + wholeText.value = `노선 ${title.value}의 탑승 가능 정류장 목록. 승차 예약 버튼`; }) .catch(err => console.log(err)); }; @@ -74,6 +84,7 @@ }; return { + wholeText, title, stops, ridingReserve, @@ -100,22 +111,36 @@ #ridingBtn { font-weight: 900; font-size: 32px; - padding: 58px 94px; background-color: #fff; border-radius: 20px; - margin-top: 5px; color: $primary; + height: 140px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 40px; + left: 50%; + width: calc(100% - 32px); + transform: translate(-50%, -40px); } #ridingActiveBtn { font-weight: 900; font-size: 32px; - padding: 58px 94px; background-color: #ff5f63; border-radius: 20px; - margin-top: 5px; color: #fff; cursor: pointer; + height: 140px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 40px; + left: 50%; + width: calc(100% - 32px); + transform: translate(-50%, -40px); } #route_container { @@ -139,8 +164,8 @@ h1 { font-size: 30px; line-height: 36.6px; - margin-top: 97px; - margin-bottom: 35px; + margin-top: 40px; + margin-bottom: 40px; font-weight: 700; color: $secondary; } diff --git a/src/views/passenger/StopBusListView.vue b/src/views/passenger/StopBusListView.vue index 27b79fc..3cdd0c5 100644 --- a/src/views/passenger/StopBusListView.vue +++ b/src/views/passenger/StopBusListView.vue @@ -1,26 +1,29 @@ @@ -29,9 +32,11 @@ import {ref} from 'vue'; import {useRoute} from 'vue-router'; import router from '@/router'; + import NavComp from '@/components/NavComp.vue'; export default { name: 'StopBusList', + components: {NavComp}, data() { return { bus_active: [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false], @@ -54,6 +59,7 @@ 0: 'public', // 공용 }; + const title = ref(''); const arsId = route.params.arsId; const stId = route.params.stId; @@ -99,6 +105,9 @@ const getPrevData = async (ord, routeId, idx) => { const url = `http://ws.bus.go.kr/api/rest/arrive/getArrInfoByRoute?serviceKey=${process.env.VUE_APP_ROUTE_SERVICE_KEY}&busRouteId=${routeId}&ord=${ord}&stId=${stId}&resultType=json`; const data = await axios.get(url); + const res = await data.data; + console.log('res', res); + title.value = data.data.msgBody.itemList[0].stNm; return data.data.msgBody.itemList[0].arrmsg1; }; @@ -109,10 +118,15 @@ }); }; + // 읽어줄 전체 text + const wholeText = `${title.value}에서 탑승 가능한 버스 노선 목록. 승차 예약 버튼`; + return { + title, buses, busType, ridingReserve, + wholeText, }; }, methods: { @@ -136,22 +150,36 @@ #ridingBtn { font-weight: 900; font-size: 32px; - padding: 58px 94px; background-color: #fff; border-radius: 20px; - margin-top: 5px; color: $primary; + height: 140px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 40px; + left: 50%; + width: calc(100% - 32px); + transform: translate(-50%, -40px); } #ridingActiveBtn { font-weight: 900; font-size: 32px; - padding: 58px 94px; background-color: #ff5f63; border-radius: 20px; - margin-top: 5px; color: #fff; cursor: pointer; + height: 140px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 40px; + left: 50%; + width: calc(100% - 32px); + transform: translate(-50%, -40px); } #route_container { @@ -175,8 +203,8 @@ h1 { font-size: 30px; line-height: 36.6px; - margin-top: 97px; - margin-bottom: 35px; + margin-top: 40px; + margin-bottom: 40px; font-weight: 700; color: $secondary; }