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> <template>
<div class="container"> <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> <template #right>
<van-icon name="search" size="18" /> <van-icon name="ellipsis" size="18" />
</template> </template>
</van-nav-bar> </van-nav-bar>
@@ -41,24 +41,15 @@
</van-cell-group> </van-cell-group>
<!-- 底部功能性按钮 --> <!-- 底部功能性按钮 -->
<div <div class="survey-action">
style=" <div class="survey-action_setting">
position: fixed; <van-icon name="setting" size="18" />
bottom: 0; <span>设置</span>
display: flex; </div>
flex-direction: row; <div class="survey-action_btn">
align-items: center; <van-button size="small">预览</van-button>
justify-content: space-around; <van-button size="small">保存</van-button>
width: 100%; <van-button size="small" @click="$router.push({ name: 'publish' })">投放</van-button>
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> </div>
</div> </div>
</div> </div>
@@ -66,7 +57,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const surveyTitle = route.meta.title as string;
const show = ref(false); const show = ref(false);
const quesList = ref([ const quesList = ref([
@@ -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> </style>

View File

@@ -1,18 +1,13 @@
<template> <template>
<div class="container"> <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-arrow @click-left="$router.go(-1)" />
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
<van-cell-group inset style="margin-top: 20px; padding: 30px"> <van-cell-group inset style="margin-top: 20px; padding: 30px">
<div> <div>
<img <img width="100%"
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" 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>
<div class="qrcode"> <div class="qrcode">
<img src="" alt="" width="100px" height="100px" /> <img src="" alt="" width="100px" height="100px" />
@@ -24,18 +19,15 @@
<div>移动端仅做数据回收问卷数据分析请前往PC端浏览</div> <div>移动端仅做数据回收问卷数据分析请前往PC端浏览</div>
<div class="operation"> <div class="operation">
<span v-for="item in 2" :key="item"> <span v-for="item in 2" :key="item">
<img <img width="30px"
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" />
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> </span>
</div> </div>
</van-cell-group> </van-cell-group>
<!-- 底部功能性按钮 --> <!-- 底部功能性按钮 -->
<div <div style="
style="
position: fixed; position: fixed;
bottom: 0; bottom: 0;
display: flex; display: flex;
@@ -45,14 +37,17 @@
width: 100%; width: 100%;
height: 50px; height: 50px;
background-color: white; background-color: white;
" ">
>
<van-button block>取消</van-button>
</div> </div>
</div> </div>
</template> </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"> <style scoped lang="scss">
.container { .container {