feat: 优化UI组件和样式
1. 修复搜索组件方法名拼写错误(handleSearchActino -> handleSearchAction) 2. 优化AI洞察区域样式,添加背景图片和内容容器 3. 调整搜索框右侧竖线位置(right: 11vh -> 9vh) 4. 优化问卷项时间显示样式,移除固定字体大小 5. 添加AI洞察区域背景定位(background-position: top) 6. 添加AI洞察图片资源
This commit is contained in:
BIN
src/assets/img/analysis/ai-insight.png
Normal file
BIN
src/assets/img/analysis/ai-insight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@@ -5,10 +5,10 @@
|
||||
v-model="value"
|
||||
:placeholder="placeholder"
|
||||
style="--van-search-padding: 0"
|
||||
@search="handleSearchActino"
|
||||
@search="handleSearchAction"
|
||||
>
|
||||
</van-search>
|
||||
<p class="search" @click="handleSearchActino">搜索</p>
|
||||
<p class="search" @click="handleSearchAction">搜索</p>
|
||||
<!-- <el-text>搜索</el-text>-->
|
||||
</section>
|
||||
</template>
|
||||
@@ -34,7 +34,7 @@ const placeholder = defineModel('placeholder', {
|
||||
|
||||
const emit = defineEmits(['search']);
|
||||
|
||||
function handleSearchActino() {
|
||||
function handleSearchAction() {
|
||||
emit('search');
|
||||
searchMethod.value && searchMethod.value();
|
||||
}
|
||||
@@ -63,7 +63,7 @@ function handleSearchActino() {
|
||||
&::after {
|
||||
content: '|';
|
||||
position: absolute;
|
||||
right: 11vh;
|
||||
right: 9vh;
|
||||
top: 1vh;
|
||||
//transform: translateY(-50%);
|
||||
font-weight: bold;
|
||||
|
||||
@@ -83,7 +83,6 @@ function handleSearchClick() {
|
||||
.search {
|
||||
margin: 0 -10px 0 -10px;
|
||||
padding: 10px;
|
||||
// background: linear-gradient(to bottom, #f8fef5, #f3f3f3);
|
||||
@extend %seach-gradient;
|
||||
}
|
||||
|
||||
|
||||
@@ -16,6 +16,10 @@ const { surveys } = fetchSurveys();
|
||||
<survey-analysis :sn="survey.sn" :disable-search="true" :disable-insight="true" />
|
||||
</section>
|
||||
</van-swipe-item>
|
||||
<!-- 指示器 -->
|
||||
<!-- <template #indicator="{ active, total }">
|
||||
<div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
|
||||
</template> -->
|
||||
</van-swipe>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
@@ -142,7 +142,7 @@ function copyItem(item: SurveyItem) {
|
||||
<b v-html="survey.project_name"></b>
|
||||
</el-text>
|
||||
<el-text class="wrap">{{ survey.answer_num }}份</el-text>
|
||||
<el-text class="wrap" v-if="survey.is_time" style="text-wrap: nowrap; font-size: 14px">
|
||||
<el-text class="wrap" v-if="survey.is_time" style="text-wrap: nowrap">
|
||||
{{ `${survey.start_time} 至 ${survey.end_time ?? '无限期'}` }}
|
||||
</el-text>
|
||||
</div>
|
||||
|
||||
@@ -66,7 +66,10 @@ useFetchAnalysis(sn.value);
|
||||
<van-cell v-if="aiInsightsConfig.message.length > 0" class="ai-insight">
|
||||
<template #extra>
|
||||
<!-- ai 洞察部分内容 -->
|
||||
<article class="ai-insight-content">
|
||||
<img src="@/assets/img/analysis/ai-insight.png" alt="" />
|
||||
<div v-html="aiInsightsConfig.message" />
|
||||
</article>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
@@ -88,6 +91,12 @@ useFetchAnalysis(sn.value);
|
||||
|
||||
.ai-insight {
|
||||
background-image: url('@/assets/img/home/item-back.png');
|
||||
background-position: top;
|
||||
|
||||
.ai-insight-content {
|
||||
background-color: #f8fbfe;
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.survey-item,
|
||||
|
||||
Reference in New Issue
Block a user