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"
|
v-model="value"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
style="--van-search-padding: 0"
|
style="--van-search-padding: 0"
|
||||||
@search="handleSearchActino"
|
@search="handleSearchAction"
|
||||||
>
|
>
|
||||||
</van-search>
|
</van-search>
|
||||||
<p class="search" @click="handleSearchActino">搜索</p>
|
<p class="search" @click="handleSearchAction">搜索</p>
|
||||||
<!-- <el-text>搜索</el-text>-->
|
<!-- <el-text>搜索</el-text>-->
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -34,7 +34,7 @@ const placeholder = defineModel('placeholder', {
|
|||||||
|
|
||||||
const emit = defineEmits(['search']);
|
const emit = defineEmits(['search']);
|
||||||
|
|
||||||
function handleSearchActino() {
|
function handleSearchAction() {
|
||||||
emit('search');
|
emit('search');
|
||||||
searchMethod.value && searchMethod.value();
|
searchMethod.value && searchMethod.value();
|
||||||
}
|
}
|
||||||
@@ -63,7 +63,7 @@ function handleSearchActino() {
|
|||||||
&::after {
|
&::after {
|
||||||
content: '|';
|
content: '|';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 11vh;
|
right: 9vh;
|
||||||
top: 1vh;
|
top: 1vh;
|
||||||
//transform: translateY(-50%);
|
//transform: translateY(-50%);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|||||||
@@ -83,7 +83,6 @@ function handleSearchClick() {
|
|||||||
.search {
|
.search {
|
||||||
margin: 0 -10px 0 -10px;
|
margin: 0 -10px 0 -10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
// background: linear-gradient(to bottom, #f8fef5, #f3f3f3);
|
|
||||||
@extend %seach-gradient;
|
@extend %seach-gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -16,6 +16,10 @@ const { surveys } = fetchSurveys();
|
|||||||
<survey-analysis :sn="survey.sn" :disable-search="true" :disable-insight="true" />
|
<survey-analysis :sn="survey.sn" :disable-search="true" :disable-insight="true" />
|
||||||
</section>
|
</section>
|
||||||
</van-swipe-item>
|
</van-swipe-item>
|
||||||
|
<!-- 指示器 -->
|
||||||
|
<!-- <template #indicator="{ active, total }">
|
||||||
|
<div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
|
||||||
|
</template> -->
|
||||||
</van-swipe>
|
</van-swipe>
|
||||||
</template>
|
</template>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|||||||
@@ -142,7 +142,7 @@ function copyItem(item: SurveyItem) {
|
|||||||
<b v-html="survey.project_name"></b>
|
<b v-html="survey.project_name"></b>
|
||||||
</el-text>
|
</el-text>
|
||||||
<el-text class="wrap">{{ survey.answer_num }}份</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 ?? '无限期'}` }}
|
{{ `${survey.start_time} 至 ${survey.end_time ?? '无限期'}` }}
|
||||||
</el-text>
|
</el-text>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -66,7 +66,10 @@ useFetchAnalysis(sn.value);
|
|||||||
<van-cell v-if="aiInsightsConfig.message.length > 0" class="ai-insight">
|
<van-cell v-if="aiInsightsConfig.message.length > 0" class="ai-insight">
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<!-- ai 洞察部分内容 -->
|
<!-- ai 洞察部分内容 -->
|
||||||
|
<article class="ai-insight-content">
|
||||||
|
<img src="@/assets/img/analysis/ai-insight.png" alt="" />
|
||||||
<div v-html="aiInsightsConfig.message" />
|
<div v-html="aiInsightsConfig.message" />
|
||||||
|
</article>
|
||||||
</template>
|
</template>
|
||||||
</van-cell>
|
</van-cell>
|
||||||
|
|
||||||
@@ -88,6 +91,12 @@ useFetchAnalysis(sn.value);
|
|||||||
|
|
||||||
.ai-insight {
|
.ai-insight {
|
||||||
background-image: url('@/assets/img/home/item-back.png');
|
background-image: url('@/assets/img/home/item-back.png');
|
||||||
|
background-position: top;
|
||||||
|
|
||||||
|
.ai-insight-content {
|
||||||
|
background-color: #f8fbfe;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey-item,
|
.survey-item,
|
||||||
|
|||||||
Reference in New Issue
Block a user