swanky
/
project-report-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化表单字段标签和样式，添加水印效果

Browse Source 
- 将"项目名称"改为"需求名称"和"成果名称"以更准确描述内容
- 简化"成果完成人姓名"为"完成人姓名"
- 在首页添加专业水印效果增强视觉效果
- 统一调整表单字段标签最小宽度为100px
- 修改部分颜色和字体大小提升整体美观度
master
Swanky 2 months ago
parent 3eccbf6915
commit cc03549204
5 changed files with 133 additions and 134 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/AchievementList.vue
  2. 2
      src/components/DemandList.vue
  3. 5
      src/components/SubmitAchievementForm.vue
  4. 121
      src/components/SubmitDemandForm.vue
  5. 67
      src/views/HomeView.vue

4
src/components/AchievementList.vue
Unescape View File

@ -182,7 +182,7 @@ onMounted(() => {
<van-icon name="arrow-left" />
</template>
<template #next-text>
<van-icon name="arrow-right" />
<van-icon name="arrow" />
</template>
<template #page="{ text }">{{ text }}</template>
</van-pagination>
@ -204,7 +204,7 @@ onMounted(() => {
基本信息
</h4>
<div class="detail-item">
<span class="item-label">项目名称：</span>
<span class="item-label">成果名称：</span>
<span class="item-value">{{ currentAchievement?.project_name }}</span>
</div>
<div class="detail-item">

2
src/components/DemandList.vue
Unescape View File

@ -199,7 +199,7 @@ onMounted(() => {
基本信息
</h4>
<div class="detail-item">
<span class="item-label">项目名称：</span>
<span class="item-label">需求名称：</span>
<span class="item-value">{{ currentDemand?.project_name }}</span>
</div>
<div class="detail-item">

5
src/components/SubmitAchievementForm.vue
Unescape View File

@ -275,8 +275,8 @@ const resetForm = async () => {
<div class="field-wrapper">
<van-field
v-model="form.completer_name"
label="成果完成人姓名"
placeholder="请输入成果完成人姓名"
label="完成人姓名"
placeholder="请输入完成人姓名"
required
/>
<van-field
@ -419,6 +419,7 @@ const resetForm = async () => {
.field-wrapper :deep(.van-field__label) {
font-weight: 500;
color: #666;
min-width: 100px;
}
.field-wrapper :deep(.van-field__control) {

121
src/components/SubmitDemandForm.vue
Unescape View File

@ -180,107 +180,56 @@ const resetForm = async () => {
<van-skeleton title :row="12" animated />
</div>
<div v-else>
<div v-else class="field-wrapper">
<!-- 项目名称 -->
<van-field
v-model="form.project_name"
label="项目名称"
placeholder="请输入项目名称"
required
/>
<van-field v-model="form.project_name" label="项目名称" placeholder="请输入项目名称" required />
<!-- 所属领域 -->
<van-field
v-model="form.field"
label="所属领域"
placeholder="请选择所属领域"
required
@click="showFieldPicker = true"
>
<van-field v-model="form.field" label="所属领域" placeholder="请选择所属领域" required @click="showFieldPicker = true">
<template #right-icon>
<van-icon name="arrow-down" size="16" color="#999" />
</template>
</van-field>
<!-- 技术成熟度 -->
<van-field
v-model="form.tech_maturity"
label="技术成熟度"
placeholder="请选择技术成熟度"
required
@click="showMaturityPicker = true"
>
<van-field v-model="form.tech_maturity" label="技术成熟度" placeholder="请选择技术成熟度" required
@click="showMaturityPicker = true">
<template #right-icon>
<van-icon name="arrow-down" size="16" color="#999" />
</template>
</van-field>
<!-- 预期技术目标（指标） -->
<van-field
v-model="form.expected_tech_target"
label="预期技术目标（指标）"
placeholder="请输入预期技术目标（指标）"
required
/>
<van-field v-model="form.expected_tech_target" label="预期技术目标" placeholder="请输入预期技术目标（指标）" required />
<!-- 知识产权情况 -->
<van-field
v-model="form.intellectual_property"
label="知识产权情况"
placeholder="请选择知识产权情况"
required
@click="showIpPicker = true"
>
<van-field v-model="form.intellectual_property" label="知识产权情况" placeholder="请选择知识产权情况" required
@click="showIpPicker = true">
<template #right-icon>
<van-icon name="arrow-down" size="16" color="#999" />
</template>
</van-field>
<!-- 企业意向资金额（万元） -->
<van-field
v-model="form.enterprise_intended_fund"
label="企业意向资金额（万元）"
placeholder="请输入企业意向资金额"
required
type="number"
/>
<van-field v-model="form.enterprise_intended_fund" label="企业意向资金" placeholder="请输入企业意向资金" required
type="number">
<template #right-icon>
<van-text>万元</van-text>
</template>
</van-field>
<!-- 填报企业 -->
<van-field
v-model="form.filling_enterprise"
label="填报企业"
placeholder="请输入填报企业"
required
/>
<van-field v-model="form.filling_enterprise" label="填报企业" placeholder="请输入填报企业" required />
<!-- 联系人 -->
<van-field
v-model="form.contact_person"
label="联系人"
placeholder="请输入联系人"
required
/>
<van-field v-model="form.contact_person" label="联系人" placeholder="请输入联系人" required />
<!-- 联系电话 -->
<van-field
v-model="form.contact_phone"
label="联系电话"
placeholder="请输入联系电话"
required
type="tel"
/>
<van-field v-model="form.contact_phone" label="联系电话" placeholder="请输入联系电话" required type="tel" />
<!-- 需求概述 -->
<van-field
v-model="form.demand_overview"
label="需求概述"
placeholder="请输入需求概述（800字以内）"
type="textarea"
rows="5"
maxlength="800"
show-word-limit
required
/>
<van-field v-model="form.demand_overview" label="需求概述" placeholder="请输入需求概述（800字以内）" type="textarea" rows="5"
maxlength="800" show-word-limit required />
<!-- 提交按钮 -->
<div class="submit-btn-container">
@ -297,41 +246,26 @@ const resetForm = async () => {
<!-- 选择器 -->
<!-- 所属领域选择器 -->
<van-popup v-model:show="showFieldPicker" position="bottom">
<van-picker
:columns="enumData.domain"
@confirm="(value) => {
<van-picker :columns="enumData.domain" @confirm="(value) => {
form.field = value.selectedValues[0];
showFieldPicker = false
}"
@cancel="showFieldPicker = false"
title="选择所属领域"
/>
}" @cancel="showFieldPicker = false" title="选择所属领域" />
</van-popup>
<!-- 技术成熟度选择器 -->
<van-popup v-model:show="showMaturityPicker" position="bottom">
<van-picker
:columns="enumData.trl"
@confirm="(value) => {
<van-picker :columns="enumData.trl" @confirm="(value) => {
form.tech_maturity = value.selectedValues[0];
showMaturityPicker = false
}"
@cancel="showMaturityPicker = false"
title="选择技术成熟度"
/>
}" @cancel="showMaturityPicker = false" title="选择技术成熟度" />
</van-popup>
<!-- 知识产权情况选择器 -->
<van-popup v-model:show="showIpPicker" position="bottom">
<van-picker
:columns="enumData.propertyRights"
@confirm="(value) => {
<van-picker :columns="enumData.propertyRights" @confirm="(value) => {
form.intellectual_property = value.selectedValues[0];
showIpPicker = false
}"
@cancel="showIpPicker = false"
title="选择知识产权情况"
/>
}" @cancel="showIpPicker = false" title="选择知识产权情况" />
</van-popup>
</div>
</template>
@ -349,9 +283,10 @@ const resetForm = async () => {
border-bottom: 1px solid #f5f5f5;
}
.van-field__label {
.field-wrapper :deep(.van-field__label) {
font-weight: 500;
color: #666;
min-width: 100px;
}
.van-field__control {
@ -360,7 +295,7 @@ const resetForm = async () => {
/* 必填项星号颜色 */
.van-field__required {
color: #f44336;
color: #f77015;
}
/* 提交按钮容器 */

67
src/views/HomeView.vue
Unescape View File

@ -28,7 +28,7 @@ const tabs = [
{ key: 'achievement', name: '成果清单', icon: 'balance-list', color: '#2196f3', activeColor: '#1976d2' },
{ key: 'demand', name: '需求清单', icon: 'award', color: '#9c27b0', activeColor: '#7b1fa2' },
{ key: 'submit-achievement', name: '成果填报', icon: 'add', color: '#4caf50', activeColor: '#388e3c' },
{ key: 'submit-demand', name: '需求填报', icon: 'add-square', color: '#f44336', activeColor: '#d32f2f' }
{ key: 'submit-demand', name: '需求填报', icon: 'add-square', color: '#f77015', activeColor: '#f77015' }
]
// 当前激活的标签
@ -124,10 +124,27 @@ onUnmounted(() => {
<div class="home">
<!-- 顶部标题区域 -->
<div class="header">
<!-- 左侧水印 -->
<div class="watermark-left">
<div class="watermark-text" style="transform: rotate(-15deg); top: 20px; left: -10px;">专业评估</div>
<div class="watermark-text" style="transform: rotate(5deg); top: 60px; left: 10px;">知识产权保护</div>
<div class="watermark-text" style="transform: rotate(-8deg); top: 100px; left: -5px;">中式熟化</div>
</div>
<!-- 主标题内容 -->
<div class="header-content">
<h1 class="title">{{ config.title }}</h1>
<p class="subtitle">{{ config.subTitle }}</p>
</div>
<!-- 右侧水印 -->
<div class="watermark-right">
<div class="watermark-text" style="transform: rotate(12deg); top: 30px; right: 10px;">投融资支持</div>
<div class="watermark-text" style="transform: rotate(-10deg); top: 70px; right: -5px;">精准对接</div>
<div class="watermark-text" style="transform: rotate(8deg); top: 110px; right: 5px;">企业孵化</div>
</div>
</div>
<!-- 内容区 -->
<div class="content">
<!-- 简介区域 -->
@ -257,6 +274,48 @@ onUnmounted(() => {
padding: 30px 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
/* 左侧水印容器 */
.watermark-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* 右侧水印容器 */
.watermark-right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* 水印文本样式 */
.watermark-text {
position: absolute;
color: rgba(255, 255, 255, 0.15);
font-size: 16px;
font-weight: 500;
white-space: nowrap;
opacity: 0.8;
/* 允许文字重叠 */
z-index: inherit;
}
/* 标题内容容器 */
.header-content {
position: relative;
z-index: 2;
}
.title {
@ -269,7 +328,7 @@ onUnmounted(() => {
/* 副标题样式 */
.subtitle {
font-size: 16px;
font-size: 22px;
font-weight: 500;
margin: 8px 0 0 0;
line-height: 1.3;
@ -648,6 +707,10 @@ onUnmounted(() => {
font-size: 20px;
}
.subtitle {
font-size: 20px;
}
.content {
padding: 12px;
}

Write Preview
Loading…
Cancel
Save