feat: 完成 nav 和 最新问卷的布局
This commit is contained in:
Huangzhe
@@ -30,6 +30,7 @@
|
||||
"vconsole": "^3.15.1",
|
||||
"vite-plugin-vue": "^0.0.1",
|
||||
"vue": "^3.4.29",
|
||||
"vue-icons-plus": "^0.1.8",
|
||||
"vue-router": "^4.3.3",
|
||||
"vuex": "^4.1.0"
|
||||
},
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--primary-color : rgb(111,185, 55);
|
||||
--vt-c-white: #fff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
@@ -25,6 +25,8 @@ a,
|
||||
}
|
||||
|
||||
.container {
|
||||
// 容器的高度 ， 减少底部之后的高度
|
||||
//height: calc(100vh - 100px);
|
||||
//width: 100%;
|
||||
// 绿色 #70B937 白色过渡渐变 竖向 上一半部分 渐变到白色就可以
|
||||
background: linear-gradient(to bottom, $theme-color 200px, #f2f2f2 300px);
|
||||
|
||||
@@ -2,8 +2,18 @@
|
||||
<div class="common-layout">
|
||||
<!-- title 标题和搜索栏 -->
|
||||
<header class="header">
|
||||
<div class="title">{{ $route.meta.title }}</div>
|
||||
<van-search placeholder="请输入搜索关键词" background="#A5D380" />
|
||||
<van-nav-bar
|
||||
class="header-nav"
|
||||
:title="$route.meta.title"
|
||||
left-arrow
|
||||
@click-left="$route.go(-1)"
|
||||
/>
|
||||
<van-search
|
||||
shape="round"
|
||||
class="header-search"
|
||||
placeholder="请输入搜索关键词"
|
||||
background="#6fb937"
|
||||
/>
|
||||
</header>
|
||||
<!-- content -->
|
||||
<RouterView />
|
||||
@@ -93,10 +103,16 @@ function tabPath(path) {
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background-color: #a5d380;
|
||||
.header-nav {
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
padding: 13px;
|
||||
|
||||
//.input-class {
|
||||
//}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
|
||||
@@ -12,9 +12,13 @@ import appBridge from '@/assets/js/appBridge';
|
||||
import VConsole from 'vconsole';
|
||||
const app = createApp(App);
|
||||
|
||||
// import VConsole from 'vconsole';
|
||||
// let vconsole;
|
||||
if (import.meta.env.VITE_APP_ENV !== 'production') {
|
||||
const vconsole = new VConsole();
|
||||
app.use(vconsole);
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
// vconsole = new VConsole();
|
||||
}
|
||||
|
||||
// 添加 TypeScript 类型声明，在文件顶部添加
|
||||
|
||||
@@ -1,45 +1,181 @@
|
||||
<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 class="new-survey-container">
|
||||
<div v-for="item in 10" :key="item" class="new-survey_item">
|
||||
<!-- 问卷详情 -->
|
||||
<div class="survey_item_info">
|
||||
<div style="position: relative">
|
||||
<div class="survey_item_info_title">
|
||||
<el-text>
|
||||
<b>{{ '报名签到问卷标题' }}</b>
|
||||
</el-text>
|
||||
<el-text>{{ 100 }}份</el-text>
|
||||
</div>
|
||||
<div class="survey_item_info_status">
|
||||
<el-space spacer="|">
|
||||
<!--报名签到-->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ '报名签到' }}</el-text>
|
||||
</div>
|
||||
<!-- 问卷来源 -->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ '移动端' }}</el-text>
|
||||
</div>
|
||||
<!-- 问卷时间 -->
|
||||
<div>
|
||||
<span><img src="" alt="" /></span>
|
||||
<el-text size="small">{{ '2025.03.04' }}</el-text>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
<div class="survey_item_status">
|
||||
<span class="survey_item_info_status_text">-已结束-</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--问卷描述-->
|
||||
<div class="survey_item_info_desc">
|
||||
<el-text>
|
||||
{{ '问卷描述：为优化活动服务品质，烦请完成问卷，感谢配合！您的反馈至关重要' }}
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
<!-- action 功能位置 -->
|
||||
<div class="survey_item_action">
|
||||
<el-space direction="horizontal">
|
||||
<div>
|
||||
<el-button> 删除</el-button>
|
||||
<el-button> 复制</el-button>
|
||||
<el-button style="border: 2px solid #71b73c">
|
||||
<el-text style="color: #71b73c">预览</el-text>
|
||||
</el-button>
|
||||
<el-button color="#6fb937">
|
||||
<el-text style="color: white">开启投放</el-text>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-dropdown placement="top-end" trigger="click" style="">
|
||||
<Io5EllipsisHorizontalSharp />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>编辑</el-dropdown-item>
|
||||
<el-dropdown-item>存为模板</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
// import { ref } from 'vue';
|
||||
import { Io5EllipsisHorizontalSharp } from 'vue-icons-plus/io5';
|
||||
|
||||
// const surveyStatus = ref('end');
|
||||
// const getSurveyStatusUrl = computed(() => {
|
||||
// const urlMap: { [key: string]: string } = {
|
||||
// end: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb370d01215f9cedc28d567c637c011047f83a99fbb5e7ac348ebd0ef0015f32',
|
||||
// edit: 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngaa20b2a05d267d040d17ba3aca15ae8c8f43fc3d2541283276b51d601d069bcc',
|
||||
// publish:
|
||||
// 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbdfd7252fb5f0fa698039bafcab00305a5b80f0e19c67522e6d4d29820f0d58e'
|
||||
// };
|
||||
// return `url(${urlMap[surveyStatus.value]})`;
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: start;
|
||||
justify-content: space-evenly;
|
||||
@import '@/assets/css/base';
|
||||
@import '@/assets/css/main';
|
||||
|
||||
.survey-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
width: calc(194px / 1.2);
|
||||
height: calc(144px / 1.2);
|
||||
margin: 3px 0;
|
||||
padding: 5px;
|
||||
.new-survey-container {
|
||||
min-height: calc(100vh - 100px);
|
||||
padding: 1px;
|
||||
background: linear-gradient(to bottom, $theme-color 200px, #f2f2f2 300px);
|
||||
|
||||
.new-survey_item {
|
||||
margin: 10px;
|
||||
padding: 10px 0 8px 7px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
box-shadow: 4px 4px 3px 2px #e0e0e0;
|
||||
font-size: 12px;
|
||||
|
||||
* {
|
||||
.survey_item_info {
|
||||
.survey_item_status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
padding: 28px 13px 19px 7px;
|
||||
background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbb370d01215f9cedc28d567c637c011047f83a99fbb5e7ac348ebd0ef0015f32')
|
||||
100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 1;
|
||||
|
||||
.survey_item_info_status_text {
|
||||
height: 12px;
|
||||
color: rgba(206, 206, 206, 1);
|
||||
|
||||
//font-family: TBMCYXT;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
line-height: 13px;
|
||||
letter-spacing: 1.0083px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.survey_item_info_title {
|
||||
.el-text {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
padding: 1px;
|
||||
border: 2px solid #f5f5f5;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.survey_item_info_desc {
|
||||
margin: 15px 7px 0 0;
|
||||
padding: 7px 9px 6px;
|
||||
border-radius: 8px;
|
||||
background-color: rgba(246, 247, 248, 0.5);
|
||||
|
||||
.el-text {
|
||||
width: 323px;
|
||||
height: 32px;
|
||||
color: rgba(130, 130, 130, 1);
|
||||
|
||||
//font-family: PingFangSC-Regular;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.survey_item_action {
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
border-top: 1px dashed #f5f5f5;
|
||||
|
||||
.el-button {
|
||||
width: 18vw;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-space {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user