fix: 修复进入路由时报错的问题

- 样式重新迁移组内更改
This commit is contained in:
Huangzhe
2025-03-07 15:35:37 +08:00
parent 111de7665b
commit d4767843d2
2 changed files with 57 additions and 41 deletions

View File

@@ -1,8 +1,8 @@
<template>
<div class="container">
<van-nav-bar :title="($route.meta.title) as string" left-text="" left-arrow @click-left="$router.go(-1)">
<van-nav-bar :title="surveyTitle" left-text="" left-arrow @click-left="$router.go(-1)">
<template #right>
<van-icon name="search" size="18" />
<van-icon name="ellipsis" size="18" />
</template>
</van-nav-bar>
@@ -41,24 +41,15 @@
</van-cell-group>
<!-- 底部功能性按钮 -->
<div
style="
position: fixed;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 100%;
height: 50px;
background-color: white;
"
>
<div>设置</div>
<div style="display: flex; flex-direction: row; justify-content: space-around; width: 60%">
<button size="small">预览</button>
<button size="small">保存</button>
<button size="small" @click="$router.push('/publish')">投放</button>
<div class="survey-action">
<div class="survey-action_setting">
<van-icon name="setting" size="18" />
<span>设置</span>
</div>
<div class="survey-action_btn">
<van-button size="small">预览</van-button>
<van-button size="small">保存</van-button>
<van-button size="small" @click="$router.push({ name: 'publish' })">投放</van-button>
</div>
</div>
</div>
@@ -66,7 +57,10 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const surveyTitle = route.meta.title as string;
const show = ref(false);
const quesList = ref([
@@ -151,13 +145,13 @@ defineExpose({ init });
margin: 10px 5px;
padding: 5px;
& > div {
&>div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
& > button {
&>button {
margin: 20px;
border-radius: 10px;
background-color: lightgreen;
@@ -196,4 +190,31 @@ defineExpose({ init });
}
}
}
.survey-action {
position: fixed;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
width: 100%;
height: 50px;
background-color: white;
.survey-action_setting {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 10%;
}
.survey-action_btn {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 60%;
}
}
</style>

View File

@@ -1,18 +1,13 @@
<template>
<div class="container">
<van-nav-bar :title="($route.meta.title) as string" left-text="" left-arrow @click-left="$router.go(-1)">
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
<van-nav-bar :title="surveyTitle" left-arrow @click-left="$router.go(-1)" />
<van-cell-group inset style="margin-top: 20px; padding: 30px">
<div>
<img
width="100%"
<img width="100%"
src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u14.jpg?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333"
alt=""
/>
alt="" />
</div>
<div class="qrcode">
<img src="" alt="" width="100px" height="100px" />
@@ -24,18 +19,15 @@
<div>移动端仅做数据回收问卷数据分析请前往PC端浏览</div>
<div class="operation">
<span v-for="item in 2" :key="item">
<img
width="30px"
src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u21.png?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333"
/>
<img width="30px"
src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u21.png?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333" />
复制链接
</span>
</div>
</van-cell-group>
<!-- 底部功能性按钮 -->
<div
style="
<div style="
position: fixed;
bottom: 0;
display: flex;
@@ -45,14 +37,17 @@
width: 100%;
height: 50px;
background-color: white;
"
>
<van-button block>取消</van-button>
">
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
const surveyTitle = route.meta.title as string;
</script>
<style scoped lang="scss">
.container {