hz/ylst-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:样式修改

Browse Source
This commit is contained in:
du.meimei
2025-05-19 13:04:03 +08:00
parent 422b53cb2d
commit 7e4154bd4f
10 changed files with 201 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/home/tob.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 175 B

After

Width:  |  Height:  |  Size: 178 B

BIN
src/assets/img/home/tog.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 177 B

After

Width:  |  Height:  |  Size: 190 B

BIN
src/assets/img/home/tow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 B

19
src/views/Home/BannerDetail.vue
View File

@@ -10,14 +10,23 @@
<div class="detail">
<p class="fw-900">{{bannerInfo.synopsis}}</p>
<p class="fs-14 time">伊调研 | {{bannerInfo.publish_time}}</p>
<img v-if="bannerInfo.type === 1" :src="bannerInfo.file_address" alt="" style="width: 100%;">
<video v-if="bannerInfo.type === 2" width="200px" height="300px" controls="controls">
<source :src="bannerInfo.file_address" type="video/mp4" />
</video>
<video v-if="bannerInfo.type === 2" :src="bannerInfo.file_address" style="width: 100%;"></video>
<!--文字-->
<p v-if="bannerInfo.type === 0">
<p v-html="bannerInfo.characters"></p>
</p>
<!--图片-->
<img v-if="bannerInfo.type === 1" :src="bannerInfo.file_address" alt="" style="width: 100%;">
<!--视频-->
<div v-if="bannerInfo.type === 2">
<video ref="videoPlayer" width="720" height="480" controls style="width: 100%;">
<source :src="bannerInfo.file_address" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- <video v-if="bannerInfo.type === 2" :src="bannerInfo.file_address" style="width: 100%;"></video>-->
<div v-if="bannerInfo.is_display_button" class="jump">
<a-button
type="primary"

2
src/views/Home/components/Charts.vue
View File

@@ -222,7 +222,7 @@ p{
justify-content: space-between;
.stats-item {
width: 27%;
width: 31%;
display: flex;
align-items: center;
flex-direction: column;

79
src/views/Home/components/Header.vue
View File

@@ -28,39 +28,6 @@
<div class="right">
<charts :surveyData="surveyData"></charts>
</div>
<!-- 左侧轮播图部分 -->
<!-- <el-row :gutter="20" style="height: 350px">
<el-col :span="18">
<div class="header-banner">
<el-carousel :autoplay="true" interval="5000" trigger="click">
<el-carousel-item>
<div class="banner-block">
<p class="banner-block-slogan">实时链接消费者的深度洞察日常信息采集工具</p>
<div class="banner-block-desc">
已支持 <CountTo :end="surveyStats.user_count" :use-comma="true" /> 用户 |
已发起 <CountTo :end="surveyStats.survey_count" :use-comma="true" /> 次调研 |
有效回收 <CountTo :end="surveyStats.sample_count" :use-comma="true" /> 份数据
</div>
</div>
</el-carousel-item>
<el-carousel-item v-for="(item,index) in bannerList" :key="index" @click="toBannerDetail(item)">
<div class="banner-content" :style="{ backgroundImage: `url(${item.banner_address})` }">
<p class="banner-content-title">{{item.title}}</p>
<p class="banner-content-desc">{{item.synopsis}}</p>
<div class="banner-text">
<a-button class="custom-button" type="primary">立即进入</a-button>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
&lt;!&ndash; 右侧统计卡片部分 &ndash;&gt;
<el-col :span="6">
<charts :surveyData="surveyData"></charts>
</el-col>
</el-row>-->
</div>
</template>
<script setup>
@@ -300,35 +267,43 @@ const toBannerDetail = (item) => {
left: calc(6%);
}
}
/* 小屏笔记本 (1000px以下) */
@media (max-height: 999px) and (max-width: 1900px) {
//.banner-block-slogan{
// top: calc(35%);
// left: calc(18%);
//}
//.banner-block-desc {
// top: calc(54%);
// left: calc(5.4%);
//}
}
/* 小屏笔记本 (1000px以下) */
//@media (max-height: 999px) and (max-width: 1900px) {
// .banner-block-slogan{
// top: calc(35%);
// left: calc(18%);
// }
// .banner-block-desc {
// top: calc(54%);
// left: calc(5.4%);
// }
//}
/* 标准笔记本 (1280-1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
.container {
width: 1200px;
}
.grid-item {
width: 50%; /* 两列布局 */
}
}
/* 大屏显示器 (1440-1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
.container {
width: 1400px;
}
.grid-item {
width: 33.33%; /* 三列布局 */
}
}
/* 2K及以上屏幕 (1920px以上) */
@media (min-width: 1920px) {
.container {
width: 1800px;
margin: 0 auto;
}
.grid-item {
width: 25%; /* 四列布局 */
}
}
/* 超宽屏 (2560px以上) */

2
src/views/Home/components/ModelCard.vue
View File

@@ -32,7 +32,7 @@ p {
align-items: flex-start;
background-repeat: no-repeat;
background-size: cover;
width: 12.5%;
width: 17.5%;
min-width: 200px;
padding: 40px 20px 10px 20px;
color: #fff;

17
src/views/Home/components/Operating.vue
View File

@@ -143,13 +143,13 @@ li{
& :nth-child(3){
color: #000;
font-size: 24px;
font-weight: 500;
}
}
.info{
font-size: 24px;
font-weight: bold;
line-height: 26px;
margin-left: 10px;
margin-left: 20px;
}
}
.desc-item{
@@ -158,7 +158,7 @@ li{
color: #000;
line-height: 17px;
li{
margin: 10px 0;
margin: 20px 0;
justify-content: flex-start;
.block{
width: 8px;
@@ -179,5 +179,14 @@ li{
}
}
}
:deep(.el-carousel__arrow--right){
border: 1px solid #C1C1C2;
background: transparent;
color: #C1C1C2;
}
:deep(.el-carousel__arrow--left){
border: 1px solid #C1C1C2;
background: transparent;
color: #C1C1C2;
}
</style>

1
src/views/Home/components/Scene.vue
View File

@@ -178,6 +178,7 @@ p{
padding-left: 0;
img{
margin-left: 5px;
margin-bottom: 2px;
}
}
.createG{

300
src/views/ProjectManage/components/NewSearch.vue
View File

@@ -1,168 +1,156 @@
<template>
<div class="flex">
<a-form ref="formRef" :model="ruleForm" class="search-layout">
<div style="display: flex">
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-input
class="custom-input"
placeholder="请输入问卷名称"
v-model:value="ruleForm.project_name"
@keydown.enter="onSubmit"
/>
</a-form-item>
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
v-model:value="ruleForm.scene_code_info"
style="border-radius: 4px"
:max-tag-count="1"
placeholder="请选择调研场景"
mode="multiple"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
class="custom-select show-select"
<a-form ref="formRef" :model="ruleForm" class="search-layout">
<div style="display: flex">
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-input
class="custom-input"
placeholder="请输入问卷名称"
v-model:value="ruleForm.project_name"
@keydown.enter="onSubmit"
/>
</a-form-item>
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
v-model:value="ruleForm.scene_code_info"
style="border-radius: 4px"
:max-tag-count="1"
placeholder="请选择调研场景"
mode="multiple"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
class="custom-select show-select"
>
<a-select-option :value="`${item.code}`" :label="item.title" v-for="item in scenesList" :key="`${item.code}`">
{{ item.parentTitle }}-{{ item.title }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
mode="tags"
v-model:value="ruleForm.tags"
placeholder="请选择问卷标签"
:filter-option="false"
:max-tag-count="1"
:not-found-content="fetching ? undefined : null"
@search="fetchUser"
class="custom-select"
>
<template v-if="fetching" #notFoundContent>
<a-spin size="small" />
</template>
<a-select-option :value="item.id" :label="item.title" v-for="item in tagsList" :key="item.id">
<div style="display: flex; justify-content: space-between">
<span :style="countColor(item.color)" :title="item.title">{{ item.title }}</span>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
v-model:value="ruleForm.status"
style="border-radius: 4px"
placeholder="请选择问卷状态"
mode="multiple"
:max-tag-count="1"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
class="custom-select show-select"
>
<a-select-option
:value="`${item.value}`"
:label="item.label"
v-for="item in statusOptions"
:key="`${item.value}`"
>
<a-select-option :value="`${item.code}`"
:label="item.title"
v-for="item in scenesList" :key="`${item.code}`">
{{ item.parentTitle }}-{{ item.title }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
mode="tags"
v-model:value="ruleForm.tags"
placeholder="请选择问卷标签"
:filter-option="false"
:max-tag-count="1"
:not-found-content="fetching ? undefined : null"
@search="fetchUser"
class="custom-select"
>
<template v-if="fetching" #notFoundContent>
<a-spin size="small" />
</template>
<a-select-option :value="item.id"
:label="item.title"
v-for="item in tagsList"
:key="item.id">
<div style="display: flex; justify-content: space-between">
<span :style="countColor(item.color)"
:title="item.title">{{ item.title }}</span>
</div>
</a-select-option>
</a-select>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="min-width: 150px; margin-right: 16px">
<a-select
v-model:value="ruleForm.status"
style="border-radius: 4px"
placeholder="请选择问卷状态"
mode="multiple"
:max-tag-count="1"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
class="custom-select show-select"
>
<a-select-option
:value="`${item.value}`"
:label="item.label"
v-for="item in statusOptions"
:key="`${item.value}`"
>
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="width: 220px; margin-right: 16px">
<a-range-picker
v-model:value="ruleForm.created_at"
:placeholder="['创建开始日期', '结束日期']"
@change="onChange"
class="custom-date-picker"
/>
</a-form-item>
</div>
<!-- <div style="display: flex">-->
<!-- <a-form-item style="min-width: 150px;margin-right: 16px;">-->
<!-- <a-select-->
<!-- mode="multiple"-->
<!-- v-model:value="ruleForm.template_tags"-->
<!-- placeholder="请选择模板标签"-->
<!-- :max-tag-count="1"-->
<!-- :filter-option="false"-->
<!-- :not-found-content="fetching ? undefined : null"-->
<!-- @search="fetchUser"-->
<!-- class="custom-select"-->
<!-- >-->
<!-- <a-select-option-->
<!-- :value="item.id"-->
<!-- :label="item.title"-->
<!-- v-for="item in templateTagsList"-->
<!-- :key="item.id"-->
<!-- >-->
<!-- <div style="display: flex; justify-content: space-between">-->
<!-- <span :style="countColor(item.color)" :title="item.title">{{-->
<!-- item.title-->
<!-- }}</span>-->
<!-- </div>-->
<!-- </a-select-option>-->
<!-- &lt;!&ndash; <a-select-option v-for="item in tagsList" :key="item.id">-->
<!-- {{ item.title }}-->
<!-- </a-select-option> &ndash;&gt;-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- </div>-->
<!-- <div style="display: flex">-->
<!-- <a-form-item style="min-width: 150px;margin-right: 16px;">-->
<!-- <a-select-->
<!-- mode="multiple"-->
<!-- label-in-value-->
<!-- :max-tag-count="1"-->
<!-- v-model:value="ruleForm.owner_id"-->
<!-- placeholder="请选择所有者"-->
<!-- :filter-option="false"-->
<!-- :not-found-content="fetching ? undefined : null"-->
<!-- @search="fetchUser"-->
<!-- class="custom-select"-->
<!-- >-->
<!-- &lt;!&ndash; <template v-if="fetching" #notFoundContent>&ndash;&gt;-->
<!-- &lt;!&ndash; <a-spin size="small" />&ndash;&gt;-->
<!-- &lt;!&ndash; </template>&ndash;&gt;-->
<!-- <a-select-option v-for="item in userList" :key="item.id">-->
<!-- {{ item.nickname }}-->
<!-- </a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- </div>-->
<!-- <div style="display: flex">-->
<!-- <a-form-item style="width: 220px;margin-right: 16px;">-->
<!-- <a-range-picker-->
<!-- v-model:value="ruleForm.updated_at"-->
<!-- @change="handleUpdated"-->
<!-- :placeholder="['编辑开始日期', '结束日期']"-->
<!-- class="custom-date-picker"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </div>-->
</a-form>
{{ item.label }}
</a-select-option>
</a-select>
</a-form-item>
</div>
<div style="display: flex">
<a-form-item style="width: 220px; margin-right: 16px">
<a-range-picker
v-model:value="ruleForm.created_at"
:placeholder="['创建开始日期', '结束日期']"
@change="onChange"
class="custom-date-picker"
/>
</a-form-item>
</div>
<!-- <div style="display: flex">-->
<!-- <a-form-item style="min-width: 150px;margin-right: 16px;">-->
<!-- <a-select-->
<!-- mode="multiple"-->
<!-- v-model:value="ruleForm.template_tags"-->
<!-- placeholder="请选择模板标签"-->
<!-- :max-tag-count="1"-->
<!-- :filter-option="false"-->
<!-- :not-found-content="fetching ? undefined : null"-->
<!-- @search="fetchUser"-->
<!-- class="custom-select"-->
<!-- >-->
<!-- <a-select-option-->
<!-- :value="item.id"-->
<!-- :label="item.title"-->
<!-- v-for="item in templateTagsList"-->
<!-- :key="item.id"-->
<!-- >-->
<!-- <div style="display: flex; justify-content: space-between">-->
<!-- <span :style="countColor(item.color)" :title="item.title">{{-->
<!-- item.title-->
<!-- }}</span>-->
<!-- </div>-->
<!-- </a-select-option>-->
<!-- &lt;!&ndash; <a-select-option v-for="item in tagsList" :key="item.id">-->
<!-- {{ item.title }}-->
<!-- </a-select-option> &ndash;&gt;-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- </div>-->
<!-- <div style="display: flex">-->
<!-- <a-form-item style="min-width: 150px;margin-right: 16px;">-->
<!-- <a-select-->
<!-- mode="multiple"-->
<!-- label-in-value-->
<!-- :max-tag-count="1"-->
<!-- v-model:value="ruleForm.owner_id"-->
<!-- placeholder="请选择所有者"-->
<!-- :filter-option="false"-->
<!-- :not-found-content="fetching ? undefined : null"-->
<!-- @search="fetchUser"-->
<!-- class="custom-select"-->
<!-- >-->
<!-- &lt;!&ndash; <template v-if="fetching" #notFoundContent>&ndash;&gt;-->
<!-- &lt;!&ndash; <a-spin size="small" />&ndash;&gt;-->
<!-- &lt;!&ndash; </template>&ndash;&gt;-->
<!-- <a-select-option v-for="item in userList" :key="item.id">-->
<!-- {{ item.nickname }}-->
<!-- </a-select-option>-->
<!-- </a-select>-->
<!-- </a-form-item>-->
<!-- </div>-->
<!-- <div style="display: flex">-->
<!-- <a-form-item style="width: 220px;margin-right: 16px;">-->
<!-- <a-range-picker-->
<!-- v-model:value="ruleForm.updated_at"-->
<!-- @change="handleUpdated"-->
<!-- :placeholder="['编辑开始日期', '结束日期']"-->
<!-- class="custom-date-picker"-->
<!-- />-->
<!-- </a-form-item>-->
<!-- </div>-->
<div style="display: flex">
<a-form-item class="button">
<a-button style="margin-right: 16px" ghost type="primary" @click="onSubmit">查询</a-button>
<a-button style="margin-right: 16px" ghost type="primary" @click="cancel">重置</a-button>
<a-button style="margin-right: 16px" ghost type="primary" @click="filter">更多筛选</a-button>
<a-button ghost type="primary"
class="download-btn share-button" @click="configVisible = true">列表配置</a-button>
<a-button ghost type="primary" @click="configVisible = true">列表配置</a-button>
</a-form-item>
</div>
</div>
</a-form>
<a-modal v-model:visible="visible" title="筛选" :footer="null">
<ScreenBox :info="ruleForm" @cancel="visible = false" @update="update" />
</a-modal>