mirror of
https://gitee.com/zongzhige/shopxo.git
synced 2026-06-07 02:12:25 +08:00
小程序页面设计新增头部搜索
This commit is contained in:
Devil
@ -2,154 +2,26 @@
|
||||
* 搜索
|
||||
*/
|
||||
.search {
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
background: #d2364c;
|
||||
padding: 20rpx 10rpx 25rpx 20rpx;
|
||||
}
|
||||
.search-content {
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.search icon {
|
||||
position: absolute;
|
||||
left: 15rpx;
|
||||
top: calc(50% - 16rpx);
|
||||
}
|
||||
.search input {
|
||||
width: calc(100% - 328rpx);
|
||||
padding-left: 15rpx;
|
||||
font-size: 24rpx;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.search input,.search-btn button {
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
.search-btn button {
|
||||
color: #fff;
|
||||
width: 150rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.search-btn button:first-child {
|
||||
background: #ff8c00;
|
||||
border: 1px solid #ff8c00;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.search-btn button:last-child {
|
||||
background: #483E39;
|
||||
border: 1px solid #483E39;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 头部
|
||||
*/
|
||||
.header {
|
||||
padding: 20rpx 10rpx;
|
||||
}
|
||||
.shop-logo {
|
||||
width: 280rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.base-bottom image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.header .base {
|
||||
width: calc(100% - 320rpx);
|
||||
}
|
||||
.shop-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.shop-auth-icon {
|
||||
background-color: #f4c985;
|
||||
border: 1px solid #e7ba77;
|
||||
border-radius: 6rpx;
|
||||
color: #856651;
|
||||
text-align: center;
|
||||
padding: 2rpx 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 客服
|
||||
*/
|
||||
.header-service {
|
||||
width: 400rpx;
|
||||
position: absolute;
|
||||
left: 80rpx;
|
||||
top: 210rpx;
|
||||
z-index: 2;
|
||||
font-size: 24rpx;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.header-service image {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
.header-service .item {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动
|
||||
*/
|
||||
.nav-roll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
padding-left: 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-roll .item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航
|
||||
*/
|
||||
.nav {
|
||||
height: 70rpx;
|
||||
border-bottom: 1px solid #d2364c;
|
||||
}
|
||||
.nav .nav-scroll {
|
||||
float: right;
|
||||
width: calc(100% - 230rpx);
|
||||
}
|
||||
.nav .item {
|
||||
padding: 0 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-shop-category {
|
||||
padding-right: 38rpx !important;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航商品分类
|
||||
*/
|
||||
.nav-category {
|
||||
background: #d2364c;
|
||||
width: 220rpx;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
margin-top: 50rpx;
|
||||
border: 1px solid #d2364c;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.nav-category .category-scroll {
|
||||
max-height: 600rpx;
|
||||
}
|
||||
.nav-category .item {
|
||||
padding: 15rpx 20rpx;
|
||||
display: block;
|
||||
font-weight: inherit;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
.nav-category .item:not(:last-child) {
|
||||
border-bottom: 1px solid #c72e44;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
@ -1,4 +1,14 @@
|
||||
<view a:if="{{(data || null) != null}}">
|
||||
<!-- 搜索 -->
|
||||
<block a:if="{{(data.is_header || 0) == 1}}">
|
||||
<view class="search wh-auto">
|
||||
<view class="search-content bg-white oh">
|
||||
<icon type="search" size="16" />
|
||||
<input type="text" confirm-type="search" placeholder="其实搜索很简单^_^！" class="wh-auto cr-888" bindconfirm="search_input_event" confirm-type="search" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 拖拽模式、引入拖拽数据模块 -->
|
||||
<component-layout data="{{layout_data}}"></component-layout>
|
||||
|
||||
|
||||
@ -71,6 +71,20 @@ Page({
|
||||
this.get_data();
|
||||
},
|
||||
|
||||
// 搜索事件
|
||||
search_input_event(e) {
|
||||
var keywords = e.detail.value || null;
|
||||
if (keywords == null) {
|
||||
app.showToast('请输入搜索关键字');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 进入搜索页面
|
||||
my.navigateTo({
|
||||
url: '/pages/goods-search/goods-search?keywords='+keywords
|
||||
});
|
||||
},
|
||||
|
||||
// 自定义分享
|
||||
onShareAppMessage() {
|
||||
var user_id = app.get_user_cache_info('id', 0) || 0;
|
||||
|
||||
@ -2,154 +2,26 @@
|
||||
* 搜索
|
||||
*/
|
||||
.search {
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
background: #d2364c;
|
||||
padding: 20rpx 10rpx 25rpx 20rpx;
|
||||
}
|
||||
.search-content {
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.search icon {
|
||||
position: absolute;
|
||||
left: 15rpx;
|
||||
top: calc(50% - 16rpx);
|
||||
}
|
||||
.search input {
|
||||
width: calc(100% - 328rpx);
|
||||
padding-left: 15rpx;
|
||||
font-size: 24rpx;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.search input,.search-btn button {
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
.search-btn button {
|
||||
color: #fff;
|
||||
width: 150rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.search-btn button:first-child {
|
||||
background: #ff8c00;
|
||||
border: 1px solid #ff8c00;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.search-btn button:last-child {
|
||||
background: #483E39;
|
||||
border: 1px solid #483E39;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 头部
|
||||
*/
|
||||
.header {
|
||||
padding: 20rpx 10rpx;
|
||||
}
|
||||
.shop-logo {
|
||||
width: 280rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.base-bottom image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.header .base {
|
||||
width: calc(100% - 320rpx);
|
||||
}
|
||||
.shop-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.shop-auth-icon {
|
||||
background-color: #f4c985;
|
||||
border: 1px solid #e7ba77;
|
||||
border-radius: 6rpx;
|
||||
color: #856651;
|
||||
text-align: center;
|
||||
padding: 2rpx 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 客服
|
||||
*/
|
||||
.header-service {
|
||||
width: 400rpx;
|
||||
position: absolute;
|
||||
left: 80rpx;
|
||||
top: 210rpx;
|
||||
z-index: 2;
|
||||
font-size: 24rpx;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.header-service image {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
.header-service .item {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动
|
||||
*/
|
||||
.nav-roll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
padding-left: 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-roll .item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航
|
||||
*/
|
||||
.nav {
|
||||
height: 70rpx;
|
||||
border-bottom: 1px solid #d2364c;
|
||||
}
|
||||
.nav .nav-scroll {
|
||||
float: right;
|
||||
width: calc(100% - 230rpx);
|
||||
}
|
||||
.nav .item {
|
||||
padding: 0 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-shop-category {
|
||||
padding-right: 38rpx !important;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航商品分类
|
||||
*/
|
||||
.nav-category {
|
||||
background: #d2364c;
|
||||
width: 220rpx;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
margin-top: 50rpx;
|
||||
border: 1px solid #d2364c;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.nav-category .category-scroll {
|
||||
max-height: 600rpx;
|
||||
}
|
||||
.nav-category .item {
|
||||
padding: 15rpx 20rpx;
|
||||
display: block;
|
||||
font-weight: inherit;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
.nav-category .item:not(:last-child) {
|
||||
border-bottom: 1px solid #c72e44;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
@ -77,6 +77,20 @@ Page({
|
||||
this.get_data();
|
||||
},
|
||||
|
||||
// 搜索事件
|
||||
search_input_event(e) {
|
||||
var keywords = e.detail.value || null;
|
||||
if (keywords == null) {
|
||||
app.showToast("请输入搜索关键字");
|
||||
return false;
|
||||
}
|
||||
|
||||
// 进入搜索页面
|
||||
swan.navigateTo({
|
||||
url: '/pages/goods-search/goods-search?keywords=' + keywords
|
||||
});
|
||||
},
|
||||
|
||||
// 自定义分享
|
||||
onShareAppMessage() {
|
||||
var user_id = app.get_user_cache_info('id', 0) || 0;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
{
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarBackgroundColor": "#d2364c",
|
||||
"backgroundColorTop": "#d2364c",
|
||||
"usingComponents": {
|
||||
"component-layout": "/components/layout/layout"
|
||||
}
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
<view s-if="(data || null) != null">
|
||||
<!-- 搜索 -->
|
||||
<block s-if="(data.is_header || 0) == 1">
|
||||
<view class="search wh-auto">
|
||||
<view class="search-content bg-white oh">
|
||||
<icon type="search" size="16" />
|
||||
<input type="text" confirm-type="search" placeholder="其实搜索很简单^_^！" class="wh-auto cr-888" bindconfirm="search_input_event" confirm-type="search" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 拖拽模式、引入拖拽数据模块 -->
|
||||
<component-layout prop-data="{{layout_data}}"></component-layout>
|
||||
|
||||
|
||||
@ -72,6 +72,20 @@ Page({
|
||||
this.get_data();
|
||||
},
|
||||
|
||||
// 搜索事件
|
||||
search_input_event(e) {
|
||||
var keywords = e.detail.value || null;
|
||||
if (keywords == null) {
|
||||
app.showToast("请输入搜索关键字");
|
||||
return false;
|
||||
}
|
||||
|
||||
// 进入搜索页面
|
||||
qq.navigateTo({
|
||||
url: '/pages/goods-search/goods-search?keywords='+keywords
|
||||
});
|
||||
},
|
||||
|
||||
// 自定义分享
|
||||
onShareAppMessage() {
|
||||
var user_id = app.get_user_cache_info('id', 0) || 0;
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
{
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarBackgroundColor": "#d2364c",
|
||||
"backgroundColorTop": "#d2364c",
|
||||
"backgroundColorBottom": "#f5f5f5",
|
||||
"backgroundTextStyle": "light",
|
||||
"usingComponents": {
|
||||
"component-layout": "/components/layout/layout"
|
||||
}
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
<view qq:if="{{(data || null) != null}}">
|
||||
<!-- 搜索 -->
|
||||
<block qq:if="{{(data.is_header || 0) == 1}}">
|
||||
<view class="search wh-auto">
|
||||
<view class="search-content bg-white oh">
|
||||
<icon type="search" size="16" />
|
||||
<input type="text" confirm-type="search" placeholder="其实搜索很简单^_^！" class="wh-auto cr-888" bindconfirm="search_input_event" confirm-type="search" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 拖拽模式、引入拖拽数据模块 -->
|
||||
<component-layout prop-data="{{layout_data}}"></component-layout>
|
||||
|
||||
|
||||
@ -2,154 +2,26 @@
|
||||
* 搜索
|
||||
*/
|
||||
.search {
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
background: #d2364c;
|
||||
padding: 20rpx 10rpx 25rpx 20rpx;
|
||||
}
|
||||
.search-content {
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.search icon {
|
||||
position: absolute;
|
||||
left: 15rpx;
|
||||
top: calc(50% - 16rpx);
|
||||
}
|
||||
.search input {
|
||||
width: calc(100% - 328rpx);
|
||||
padding-left: 15rpx;
|
||||
font-size: 24rpx;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.search input,.search-btn button {
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
.search-btn button {
|
||||
color: #fff;
|
||||
width: 150rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.search-btn button:first-child {
|
||||
background: #ff8c00;
|
||||
border: 1px solid #ff8c00;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.search-btn button:last-child {
|
||||
background: #483E39;
|
||||
border: 1px solid #483E39;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 头部
|
||||
*/
|
||||
.header {
|
||||
padding: 20rpx 10rpx;
|
||||
}
|
||||
.shop-logo {
|
||||
width: 280rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.base-bottom image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.header .base {
|
||||
width: calc(100% - 320rpx);
|
||||
}
|
||||
.shop-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.shop-auth-icon {
|
||||
background-color: #f4c985;
|
||||
border: 1px solid #e7ba77;
|
||||
border-radius: 6rpx;
|
||||
color: #856651;
|
||||
text-align: center;
|
||||
padding: 2rpx 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 客服
|
||||
*/
|
||||
.header-service {
|
||||
width: 400rpx;
|
||||
position: absolute;
|
||||
left: 80rpx;
|
||||
top: 210rpx;
|
||||
z-index: 2;
|
||||
font-size: 24rpx;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.header-service image {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
.header-service .item {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动
|
||||
*/
|
||||
.nav-roll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
padding-left: 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-roll .item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航
|
||||
*/
|
||||
.nav {
|
||||
height: 70rpx;
|
||||
border-bottom: 1px solid #d2364c;
|
||||
}
|
||||
.nav .nav-scroll {
|
||||
float: right;
|
||||
width: calc(100% - 230rpx);
|
||||
}
|
||||
.nav .item {
|
||||
padding: 0 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-shop-category {
|
||||
padding-right: 38rpx !important;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航商品分类
|
||||
*/
|
||||
.nav-category {
|
||||
background: #d2364c;
|
||||
width: 220rpx;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
margin-top: 50rpx;
|
||||
border: 1px solid #d2364c;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.nav-category .category-scroll {
|
||||
max-height: 600rpx;
|
||||
}
|
||||
.nav-category .item {
|
||||
padding: 15rpx 20rpx;
|
||||
display: block;
|
||||
font-weight: inherit;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
.nav-category .item:not(:last-child) {
|
||||
border-bottom: 1px solid #c72e44;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
@ -72,6 +72,20 @@ Page({
|
||||
this.get_data();
|
||||
},
|
||||
|
||||
// 搜索事件
|
||||
search_input_event(e) {
|
||||
var keywords = e.detail.value || null;
|
||||
if (keywords == null) {
|
||||
app.showToast("请输入搜索关键字");
|
||||
return false;
|
||||
}
|
||||
|
||||
// 进入搜索页面
|
||||
tt.navigateTo({
|
||||
url: '/pages/goods-search/goods-search?keywords='+keywords
|
||||
});
|
||||
},
|
||||
|
||||
// 自定义分享
|
||||
onShareAppMessage() {
|
||||
var user_id = app.get_user_cache_info('id', 0) || 0;
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
{
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarBackgroundColor": "#d2364c",
|
||||
"backgroundColorTop": "#d2364c",
|
||||
"backgroundColorBottom": "#f5f5f5",
|
||||
"backgroundTextStyle": "light",
|
||||
"usingComponents": {
|
||||
"component-layout": "/components/layout/layout"
|
||||
}
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
<view tt:if="{{(data || null) != null}}">
|
||||
<!-- 搜索 -->
|
||||
<block tt:if="{{(data.is_header || 0) == 1}}">
|
||||
<view class="search wh-auto">
|
||||
<view class="search-content bg-white oh">
|
||||
<icon type="search" size="16" />
|
||||
<input type="text" confirm-type="search" placeholder="其实搜索很简单^_^！" class="wh-auto cr-888" bindconfirm="search_input_event" confirm-type="search" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 拖拽模式、引入拖拽数据模块 -->
|
||||
<component-layout prop-data="{{layout_data}}"></component-layout>
|
||||
|
||||
|
||||
@ -2,154 +2,26 @@
|
||||
* 搜索
|
||||
*/
|
||||
.search {
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
background: #d2364c;
|
||||
padding: 20rpx 10rpx 25rpx 20rpx;
|
||||
}
|
||||
.search-content {
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.search icon {
|
||||
position: absolute;
|
||||
left: 15rpx;
|
||||
top: calc(50% - 16rpx);
|
||||
}
|
||||
.search input {
|
||||
width: calc(100% - 328rpx);
|
||||
padding-left: 15rpx;
|
||||
font-size: 24rpx;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.search input,.search-btn button {
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
.search-btn button {
|
||||
color: #fff;
|
||||
width: 150rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.search-btn button:first-child {
|
||||
background: #ff8c00;
|
||||
border: 1px solid #ff8c00;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.search-btn button:last-child {
|
||||
background: #483E39;
|
||||
border: 1px solid #483E39;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 头部
|
||||
*/
|
||||
.header {
|
||||
padding: 20rpx 10rpx;
|
||||
}
|
||||
.shop-logo {
|
||||
width: 280rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.base-bottom image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.header .base {
|
||||
width: calc(100% - 320rpx);
|
||||
}
|
||||
.shop-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.shop-auth-icon {
|
||||
background-color: #f4c985;
|
||||
border: 1px solid #e7ba77;
|
||||
border-radius: 6rpx;
|
||||
color: #856651;
|
||||
text-align: center;
|
||||
padding: 2rpx 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 客服
|
||||
*/
|
||||
.header-service {
|
||||
width: 400rpx;
|
||||
position: absolute;
|
||||
left: 80rpx;
|
||||
top: 210rpx;
|
||||
z-index: 2;
|
||||
font-size: 24rpx;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.header-service image {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
.header-service .item {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动
|
||||
*/
|
||||
.nav-roll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
padding-left: 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-roll .item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航
|
||||
*/
|
||||
.nav {
|
||||
height: 70rpx;
|
||||
border-bottom: 1px solid #d2364c;
|
||||
}
|
||||
.nav .nav-scroll {
|
||||
float: right;
|
||||
width: calc(100% - 230rpx);
|
||||
}
|
||||
.nav .item {
|
||||
padding: 0 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-shop-category {
|
||||
padding-right: 38rpx !important;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航商品分类
|
||||
*/
|
||||
.nav-category {
|
||||
background: #d2364c;
|
||||
width: 220rpx;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
margin-top: 50rpx;
|
||||
border: 1px solid #d2364c;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.nav-category .category-scroll {
|
||||
max-height: 600rpx;
|
||||
}
|
||||
.nav-category .item {
|
||||
padding: 15rpx 20rpx;
|
||||
display: block;
|
||||
font-weight: inherit;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
.nav-category .item:not(:last-child) {
|
||||
border-bottom: 1px solid #c72e44;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
@ -75,6 +75,20 @@ Page({
|
||||
this.get_data();
|
||||
},
|
||||
|
||||
// 搜索事件
|
||||
search_input_event(e) {
|
||||
var keywords = e.detail.value || null;
|
||||
if (keywords == null) {
|
||||
app.showToast("请输入搜索关键字");
|
||||
return false;
|
||||
}
|
||||
|
||||
// 进入搜索页面
|
||||
wx.navigateTo({
|
||||
url: '/pages/goods-search/goods-search?keywords='+keywords
|
||||
});
|
||||
},
|
||||
|
||||
// 自定义分享
|
||||
onShareAppMessage() {
|
||||
var user_id = app.get_user_cache_info('id', 0) || 0;
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
{
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationBarBackgroundColor": "#d2364c",
|
||||
"backgroundColorTop": "#d2364c",
|
||||
"backgroundColorBottom": "#f5f5f5",
|
||||
"backgroundTextStyle": "light",
|
||||
"usingComponents": {
|
||||
"component-layout": "/components/layout/layout"
|
||||
}
|
||||
|
||||
@ -1,4 +1,14 @@
|
||||
<view wx:if="{{(data || null) != null}}">
|
||||
<!-- 搜索 -->
|
||||
<block wx:if="{{(data.is_header || 0) == 1}}">
|
||||
<view class="search wh-auto">
|
||||
<view class="search-content bg-white oh">
|
||||
<icon type="search" size="16" />
|
||||
<input type="text" confirm-type="search" placeholder="其实搜索很简单^_^！" class="wh-auto cr-888" bindconfirm="search_input_event" confirm-type="search" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 拖拽模式、引入拖拽数据模块 -->
|
||||
<component-layout prop-data="{{layout_data}}"></component-layout>
|
||||
|
||||
|
||||
@ -2,154 +2,26 @@
|
||||
* 搜索
|
||||
*/
|
||||
.search {
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
background: #d2364c;
|
||||
padding: 20rpx 10rpx 25rpx 20rpx;
|
||||
}
|
||||
.search-content {
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.search icon {
|
||||
position: absolute;
|
||||
left: 15rpx;
|
||||
top: calc(50% - 16rpx);
|
||||
}
|
||||
.search input {
|
||||
width: calc(100% - 328rpx);
|
||||
padding-left: 15rpx;
|
||||
font-size: 24rpx;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.search input,.search-btn button {
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
}
|
||||
.search-btn button {
|
||||
color: #fff;
|
||||
width: 150rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.search-btn button:first-child {
|
||||
background: #ff8c00;
|
||||
border: 1px solid #ff8c00;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.search-btn button:last-child {
|
||||
background: #483E39;
|
||||
border: 1px solid #483E39;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 头部
|
||||
*/
|
||||
.header {
|
||||
padding: 20rpx 10rpx;
|
||||
}
|
||||
.shop-logo {
|
||||
width: 280rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
.base-bottom image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
.header .base {
|
||||
width: calc(100% - 320rpx);
|
||||
}
|
||||
.shop-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.shop-auth-icon {
|
||||
background-color: #f4c985;
|
||||
border: 1px solid #e7ba77;
|
||||
border-radius: 6rpx;
|
||||
color: #856651;
|
||||
text-align: center;
|
||||
padding: 2rpx 12rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 客服
|
||||
*/
|
||||
.header-service {
|
||||
width: 400rpx;
|
||||
position: absolute;
|
||||
left: 80rpx;
|
||||
top: 210rpx;
|
||||
z-index: 2;
|
||||
font-size: 24rpx;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.header-service image {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
}
|
||||
.header-service .item {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动
|
||||
*/
|
||||
.nav-roll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 28rpx;
|
||||
padding-left: 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.nav-roll .item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航
|
||||
*/
|
||||
.nav {
|
||||
height: 70rpx;
|
||||
border-bottom: 1px solid #d2364c;
|
||||
}
|
||||
.nav .nav-scroll {
|
||||
float: right;
|
||||
width: calc(100% - 230rpx);
|
||||
}
|
||||
.nav .item {
|
||||
padding: 0 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.nav-shop-category {
|
||||
padding-right: 38rpx !important;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航商品分类
|
||||
*/
|
||||
.nav-category {
|
||||
background: #d2364c;
|
||||
width: 220rpx;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
margin-top: 50rpx;
|
||||
border: 1px solid #d2364c;
|
||||
-webkit-box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
|
||||
}
|
||||
.nav-category .category-scroll {
|
||||
max-height: 600rpx;
|
||||
}
|
||||
.nav-category .item {
|
||||
padding: 15rpx 20rpx;
|
||||
display: block;
|
||||
font-weight: inherit;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
.nav-category .item:not(:last-child) {
|
||||
border-bottom: 1px solid #c72e44;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user