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

style(views/components): 调整水印位置和样式，优化搜索框和按钮样式

Browse Source 
- 调整HomeView水印位置和字体大小
- 统一DemandList和AchievementList的搜索框清除按钮样式
- 修改下载按钮颜色，优化详情页面布局
- 交换备注和成果简介的显示顺序
master
Swanky 2 months ago
parent cc03549204
commit c85b1597b9
3 changed files with 44 additions and 27 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. 39
      src/components/AchievementList.vue
  2. 22
      src/components/DemandList.vue
  3. 8
      src/views/HomeView.vue

39
src/components/AchievementList.vue
Unescape View File

@ -108,23 +108,22 @@ onMounted(() => {
<div class="achievement-list">
<!-- 搜索框 -->
<div class="search-container">
<van-search v-model="searchKey" placeholder="请输入关键词搜索" show-action action-text="清除" :show-filter="true" :clearable="false"
wrap-with-form @search="handleSearch" @cancel="handleCancel" shape="round" @click-right-icon="handleSearch">
<van-search v-model="searchKey" placeholder="请输入关键词搜索" show-action action-text="清除" :show-filter="true"
:clearable="false" wrap-with-form @search="handleSearch" @cancel="handleCancel" shape="round"
@click-right-icon="handleSearch">
<template #right-icon>
<a style="text-decoration:none">搜索</a>
</template>
<template #action>
<van-button type="danger" plain size="small" @click="handleCancel" round>清除</van-button>
</template>
</van-search>
</div>
<!-- 下载按钮 -->
<div class="download-container">
<van-button
v-for="item in props.config?.achievementDownList || []"
:key="item.name"
type="default"
size="small"
@click="handleDownload(item.url)"
>
<van-button v-for="item in props.config?.achievementDownList || []" :key="item.name" color="#2196f3" size="small"
@click="handleDownload(item.url)">
{{ item.name }}
</van-button>
</div>
@ -228,17 +227,17 @@ onMounted(() => {
<div class="detail-section">
<h4 class="section-title">
<van-icon name="comment-o" color="#ff9800" size="18" />
备注
成果简介
</h4>
<div class="detail-content-text">{{ currentAchievement?.remarks || '无备注信息' }}</div>
<div class="detail-content-text">{{ currentAchievement?.achievement_intro }}</div>
</div>
<div class="detail-section">
<h4 class="section-title">
<van-icon name="comment-o" color="#ff9800" size="18" />
成果简介
备注
</h4>
<div class="detail-content-text">{{ currentAchievement?.achievement_intro }}</div>
<div class="detail-content-text">{{ currentAchievement?.remarks || '无备注信息' }}</div>
</div>
<!-- 发布时间 -->
@ -263,6 +262,11 @@ onMounted(() => {
padding-left: 0;
}
.search-container :deep(.van-search__action) {
line-height: 25px;
}
/* 下载按钮容器 */
.download-container {
display: flex;
@ -413,8 +417,9 @@ onMounted(() => {
.detail-content {
height: 100%;
overflow-y: auto;
padding: 15px;
font-size: 14px;
display: flex;
flex-direction: column;
}
/* 详情头部 */
@ -422,9 +427,8 @@ onMounted(() => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
padding: 15px 15px 10px 15px;
}
.detail-header h3 {
@ -440,6 +444,9 @@ onMounted(() => {
display: flex;
flex-direction: column;
gap: 15px;
padding: 15px;
flex: 1;
overflow: auto;
}
/* 详情区块 */

22
src/components/DemandList.vue
Unescape View File

@ -114,12 +114,15 @@ onMounted(() => {
<template #right-icon>
<a style="text-decoration:none">搜索</a>
</template>
<template #action>
<van-button type="danger" plain size="small" @click="handleCancel" round>清除</van-button>
</template>
</van-search>
</div>
<!-- 下载按钮 -->
<div class="download-container">
<van-button v-for="item in props.config?.demandDownList || []" :key="item.name" type="default" size="small"
<van-button v-for="item in props.config?.demandDownList || []" :key="item.name" color="#9c27b0" size="small"
@click="handleDownload(item.url)">
{{ item.name }}
</van-button>
@ -252,9 +255,9 @@ onMounted(() => {
</div>
<!-- 发布时间 -->
<div style="font-size: 12px; color: #999; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;">
<!-- <div style="font-size: 12px; color: #999; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;">
发布时间：{{ currentDemand?.create_time || '未设置' }}
</div>
</div> -->
</div>
</div>
</van-popup>
@ -272,6 +275,10 @@ onMounted(() => {
padding-left: 0;
}
.search-container :deep(.van-search__action) {
line-height: 25px;
}
/* 下载按钮容器 */
.download-container {
display: flex;
@ -422,8 +429,9 @@ onMounted(() => {
.detail-content {
height: 100%;
overflow-y: auto;
padding: 15px;
font-size: 14px;
display: flex;
flex-direction: column;
}
/* 详情头部 */
@ -431,9 +439,8 @@ onMounted(() => {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
padding: 15px 15px 10px 15px;
}
.detail-header h3 {
@ -449,6 +456,9 @@ onMounted(() => {
display: flex;
flex-direction: column;
gap: 15px;
flex: 1;
overflow: auto;
padding: 15px;
}
/* 详情区块 */

8
src/views/HomeView.vue
Unescape View File

@ -126,9 +126,9 @@ onUnmounted(() => {
<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(-15deg); top: 20px; left: 0;">专业评估</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 class="watermark-text" style="transform: rotate(-8deg); top: 100px; left: 0;">中式熟化</div>
</div>
<!-- 主标题内容 -->
@ -304,7 +304,7 @@ onUnmounted(() => {
.watermark-text {
position: absolute;
color: rgba(255, 255, 255, 0.15);
font-size: 16px;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
opacity: 0.8;
@ -329,7 +329,7 @@ onUnmounted(() => {
/* 副标题样式 */
.subtitle {
font-size: 22px;
font-weight: 500;
font-weight: 700;
margin: 8px 0 0 0;
line-height: 1.3;
word-break: break-word;

Write Preview
Loading…
Cancel
Save