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

feat: 优化搜索页面和组件样式

Browse Source 
1. 修改 SurveyItem 组件布局和样式
2. 更新搜索页面背景色为渐变色
3. 调整模板市场列表容器高度和滚动
4. 优化我的任务列表样式
5. 更新公共布局样式
This commit is contained in:
Huangzhe
2025-05-16 14:03:01 +08:00
parent 5ce7025ebb
commit a66a3594b5
20 changed files with 249 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/main.scss
View File

@@ -50,7 +50,8 @@ a,
position: sticky;
top: 0;
width: 100%;
background-color: theme.$nav-header-color;
// background-color: linear-gradient(to bottom, theme.$theme-color 200px, theme.$nav-color 300px);
background: url("../img/home/nav.png") theme.$nav-color;
color: #000;
& .van-nav-bar__content {

1
src/assets/css/theme.scss
View File

@@ -2,3 +2,4 @@ $theme-color: #71b73c;
$card-radius: 10px;
$gap: 10px;
$nav-header-color: #f2f2f2;
$nav-color: #EEFDE8;

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

14
src/assets/img/search/clock.svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 10</title>
<g id="智慧洞察移动端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="搜索结果" transform="translate(-84, -363)">
<g id="编组-2" transform="translate(12, 317)">
<g id="编组-10" transform="translate(72, 46)">
<circle id="椭圆形" fill="#A6B5D4" cx="6" cy="6" r="6"></circle>
<polyline id="路径-10" stroke="#FFFFFF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" points="6 2.88992066 6 6.12446761 7.76545306 7.88992066"></polyline>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 851 B

19
src/assets/img/search/date.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="15px" viewBox="0 0 14 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 14备份@3x</title>
<g id="智慧洞察移动端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="搜索结果" transform="translate(-26, -540)">
<g id="编组-5" transform="translate(12, 525)">
<g id="编组-14备份" transform="translate(14, 15)">
<g id="编组-2" transform="translate(0, 1.1822)">
<g id="编组" fill="#70B937" fill-rule="nonzero">
<path d="M10.7279175,0 L12.4377727,0.0012618325 C13.2959726,0.00304293479 13.991346,0.698929752 13.9924938,1.55713071 L13.9924938,11.9935414 C13.992119,12.5029341 13.5448657,12.9157157 12.9930902,12.9161481 L0.999497307,12.9161481 C0.447628059,12.9157157 0.000468499722,12.5029341 0,11.9935414 L0,1.55713071 C0.00116140984,0.698935074 0.696526567,0.00305046401 1.5547211,0.00124820366 L3.22625306,0 L10.7279175,0 Z M10.7271526,1.03648073 L3.22702704,1.03648073 L1.55689777,1.03772694 C1.26973731,1.03832999 1.03686869,1.27137257 1.03648102,1.55713071 L1.03596278,11.8796272 L12.9560137,11.8796272 L12.9560137,1.55851692 C12.9556571,1.29187789 12.7548504,1.07190278 12.4973675,1.04136258 L12.4370078,1.03774257 L10.7271526,1.03648073 Z" id="Fill-1"></path>
</g>
<path d="M10.0851016,6.89811202 L6.69516735,10.1052183 C6.59219832,10.201667 6.45690281,10.2550044 6.31650425,10.2544193 L6.29581098,10.2544193 C6.14801734,10.248777 6.00854858,10.183815 5.90836892,10.0738845 L4.25362069,8.25106013 C4.04694745,8.02324532 4.06214846,7.66928676 4.2875689,7.46050387 C4.51292448,7.25165542 4.86321812,7.26701642 5.06989136,7.49483123 L6.34675492,8.90070159 L9.32928902,6.07991469 C9.55464459,5.87805845 9.8982567,5.89459939 10.1035028,6.11730114 C10.3088354,6.33989364 10.3009863,6.68747182 10.0857719,6.90034078 L10.0851016,6.89811202 Z" id="路径" fill="#3171F3"></path>
</g>
<path d="M13.3195843,4.72886505 C13.6058006,4.72886505 13.8378248,4.96088923 13.8378248,5.24710556 C13.8378248,5.53332189 13.6058006,5.76534607 13.3195843,5.76534607 L0.635092946,5.76534607 C0.348876615,5.76534607 0.116852435,5.53332189 0.116852435,5.24710556 C0.116852435,4.96088923 0.348876615,4.72886505 0.635092946,4.72886505 L13.3195843,4.72886505 Z M3.54473832,0 C3.83095465,0 4.06297883,0.23202418 4.06297883,0.518240511 L4.06297883,2.13275903 C4.06297883,2.41897536 3.83095465,2.65099954 3.54473832,2.65099954 C3.25852199,2.65099954 3.02649781,2.41897536 3.02649781,2.13275903 L3.02649781,0.518240511 C3.02649781,0.23202418 3.25852199,0 3.54473832,0 Z M10.0028124,0 C10.2890287,0 10.5210529,0.23202418 10.5210529,0.518240511 L10.5210529,2.13275903 C10.5210529,2.41897536 10.2890287,2.65099954 10.0028124,2.65099954 C9.71659605,2.65099954 9.48457187,2.41897536 9.48457187,2.13275903 L9.48457187,0.518240511 C9.48457187,0.23202418 9.71659605,0 10.0028124,0 Z" id="形状结合" fill="#70B937" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

20
src/assets/img/search/people.svg Normal file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 2备份 2</title>
<defs>
<polygon id="path-1" points="0 0 11 0 11 12 0 12"></polygon>
</defs>
<g id="智慧洞察移动端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="搜索结果" transform="translate(-25, -362)">
<g id="编组-2" transform="translate(12, 317)">
<g id="编组" transform="translate(13, 45)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M8.43359974,0.884152544 L8.43359974,0.476428554 C8.43359974,0.213278168 8.22246925,0 7.96213329,0 C7.70174208,0 7.49068525,0.213278168 7.49068525,0.476428554 L7.49068525,0.884152544 L3.47918745,0.884152544 L3.47918745,0.476428554 C3.47918745,0.213278168 3.26805696,0 3.007721,0 C2.74738504,0 2.53627296,0.213278168 2.53627296,0.476428554 L2.53627296,0.884152544 C1.13519282,0.885297914 -9.09050613e-13,2.02141912 -9.09050613e-13,3.42249973 L-9.09494702e-13,11.2059896 L-9.09494702e-13,11.2059896 C0.000368304393,11.6443813 0.351896433,11.9996278 0.785740593,12 L10.2143331,12 C10.6481036,11.9996278 10.9997054,11.6443813 11,11.2059896 L11,3.45262702 C11,2.03490757 9.85131873,0.885297911 8.43359974,0.884152544 L8.43359974,0.884152544 L8.43359974,0.884152544 Z" id="Fill-1" fill="#A6B5D4" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

14
src/assets/img/search/编组 10(1).svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 10</title>
<g id="智慧洞察移动端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="搜索结果" transform="translate(-84, -450)">
<g id="编组-2备份" transform="translate(12, 404)">
<g id="编组-10" transform="translate(72, 46)">
<circle id="椭圆形" fill="#A6B5D4" cx="6" cy="6" r="6"></circle>
<polyline id="路径-10" stroke="#FFFFFF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" points="6 2.88992066 6 6.12446761 7.76545306 7.88992066"></polyline>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 857 B

19
src/assets/img/search/编组 14备份 2.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="15px" viewBox="0 0 14 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 14备份 2@3x</title>
<g id="智慧洞察移动端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="搜索结果" transform="translate(-26, -714)">
<g id="编组-5备份-2" transform="translate(12, 699)">
<g id="编组-14备份-2" transform="translate(14, 15)">
<g id="编组-2" transform="translate(0, 1.1822)">
<g id="编组" fill="#70B937" fill-rule="nonzero">
<path d="M10.7279175,0 L12.4377727,0.0012618325 C13.2959726,0.00304293479 13.991346,0.698929752 13.9924938,1.55713071 L13.9924938,11.9935414 C13.992119,12.5029341 13.5448657,12.9157157 12.9930902,12.9161481 L0.999497307,12.9161481 C0.447628059,12.9157157 0.000468499722,12.5029341 0,11.9935414 L0,1.55713071 C0.00116140984,0.698935074 0.696526567,0.00305046401 1.5547211,0.00124820366 L3.22625306,0 L10.7279175,0 Z M10.7271526,1.03648073 L3.22702704,1.03648073 L1.55689777,1.03772694 C1.26973731,1.03832999 1.03686869,1.27137257 1.03648102,1.55713071 L1.03596278,11.8796272 L12.9560137,11.8796272 L12.9560137,1.55851692 C12.9556571,1.29187789 12.7548504,1.07190278 12.4973675,1.04136258 L12.4370078,1.03774257 L10.7271526,1.03648073 Z" id="Fill-1"></path>
</g>
<path d="M10.0851016,6.89811202 L6.69516735,10.1052183 C6.59219832,10.201667 6.45690281,10.2550044 6.31650425,10.2544193 L6.29581098,10.2544193 C6.14801734,10.248777 6.00854858,10.183815 5.90836892,10.0738845 L4.25362069,8.25106013 C4.04694745,8.02324532 4.06214846,7.66928676 4.2875689,7.46050387 C4.51292448,7.25165542 4.86321812,7.26701642 5.06989136,7.49483123 L6.34675492,8.90070159 L9.32928902,6.07991469 C9.55464459,5.87805845 9.8982567,5.89459939 10.1035028,6.11730114 C10.3088354,6.33989364 10.3009863,6.68747182 10.0857719,6.90034078 L10.0851016,6.89811202 Z" id="路径" fill="#3171F3"></path>
</g>
<path d="M13.3195843,4.72886505 C13.6058006,4.72886505 13.8378248,4.96088923 13.8378248,5.24710556 C13.8378248,5.53332189 13.6058006,5.76534607 13.3195843,5.76534607 L0.635092946,5.76534607 C0.348876615,5.76534607 0.116852435,5.53332189 0.116852435,5.24710556 C0.116852435,4.96088923 0.348876615,4.72886505 0.635092946,4.72886505 L13.3195843,4.72886505 Z M3.54473832,0 C3.83095465,0 4.06297883,0.23202418 4.06297883,0.518240511 L4.06297883,2.13275903 C4.06297883,2.41897536 3.83095465,2.65099954 3.54473832,2.65099954 C3.25852199,2.65099954 3.02649781,2.41897536 3.02649781,2.13275903 L3.02649781,0.518240511 C3.02649781,0.23202418 3.25852199,0 3.54473832,0 Z M10.0028124,0 C10.2890287,0 10.5210529,0.23202418 10.5210529,0.518240511 L10.5210529,2.13275903 C10.5210529,2.41897536 10.2890287,2.65099954 10.0028124,2.65099954 C9.71659605,2.65099954 9.48457187,2.41897536 9.48457187,2.13275903 L9.48457187,0.518240511 C9.48457187,0.23202418 9.71659605,0 10.0028124,0 Z" id="形状结合" fill="#70B937" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

19
src/assets/img/search/编组 14备份(1).svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="15px" viewBox="0 0 14 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 14备份@3x</title>
<g id="智慧洞察移动端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="搜索结果" transform="translate(-26, -627)">
<g id="编组-5备份" transform="translate(12, 612)">
<g id="编组-14备份" transform="translate(14, 15)">
<g id="编组-2" transform="translate(0, 1.1822)">
<g id="编组" fill="#70B937" fill-rule="nonzero">
<path d="M10.7279175,0 L12.4377727,0.0012618325 C13.2959726,0.00304293479 13.991346,0.698929752 13.9924938,1.55713071 L13.9924938,11.9935414 C13.992119,12.5029341 13.5448657,12.9157157 12.9930902,12.9161481 L0.999497307,12.9161481 C0.447628059,12.9157157 0.000468499722,12.5029341 0,11.9935414 L0,1.55713071 C0.00116140984,0.698935074 0.696526567,0.00305046401 1.5547211,0.00124820366 L3.22625306,0 L10.7279175,0 Z M10.7271526,1.03648073 L3.22702704,1.03648073 L1.55689777,1.03772694 C1.26973731,1.03832999 1.03686869,1.27137257 1.03648102,1.55713071 L1.03596278,11.8796272 L12.9560137,11.8796272 L12.9560137,1.55851692 C12.9556571,1.29187789 12.7548504,1.07190278 12.4973675,1.04136258 L12.4370078,1.03774257 L10.7271526,1.03648073 Z" id="Fill-1"></path>
</g>
<path d="M10.0851016,6.89811202 L6.69516735,10.1052183 C6.59219832,10.201667 6.45690281,10.2550044 6.31650425,10.2544193 L6.29581098,10.2544193 C6.14801734,10.248777 6.00854858,10.183815 5.90836892,10.0738845 L4.25362069,8.25106013 C4.04694745,8.02324532 4.06214846,7.66928676 4.2875689,7.46050387 C4.51292448,7.25165542 4.86321812,7.26701642 5.06989136,7.49483123 L6.34675492,8.90070159 L9.32928902,6.07991469 C9.55464459,5.87805845 9.8982567,5.89459939 10.1035028,6.11730114 C10.3088354,6.33989364 10.3009863,6.68747182 10.0857719,6.90034078 L10.0851016,6.89811202 Z" id="路径" fill="#3171F3"></path>
</g>
<path d="M13.3195843,4.72886505 C13.6058006,4.72886505 13.8378248,4.96088923 13.8378248,5.24710556 C13.8378248,5.53332189 13.6058006,5.76534607 13.3195843,5.76534607 L0.635092946,5.76534607 C0.348876615,5.76534607 0.116852435,5.53332189 0.116852435,5.24710556 C0.116852435,4.96088923 0.348876615,4.72886505 0.635092946,4.72886505 L13.3195843,4.72886505 Z M3.54473832,0 C3.83095465,0 4.06297883,0.23202418 4.06297883,0.518240511 L4.06297883,2.13275903 C4.06297883,2.41897536 3.83095465,2.65099954 3.54473832,2.65099954 C3.25852199,2.65099954 3.02649781,2.41897536 3.02649781,2.13275903 L3.02649781,0.518240511 C3.02649781,0.23202418 3.25852199,0 3.54473832,0 Z M10.0028124,0 C10.2890287,0 10.5210529,0.23202418 10.5210529,0.518240511 L10.5210529,2.13275903 C10.5210529,2.41897536 10.2890287,2.65099954 10.0028124,2.65099954 C9.71659605,2.65099954 9.48457187,2.41897536 9.48457187,2.13275903 L9.48457187,0.518240511 C9.48457187,0.23202418 9.71659605,0 10.0028124,0 Z" id="形状结合" fill="#70B937" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

20
src/assets/img/search/编组 2备份 2(1).svg Normal file
View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 2备份 2</title>
<defs>
<polygon id="path-1" points="0 0 11 0 11 12 0 12"></polygon>
</defs>
<g id="智慧洞察移动端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="搜索结果" transform="translate(-25, -449)">
<g id="编组-2备份" transform="translate(12, 404)">
<g id="编组" transform="translate(13, 45)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M8.43359974,0.884152544 L8.43359974,0.476428554 C8.43359974,0.213278168 8.22246925,0 7.96213329,0 C7.70174208,0 7.49068525,0.213278168 7.49068525,0.476428554 L7.49068525,0.884152544 L3.47918745,0.884152544 L3.47918745,0.476428554 C3.47918745,0.213278168 3.26805696,0 3.007721,0 C2.74738504,0 2.53627296,0.213278168 2.53627296,0.476428554 L2.53627296,0.884152544 C1.13519282,0.885297914 -9.09050613e-13,2.02141912 -9.09050613e-13,3.42249973 L-9.09494702e-13,11.2059896 L-9.09494702e-13,11.2059896 C0.000368304393,11.6443813 0.351896433,11.9996278 0.785740593,12 L10.2143331,12 C10.6481036,11.9996278 10.9997054,11.6443813 11,11.2059896 L11,3.45262702 C11,2.03490757 9.85131873,0.885297911 8.43359974,0.884152544 L8.43359974,0.884152544 L8.43359974,0.884152544 Z" id="Fill-1" fill="#A6B5D4" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

14
src/assets/img/search/编组.svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组</title>
<g id="智慧洞察移动端" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="搜索结果" transform="translate(-20, -107)" fill="#B7C8AA">
<g id="编组-3" transform="translate(10, 97)">
<g id="编组" transform="translate(10, 10)">
<path d="M5.24050633,0.93164557 C2.86071598,0.93164557 0.931627373,2.86071598 0.931627373,5.24050633 C0.931627373,7.62031487 2.86071598,9.54938528 5.24050633,9.54938528 C7.62029668,9.54938528 9.54938528,7.62031487 9.54938528,5.24050633 C9.54938528,2.86071598 7.62029668,0.93164557 5.24050633,0.93164557 M5.24050633,0 C8.13477611,0 10.4810127,2.34625475 10.4810127,5.24050633 C10.4810127,8.13477611 8.13477611,10.4810127 5.24050633,10.4810127 C2.34623655,10.4810127 0,8.13477611 0,5.24050633 C0,2.34625475 2.34623655,0 5.24050633,0" id="Fill-1"></path>
<path d="M9.01067383,8.64621881 L11.8098556,11.0158426 C12.0467987,11.2164854 12.0623263,11.4321777 11.8562728,11.6629196 C11.6503113,11.8936615 11.4288222,11.9087827 11.191879,11.7082116 L8.39271567,9.33858782 C8.15569894,9.13794503 8.14024493,8.92225269 8.34620645,8.6915108 C8.55218637,8.4607689 8.7736755,8.44564768 9.01067383,8.64621881" id="Fill-3"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

15
src/components/Layout/CommonLayout.vue
View File

@@ -6,15 +6,17 @@ const show = ref<boolean>(true);
</script>
<template>
<div class="common-layout px-2 pt-1">
<div class="common-layout">
<div class="title">
<slot name="title">
<!-- title 部分 -->
<section v-if="title" class="pb-1">
<section v-if="title">
<header>{{ title }}</header>
</section>
</slot>
</div>
<!-- 后面主题部分 -->
<slot />
<slot class="content" />
</div>
</template>
@@ -22,4 +24,11 @@ const show = ref<boolean>(true);
.common-layout {
margin-bottom: 20px;
}
.title {
margin-bottom: 10px;
color: rgba(102, 102, 102, 1);
font-size: 13px;
font-family: PingFangSC;
}
</style>

2
src/components/Search/Index.vue
View File

@@ -38,7 +38,7 @@ function handleSearchActino() {
.search-container {
:deep(.van-search) {
padding: 0;
margin: 0 10px;
margin: 0 -10px;
border-radius: 0;
background-color: #f5f5f5;
}

33
src/components/SurveyItem/Index.vue
View File

@@ -1,22 +1,35 @@
<script setup lang="ts">
import { FcClock, FcBusinessman } from 'vue-icons-plus/fc';
import clock from '@/assets/img/search/clock.svg';
import people from '@/assets/img/search/people.svg';
const survey = defineModel<object>('survey', { required: true });
</script>
<template>
<div class="flex flex-col">
<div>
<h1>{{ survey.project_name }}</h1>
<el-space spacer="|" direction="horizontal">
<section class="flex items-center pt-1">
<fc-businessman /> <el-text>{{ survey.created_user }}</el-text>
<img :src="people" alt="" style="margin-right: 5px" />
<el-text>{{ survey.created_user }}</el-text>
</section>
<section class="flex items-center pt-1">
<fc-clock /> <el-text>创建时间{{ survey.created_at }}</el-text>
<img :src="clock" alt="" style="margin-right: 5px" />
<el-text>创建时间{{ survey.created_at }}</el-text>
</section>
</el-space>
</div>
</template>
<script setup lang="ts">
import { FcClock, FcBusinessman } from 'vue-icons-plus/fc';
<style lang="scss" scoped module="item">
@use '@/assets/css/theme';
const survey = defineModel<object>('survey', { required: true });
// console.log(survey.value);
</script>
<style scoped></style>
h1 {
margin: 17px 0 12px 0;
font-weight: 800;
line-height: 15px;
text-align: left;
font-style: normal;
}
</style>

2
src/components/TemplateMarketItem/Index.vue
View File

@@ -20,6 +20,4 @@
<script setup lang="ts">
const template = defineModel('template', { required: true });
console.log(template.value);
</script>

3
src/layouts/redirect.vue
View File

@@ -54,12 +54,13 @@ const handlePopState = () => {
</script>
<style scoped lang="scss">
@use '@/assets/css/theme';
@import '@/assets/css/main';
.common-layout {
overflow: hidden;
height: 100vh;
background-color: #f3f3f3;
background-color: theme.$nav-header-color;
color: #333;
}

33
src/views/HomeSearch/Index.vue
View File

@@ -17,13 +17,15 @@ onMounted(() => {
</script>
<template>
<section>
<section class="search-container">
<div class="search">
<search v-model:value="keyword as string" :search="handleSearch" />
</div>
<!-- 广告区域 -->
<image-slider :banners="banners" v-if="banners?.length" />
<section v-if="loading">
<!-- 我的问卷区域 -->
<section class="result" v-if="loading">
<!-- 我的任务区域 -->
<layout v-if="visible.mineSurvey" title="我的任务">
<mine-survey />
</layout>
@@ -36,15 +38,30 @@ onMounted(() => {
<section v-else>
<recommend-tag />
</section>
<!-- <div class="search-result">-->
<!-- <div class="search-result-item" v-for="item in searchResult" :key="item.id">-->
<!-- {{ item.name }}-->
<!-- </div>-->
<!-- </div>-->
</section>
</template>
<style scoped lang="scss">
@use '@/assets/css/theme';
.search-container {
.search {
padding-top: 10px;
padding-bottom: 20px;
background: linear-gradient(to bottom, #f8fef5, #f3f3f3);
}
// 搜索结果外部布局
.result {
padding: theme.$gap;
:deep(.van-cell) {
border-radius: theme.$card-radius;
overflow: hidden;
}
}
}
.search-result {
padding: 16px;

22
src/views/HomeSearch/components/MineSurvey/Index.vue
View File

@@ -24,22 +24,24 @@ function handleSurveyClick(survey: { sn: any }) {
</script>
<template>
<section class="survey-container">
<van-list :offset="10" :finished="lastIndex" @load="handleLoadStatus">
<van-card v-for="survey in surveys" :key="survey" class="rounded-xs">
<template #tags>
<van-list class="list-container" :offset="10" :finished="lastIndex" @load="handleLoadStatus">
<van-cell v-for="survey in surveys" :key="survey" class="list-item">
<template #extra>
<survey-item :survey="survey" @click="handleSurveyClick(survey)" />
</template>
</van-card>
</van-cell>
</van-list>
</section>
</template>
<style scoped lang="scss">
.survey-container {
min-height: 300px;
height: 30vh;
@use '@/assets/css/theme';
.list-container {
max-height: 30vh;
overflow: scroll;
padding: 0;
.list-item {
margin-top: theme.$gap;
}
}
</style>

19
src/views/HomeSearch/components/Recommend/Index.vue
View File

@@ -10,11 +10,11 @@ useFetchRecommon();
<template>
<section class="recommend-container">
<layout title="热门搜索">
<template #content>
<el-space>
<el-tag v-for="tag in list">{{ tag.key_word }}</el-tag>
<el-tag style="color: black" color="white" :hit="false" round v-for="tag in list">{{
tag.key_word
}}</el-tag>
</el-space>
</template>
</layout>
<layout>
@@ -23,12 +23,19 @@ useFetchRecommon();
<el-text>历史记录</el-text>
<div>
<el-icon><Delete /></el-icon>
清除
</div>
</section>
</template>
<el-space>
<el-tag @click="handleSearch(tag)" v-for="tag in history">{{ tag }}</el-tag>
<el-tag
style="color: black"
color="white"
:hit="false"
round
@click="handleSearch(tag)"
v-for="tag in history"
>{{ tag }}</el-tag
>
</el-space>
</layout>
</section>
@@ -39,7 +46,7 @@ useFetchRecommon();
.recommend-container {
margin-top: 20px;
padding: 0 theme.$card-radius;
padding: 0 (theme.$gap * 2);
}
.history-title {

7
src/views/HomeSearch/components/TemplateMarket/Index.vue
View File

@@ -77,3 +77,10 @@ function handleTemplateClick(template: any) {
/>
</section>
</template>
<style lang="scss" scoped>
.template-container {
max-height: 30vh;
overflow: scroll;
}
</style>