添加搜索产品页面

This commit is contained in:
2025-05-08 15:49:37 +08:00
parent 72bd07080d
commit cd723a15fa
8 changed files with 148 additions and 3 deletions

View File

@@ -0,0 +1,26 @@
{extend name="public/base" /}
{block name="style"}
<link rel="stylesheet" href="__CSS__/product_search.css" type="text/css" />
{block name="main"}
<!--内容 -->
<div class="searchMain">
<!-- 搜索框 -->
<div class="search-ipt">
<input class="ssipt" placeholder="请搜索" />
<img src="static/index/images/ssico.png" class="ssico" />
</div>
<!-- 搜索结果列表-->
<ul class="seul">
<a>
<li class="seitme">
<img src="static/index/images/ORCIO-HSQ-02H-800-220.jpg" class="search-pr-img" />
<div class="prInfp">
<div class="txt1"><strong class="redpoint">电脑</strong>显示器支架</div>
<div class="txt2"> ORICO-HSQ-02Q </div>
<div class="txt3"> ORICO-HSQ-02Q </div>
</div>
</li>
</a>
</ul>
</div>
{/block}

View File

@@ -86,8 +86,11 @@
</ul>
</div>
</div>
<!-- 英文官网才有-->
<a class="storetopbt"><img src="__IMAGES__/shopico.png" class="storeImgico" />Store </a>
</div>
</div>
<!-- 搜索弹框-->
<div class="searchmodalMian" id="scmodal">
<div class="searchmodalct">
@@ -106,6 +109,7 @@
<a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{$vo.cover_image}"
class="popimg" /></a>
<div class="productName">{$vo.name}</div>
<div class="produc-dec">{$vo.name}</div>
</div>
{/volist}
</div>

View File

@@ -1,2 +1,2 @@
*
!.gitignore

View File

@@ -332,6 +332,9 @@
flex-direction: column;
justify-content: center;
width: 30%;
align-items: center;
overflow: hidden;
}
.header-PC .searchmodalMian .searchmodalct .searchhistory .popmain .popitem .popimg,
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .popimg {
@@ -344,7 +347,20 @@
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.8rem;
margin-top: 10%;
}
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .productName
{
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.header-PC .searchmodalMian .searchmodalct .popProduct .popmain .popitem .produc-dec{
font-size: 10px;
color: #000000;
margin-top: 1%;
}

View File

@@ -0,0 +1,94 @@
.orico_Page_search {
width: 100%;
position: relative;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
background: #f1f1f1;
}
.orico_Page_search .searchMain {
display: flex;
flex-direction: column;
justify-content: center;
background: #fff;
width: 60%;
margin: 0 auto;
margin-top: 60px;
margin-bottom: 20px;
overflow: hidden;
padding: 0 3.75rem;
padding-top: 2%;
padding-bottom: 60px;
}
.orico_Page_search .searchMain .search-ipt {
display: flex;
flex-direction: row;
background-color: #f1f1f1;
border: 1px solid #e3e8ec;
align-items: center;
}
.orico_Page_search .searchMain .search-ipt .ssipt {
width: 94%;
border: none;
background-color: #f1f1f1;
height: 52px;
line-height: 52px;
padding-left: 3%;
padding-right: 3%;
font-size: 1.1rem;
}
.orico_Page_search .searchMain .search-ipt .ssico {
width: 35px;
height: 35px;
margin-right: 2%;
cursor: pointer;
}
.orico_Page_search .searchMain .seul {
display: flex;
flex-direction: column;
padding-top: 2%;
padding-bottom: 60px;
}
.orico_Page_search .searchMain .seul .seitme {
cursor: pointer;
padding: 16px 0 10px 0;
border-bottom: 1px solid #f3f3f3;
display: flex;
flex-direction: row;
}
.orico_Page_search .searchMain .seul .seitme .search-pr-img {
float: left;
padding: 9px 10px;
border: 1px solid #e7e7e7;
overflow: hidden;
width: 140px;
}
.orico_Page_search .searchMain .seul .seitme .prInfp {
display: flex;
flex-direction: column;
max-width: 70%;
margin: 11px 10px 0;
}
.orico_Page_search .searchMain .seul .seitme .prInfp .txt1 {
font-size: 1.125rem;
color: #333;
}
.orico_Page_search .searchMain .seul .seitme .prInfp .txt2 {
font-size: 0.875rem;
color: #737373;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.25rem;
}
.orico_Page_search .searchMain .seul .seitme .prInfp .txt3 {
font-size: 0.875rem;
color: #737373;
}
.orico_Page_search .searchMain .seul .seitme .prInfp .redpoint {
font-weight: bold;
color: rgb(255, 0, 0);
}
.orico_Page_search .searchMain ::placeholder {
color: #737373;
}

View File

@@ -39,7 +39,6 @@
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
}
body {
font-size: 1.2em;
font-weight: 400;
@@ -151,3 +150,9 @@ a {
*::-moz-scrollbar-button:vertical:increment {
display: none;
}
div{
display: block;
}
#header{
height: 60px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB