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. 185
      src/components/SubmitDemandForm.vue
  5. 71
      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) {

185
src/components/SubmitDemandForm.vue
Unescape View File

@ -85,26 +85,26 @@ const validateForm = () => {
return false
}
}
// 验证需求概述字数
if (form.demand_overview.length > 800) {
showToast('需求概述不能超过800字')
return false
}
// 验证联系电话格式
// const phoneRegex = /^1[3-9]\d{9}$/
// if (!phoneRegex.test(form.contact_phone)) {
// showToast('请输入正确的联系电话')
// return false
// }
// 验证企业意向资金额为数字
// if (isNaN(Number(form.enterprise_intended_fund)) || Number(form.enterprise_intended_fund) < 0) {
// showToast('请输入正确的企业意向资金额')
// return false
// }
return true
}
@ -114,13 +114,13 @@ const submitForm = async () => {
try {
// 显示加载提示
showLoadingToast({ message: '提交中...', forbidClick: true, duration: 0 })
// 调用API提交数据
const response = await createDemand(form)
// 关闭加载提示
closeToast()
// 处理响应
if (response.code === 1) {
showSuccessToast('需求提交成功')
@ -136,7 +136,7 @@ const submitForm = async () => {
} catch (error) {
// 关闭加载提示
closeToast()
// 处理错误
showToast('网络错误，请检查网络连接后重试')
console.error('表单提交失败:', error)
@ -154,14 +154,14 @@ const resetForm = async () => {
confirmButtonText: '确定',
cancelButtonText: '取消'
})
// 用户点击确认后执行重置操作
for (const key in form) {
if (Object.hasOwnProperty.call(form, key)) {
form[key] = ''
}
}
// 显示重置成功提示
showToast('表单已重置')
} catch (error) {
@ -179,109 +179,58 @@ const resetForm = async () => {
<div v-if="loading" class="loading-container">
<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">
<van-button type="default" round size="large" @click="resetForm">
@ -293,45 +242,30 @@ const resetForm = async () => {
</div>
</div>
</div>
<!-- 选择器 -->
<!-- 所属领域选择器 -->
<van-popup v-model:show="showFieldPicker" position="bottom">
<van-picker
:columns="enumData.domain"
@confirm="(value) => {
form.field = value.selectedValues[0];
showFieldPicker = false
}"
@cancel="showFieldPicker = false"
title="选择所属领域"
/>
<van-picker :columns="enumData.domain" @confirm="(value) => {
form.field = value.selectedValues[0];
showFieldPicker = false
}" @cancel="showFieldPicker = false" title="选择所属领域" />
</van-popup>
<!-- 技术成熟度选择器 -->
<van-popup v-model:show="showMaturityPicker" position="bottom">
<van-picker
:columns="enumData.trl"
@confirm="(value) => {
form.tech_maturity = value.selectedValues[0];
showMaturityPicker = false
}"
@cancel="showMaturityPicker = false"
title="选择技术成熟度"
/>
<van-picker :columns="enumData.trl" @confirm="(value) => {
form.tech_maturity = value.selectedValues[0];
showMaturityPicker = false
}" @cancel="showMaturityPicker = false" title="选择技术成熟度" />
</van-popup>
<!-- 知识产权情况选择器 -->
<van-popup v-model:show="showIpPicker" position="bottom">
<van-picker
:columns="enumData.propertyRights"
@confirm="(value) => {
form.intellectual_property = value.selectedValues[0];
showIpPicker = false
}"
@cancel="showIpPicker = false"
title="选择知识产权情况"
/>
<van-picker :columns="enumData.propertyRights" @confirm="(value) => {
form.intellectual_property = value.selectedValues[0];
showIpPicker = false
}" @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;
}
/* 提交按钮容器 */
@ -376,12 +311,12 @@ const resetForm = async () => {
.form-container {
padding: 8px 0;
}
.van-field {
padding: 8px 12px;
font-size: 13px;
}
.submit-btn-container {
padding: 0 12px;
margin-top: 15px;

71
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,8 +124,25 @@ onUnmounted(() => {
<div class="home">
<!-- 顶部标题区域 -->
<div class="header">
<h1 class="title">{{ config.title }}</h1>
<p class="subtitle">{{ config.subTitle }}</p>
<!-- 左侧水印 -->
<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>
<!-- 内容区 -->
@ -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