hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactore: 首页界面调整

Browse Source 
- 内容布局优化
- 路由结构调整
This commit is contained in:
Huangzhe
2025-03-04 15:12:53 +08:00
parent 1c6c0867fb
commit dd33757681
6 changed files with 146 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/layouts/index.vue
View File

@@ -1,15 +1,53 @@
<template>
<div class="common-layout">
<!-- title 标题和搜索栏 -->
<header class="header">
<div class="title">{{ $route.meta.title }}</div>
<van-search placeholder="请输入搜索关键词" background="#B9F8CF" />
</header>
<!-- content -->
<RouterView />
<!-- tabbar -->
<van-tabbar v-model="active">
<van-tabbar-item v-for="tab in table" :key="tab.title" :name="tab.title" :to="tab.path">
<span>{{ tab.title }}</span>
<!-- <template #icon="props"> -->
<template #icon>
<!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
<img :src="tab.icon" />
</template>
</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script setup>
import { RouterView } from 'vue-router';
import { ref } from 'vue';
const active = ref();
const table = [{
title: '首页',
path: '/',
icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u18.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
}, {
title: '问卷',
path: '/survey',
icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u21.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
}, {
title: '新建问卷',
path: '/survey/create',
icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/首页_1/u15.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
}, {
title: '模板',
path: '/market',
icon: 'https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u24.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6'
}];
</script>
<style scoped lang="scss">
.common-layout {
min-height: calc(100vh);
background-color: #E9EEF3;
@@ -17,4 +55,15 @@ import { RouterView } from 'vue-router';
text-align: center;
}
.header {
position: sticky;
top: 0;
background-color: #B9F8CF;
.title {
display: flex;
align-items: end;
justify-content: center;
}
}
</style>

20
src/router/index.ts
View File

@@ -7,15 +7,33 @@ const router = createRouter({
{
path: '/',
name: 'home',
component: Home
component: Home,
meta: {
title: '首页'
}
},
{
path: '/design',
name: 'design',
meta: {},
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Design
}, {
path: '/survey',
name: 'survey',
meta: {
title: '问卷'
},
component: () => import('../views/Survey/Inex.vue')
}, {
path: '/market',
name: 'market',
meta: {
title: '模板'
},
component: () => import('../views/Market/Index.vue')
}
]
});

41
src/views/Home/Index.vue
View File

@@ -21,14 +21,15 @@ const func = [{
</script>
<template>
<!-- title 标题和搜索栏 -->
<div class="header">
<div class="title">首页</div>
<van-search placeholder="请输入搜索关键词" background="#B9F8CF" />
</div>
<div class="container">
<div>
<div v-for="card in func" :key="card.title">
<div v-for="card in func" :key="card.title" class="funcCard">
<img
width="50px"
src="https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%A6%96%E9%A1%B5_1/u48.png?pageId=74b3e5b2-848e-4258-8a34-9e220127c8a6"
alt=" "
/>
<span>title</span>
</div>
</div>
@@ -39,18 +40,8 @@ const func = [{
</template>
<style scoped lang="scss">
.header {
background-color: #B9F8CF;
.title {
display: flex;
align-items: end;
justify-content: center;
}
}
.container {
padding-top: 20px;
padding: 0 10px;
background: linear-gradient(0deg,
#f5f5f5 0%,
#f5f5f5 84%,
@@ -68,7 +59,21 @@ const func = [{
width: 50px;
height: 50px;
margin: 10px;
background-color: #B9F8CF;
// background-color: #B9F8CF;
padding: 20px 10px;
}
.funcCard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
img {
margin-bottom: 13px;
}
}
}
}

9
src/views/Home/components/Suvrey/Index.vue
View File

@@ -18,10 +18,11 @@
<style scoped>
.survey {
& :first-child {
&> :first-child {
display: flex;
align-items: end;
justify-content: space-between;
margin: 10px 0;
&>span {
color: grey;
@@ -37,9 +38,9 @@
div {
display: flex;
overflow: hidden;
width: 32vw;
height: 32vw;
border-radius: 10px;
width: calc(129px / 1.3);
height: calc(135px / 1.3);
border-radius: 6px;
background-color: white;
}
}

7
src/views/Home/components/Template/Index.vue
View File

@@ -17,10 +17,11 @@
<style scoped>
.market {
& :first-child {
&> :first-child {
display: flex;
align-items: end;
justify-content: space-between;
margin: 10px 0;
span {
color: grey;
@@ -37,8 +38,8 @@
div {
display: flex;
overflow: hidden;
width: 48vw;
height: 48vw;
width: calc(196px / 1.2);
height: calc(193px / 1.2);
margin-bottom: 10px;
border-radius: 10px;
background-color: white;

45
src/views/Survey/Inex.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div class="container">
<div v-for="item in 4" :key="item" class="survey-item">
<span>
<img
src="https://files.axshare.com/gsc/DR6075/de/a0/49/dea049d6ad3e4c2c80af44258c6c76d6/images/%E9%97%AE%E5%8D%B7/u35.svg?pageId=04b2dc46-144e-4349-9301-11852899b094"
alt="" />
已结束 - 100
</span>
<div>移动端</div>
<div style="margin: 10px 0 0">报名签到问卷标题</div>
<div>问卷描述</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.container {
display: flex;
flex-flow: row wrap;
align-items: start;
justify-content: space-around;
padding: 0 10px;
.survey-item {
display: flex;
flex-direction: column;
align-items: start;
width: calc(194px / 1.25);
height: calc(144px / 1.2);
box-shadow: 4px 4px 3px 2px #e0e0e0;
margin: 10px 0;
padding: 5px;
background-color: white;
font-size: 12px;
* {
font-size: 12px;
}
}
}
</style>