优化表单、地址选择等多个页面和组件
This commit is contained in:
parent
06836242f9
commit
4bdd10e784
64
src/App.vue
64
src/App.vue
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
this.$store.dispatch('system/initConfig');
|
||||
this.$store.dispatch("system/initConfig");
|
||||
},
|
||||
onShow: function () {},
|
||||
onHide: function () {},
|
||||
|
|
@ -44,4 +44,66 @@ export default {
|
|||
}
|
||||
}
|
||||
/* #endif */
|
||||
// 通用样式
|
||||
.search-placeholder {
|
||||
color: #bebebe;
|
||||
}
|
||||
.order-placeholder {
|
||||
color: #909090;
|
||||
}
|
||||
.address-placeholder {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
// 点击表单
|
||||
.form-widget-group {
|
||||
width: 100%;
|
||||
.widget-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.widget-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 2rpx;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
width: 100%;
|
||||
line-height: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #2d2d2d;
|
||||
padding: 44rpx 65rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.picker {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 44rpx;
|
||||
left: 30rpx;
|
||||
color: #8194f2;
|
||||
}
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 44rpx;
|
||||
color: #a7a7a7;
|
||||
font-size: 37rpx;
|
||||
}
|
||||
.iconfont.icon-dingwei {
|
||||
font-size: 44rpx;
|
||||
top: 38rpx;
|
||||
}
|
||||
.iconfont.icon-shijian {
|
||||
font-size: 40rpx;
|
||||
top: 38rpx;
|
||||
}
|
||||
.iconfont.icon-jinru {
|
||||
font-size: 37rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<view class="input-box">
|
||||
<view class="icon">
|
||||
<text class="iconfont icon-sousuo"></text>
|
||||
</view>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
:model="keywords"
|
||||
placeholder="搜索您需要的服务"
|
||||
placeholder-class="search-placeholder"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "widgets-search",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
components: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
destroyed() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.input-box {
|
||||
width: 670rpx;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 65rpx;
|
||||
.icon,
|
||||
.input {
|
||||
color: #bebebe;
|
||||
}
|
||||
.icon {
|
||||
width: 85rpx;
|
||||
height: 65rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.input {
|
||||
width: 585rpx;
|
||||
height: 65rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<app-layout
|
||||
headerBackgroundColor="#F6F6F6"
|
||||
title="我的地址"
|
||||
:title="pageTitle"
|
||||
textColor="dark"
|
||||
backgroundColor="#F6F6F6"
|
||||
>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
@click="selectAddress(item)"
|
||||
@longpress="deleteAddress(item.id, index)"
|
||||
>
|
||||
<view class="checkbox">
|
||||
<view v-if="openType == 'choose'" class="checkbox">
|
||||
<widget-check-box
|
||||
:size="52"
|
||||
:checked="chooseAddressId == item.id"
|
||||
|
|
@ -64,6 +64,7 @@ export default {
|
|||
name: "member-address",
|
||||
data() {
|
||||
return {
|
||||
pageTitle: "我的地址",
|
||||
openType: "list",
|
||||
chooseAddressId: 0,
|
||||
list: [
|
||||
|
|
@ -106,6 +107,12 @@ export default {
|
|||
onLoad(e) {
|
||||
if (e.openType) {
|
||||
this.openType = e.openType;
|
||||
if (e.openType == "choose") {
|
||||
this.pageTitle = "选择地址";
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.pageTitle,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (e.id) {
|
||||
this.chooseAddressId = e.id;
|
||||
|
|
@ -137,7 +144,7 @@ export default {
|
|||
wechatAddress.gender = 1;
|
||||
wechatAddress.isDefault = false;
|
||||
console.log(wechatAddress);
|
||||
}
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
|
@ -177,7 +184,7 @@ export default {
|
|||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 35rpx 30rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
.edit {
|
||||
|
|
@ -194,11 +201,13 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 35rpx 0;
|
||||
.checkbox {
|
||||
width: 75rpx;
|
||||
}
|
||||
.item-box {
|
||||
width: 530rpx;
|
||||
width: 100%;
|
||||
.address-text,
|
||||
.address-detail {
|
||||
font-size: 30rpx;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
class="input"
|
||||
v-model="detail"
|
||||
placeholder="请输入详细地址，如8栋5单元18a"
|
||||
placeholder-class="input-placeholder"
|
||||
placeholder-class="address-placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
class="input"
|
||||
v-model="name"
|
||||
placeholder="请输入姓名"
|
||||
placeholder-class="input-placeholder"
|
||||
placeholder-class="address-placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
class="input"
|
||||
v-model="mobile"
|
||||
placeholder="请输入手机号码"
|
||||
placeholder-class="input-placeholder"
|
||||
placeholder-class="address-placeholder"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -184,12 +184,10 @@ export default {
|
|||
.input-box {
|
||||
width: 500rpx;
|
||||
position: relative;
|
||||
padding: 25rpx 0;
|
||||
.input {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.input-placeholder {
|
||||
color: #c9c9c9;
|
||||
}
|
||||
}
|
||||
.default-box {
|
||||
width: 180rpx;
|
||||
|
|
@ -200,8 +198,6 @@ export default {
|
|||
}
|
||||
.input-box.map {
|
||||
.address-text {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
color: #c9c9c9;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -212,7 +208,7 @@ export default {
|
|||
}
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 25rpx;
|
||||
right: 0;
|
||||
font-size: 35rpx;
|
||||
color: #8194f2;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,12 @@
|
|||
<template>
|
||||
<app-layout headerBackgroundColor="#4B65ED" textColor="light" btnType="city" title="熊熊安装队">
|
||||
<view class="search">
|
||||
<view class="input-box">
|
||||
<view class="icon">
|
||||
<text class="iconfont icon-sousuo"></text>
|
||||
</view>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
:model="keywords"
|
||||
placeholder="搜索您需要的服务"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
<app-layout
|
||||
headerBackgroundColor="#4B65ED"
|
||||
textColor="light"
|
||||
btnType="city"
|
||||
title="熊熊安装队"
|
||||
>
|
||||
<view class="search-component">
|
||||
<widget-search />
|
||||
</view>
|
||||
<view class="banner">
|
||||
<app-banner :list="bannerList" @onClickItem="clickBanner" />
|
||||
|
|
@ -31,9 +25,14 @@
|
|||
interval="3000"
|
||||
duration="1000"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in notifyList" :key="index">
|
||||
<swiper-item
|
||||
v-for="(item, index) in notifyList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="swiper-item notify-item">
|
||||
<text class="limit-line clamp-1">{{item.title}}</text>
|
||||
<text class="limit-line clamp-1">{{
|
||||
item.title
|
||||
}}</text>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
|
@ -42,26 +41,54 @@
|
|||
<view class="service-group">
|
||||
<text class="section-title">建材安装服务</text>
|
||||
<view class="group g1">
|
||||
<view class="service-item" v-for="(item, index) in installServiceList" :key="index">
|
||||
<image class="service-icon" :src="item.icon" mode="scaleToFill" />
|
||||
<text class="service-name limit-line clamp-1">{{item.title}}</text>
|
||||
<view
|
||||
class="service-item"
|
||||
v-for="(item, index) in installServiceList"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
class="service-icon"
|
||||
:src="item.icon"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="service-name limit-line clamp-1">{{
|
||||
item.title
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-group">
|
||||
<text class="section-title">维修售后服务</text>
|
||||
<view class="group g2">
|
||||
<view class="service-item" v-for="(item, index) in aftermarketServiceList" :key="index">
|
||||
<image class="service-icon" :src="item.icon" mode="scaleToFill" />
|
||||
<text class="service-name limit-line clamp-1">{{item.title}}</text>
|
||||
<view
|
||||
class="service-item"
|
||||
v-for="(item, index) in aftermarketServiceList"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
class="service-icon"
|
||||
:src="item.icon"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text class="service-name limit-line clamp-1">{{
|
||||
item.title
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-group">
|
||||
<text class="section-title">工程企业服务</text>
|
||||
<view class="group g3">
|
||||
<view class="service-item" v-for="(item, index) in bussinessServiceList" :key="index">
|
||||
<image class="service-icon" :src="item.icon" mode="scaleToFill" />
|
||||
<view
|
||||
class="service-item"
|
||||
v-for="(item, index) in bussinessServiceList"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
class="service-icon"
|
||||
:src="item.icon"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -71,6 +98,7 @@
|
|||
<script>
|
||||
import AppLayout from "@/components/layout/layout";
|
||||
import AppBanner from "@/components/banner/banner";
|
||||
import WidgetSearch from "@/components/widgets/search";
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
|
|
@ -207,6 +235,7 @@ export default {
|
|||
components: {
|
||||
AppLayout,
|
||||
AppBanner,
|
||||
WidgetSearch,
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
|
|
@ -222,38 +251,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
.search-component {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #4b65ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.input-box {
|
||||
width: 670rpx;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 65rpx;
|
||||
.icon,
|
||||
.input,
|
||||
.placeholder {
|
||||
color: #bebebe;
|
||||
}
|
||||
.icon {
|
||||
width: 85rpx;
|
||||
height: 65rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.input {
|
||||
width: 585rpx;
|
||||
height: 65rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
backgroundColor="#F6F6F6"
|
||||
textColor="dark"
|
||||
title="我的"
|
||||
minHeight="calc(100vh - 100rpx)"
|
||||
>
|
||||
<view class="member-header">
|
||||
<view class="headimg">
|
||||
|
|
@ -18,61 +17,43 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="menu-container">
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @click="addressPage">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">我的地址</view>
|
||||
<view class="form-widget-group">
|
||||
<view class="widget-item" @click="addressPage">
|
||||
<text class="iconfont icon-dingwei icon"></text>
|
||||
<text class="title limit-line clamp-1">我的地址</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-tousu"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">意见投诉</view>
|
||||
<view class="widget-item">
|
||||
<text class="iconfont icon-tousu icon"></text>
|
||||
<text class="title limit-line clamp-1">意见投诉</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-kefufill"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">联系客服</view>
|
||||
<view class="widget-item">
|
||||
<text class="iconfont icon-kefufill icon"></text>
|
||||
<text class="title limit-line clamp-1">联系客服</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text
|
||||
class="
|
||||
iconfont
|
||||
icon-shezhixitongshezhigongnengshezhishuxing
|
||||
"
|
||||
></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">设置</view>
|
||||
<view class="widget-item">
|
||||
<text
|
||||
class="iconfont icon-shezhixitongshezhigongnengshezhishuxing icon"></text>
|
||||
<text class="title limit-line clamp-1">设置</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-group">
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">我是师傅</view>
|
||||
<view class="form-widget-group">
|
||||
<view class="widget-item">
|
||||
<text class="iconfont icon-gongren icon"></text>
|
||||
<text class="title limit-line clamp-1">我是师傅</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-cailiaogongcheng"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">工程安装</view>
|
||||
<view class="widget-item">
|
||||
<text class="iconfont icon-cailiaogongcheng icon"></text>
|
||||
<text class="title limit-line clamp-1">工程安装</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont icon-qiye"></text>
|
||||
</view>
|
||||
<view class="title limit-line clamp-1">企业安装合作</view>
|
||||
<view class="widget-item">
|
||||
<text class="iconfont icon-qiye icon"></text>
|
||||
<text class="title limit-line clamp-1">企业安装合作</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -165,46 +146,29 @@ export default {
|
|||
top: -72rpx;
|
||||
width: 670rpx;
|
||||
margin: 0 auto;
|
||||
.menu-group {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 0;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
}
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
line-height: 40rpx;
|
||||
.title-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
}
|
||||
.iconfont {
|
||||
color: #8c9bec;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.title {
|
||||
width: 530rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.more {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
}
|
||||
.iconfont.icon-cailiaogongcheng,
|
||||
.iconfont.icon-qiye {
|
||||
font-size: 30rpx;
|
||||
.form-widget-group {
|
||||
margin-bottom: 30rpx;
|
||||
padding: 24rpx 0;
|
||||
background-color: #FFFFFF;
|
||||
.widget-item {
|
||||
margin-top: 0;
|
||||
.title {
|
||||
padding: 30rpx 60rpx;
|
||||
}
|
||||
.icon,
|
||||
.more {
|
||||
top: 30rpx;
|
||||
}
|
||||
.icon.icon-dingwei {
|
||||
font-size: 35rpx;
|
||||
}
|
||||
.icon.icon-cailiaogongcheng {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.icon.icon-qiye {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,27 +7,27 @@
|
|||
>
|
||||
<widget-tips text="保险公司承保，人身财产，双重保障，下单无忧！" />
|
||||
<view class="form-container">
|
||||
<view class="select-group">
|
||||
<view class="select-item address" @click="selectAddress">
|
||||
<text class="iconfont icon-dingwei"></text>
|
||||
<text class="text limit-line clamp-1">{{
|
||||
addressText ? addressText : "请选择上门地址"
|
||||
}}</text>
|
||||
<text class="iconfont icon-jinru"></text>
|
||||
<view class="form-widget-group">
|
||||
<view class="widget-item" @click="selectAddress">
|
||||
<text class="iconfont icon-dingwei icon"></text>
|
||||
<text class="title limit-line clamp-1">
|
||||
{{ addressText ? addressText : "请选择上门地址" }}
|
||||
</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
<view class="select-item datetime" @click="selectDateTime">
|
||||
<text class="iconfont icon-shijian"></text>
|
||||
<view class="widget-item">
|
||||
<text class="iconfont icon-shijian icon"></text>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="datetime"
|
||||
@change="bindDateChange"
|
||||
class="text"
|
||||
class="picker"
|
||||
>
|
||||
<view class="uni-input">{{
|
||||
datetime ? datetime : "选择期望上门时间"
|
||||
}}</view>
|
||||
<text class="title limit-line clamp-1">
|
||||
{{ datetime ? datetime : "选择期望上门时间" }}
|
||||
</text>
|
||||
</picker>
|
||||
<text class="iconfont icon-jinru"></text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="service-view">
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
class="text-area"
|
||||
v-model="message"
|
||||
placeholder="补充描述您的需求，或其他特殊情况"
|
||||
placeholder-class="textarea-placeholder"
|
||||
placeholder-class="order-placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="agreement-container">
|
||||
|
|
@ -178,43 +178,6 @@ export default {
|
|||
margin-top: 16rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
.select-group {
|
||||
width: 100%;
|
||||
.select-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
margin-top: 2rpx;
|
||||
padding: 0 30rpx;
|
||||
.text {
|
||||
width: 100%;
|
||||
height: 116rpx;
|
||||
line-height: 116rpx;
|
||||
font-size: 30rpx;
|
||||
color: #2d2d2d;
|
||||
padding-left: 26rpx;
|
||||
}
|
||||
}
|
||||
.select-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.iconfont.icon-dingwei,
|
||||
.iconfont.icon-shijian {
|
||||
color: #8194f2;
|
||||
}
|
||||
.iconfont.icon-dingwei {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.iconfont.icon-shijian {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.iconfont.icon-jinru {
|
||||
font-size: 37rpx;
|
||||
color: #a7a7a7;
|
||||
}
|
||||
}
|
||||
.service-view {
|
||||
margin-top: 16rpx;
|
||||
padding: 24rpx 40rpx;
|
||||
|
|
@ -287,9 +250,6 @@ export default {
|
|||
margin-top: 12rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.textarea-placeholder {
|
||||
color: #909090;
|
||||
}
|
||||
}
|
||||
.agreement-container {
|
||||
width: 100%;
|
||||
|
|
@ -330,4 +290,9 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.form-widget-group {
|
||||
.widget-item {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,19 +6,8 @@
|
|||
backgroundColor="#F6F6F6"
|
||||
headerBackgroundColor="#F6F6F6"
|
||||
>
|
||||
<view class="search">
|
||||
<view class="input-box">
|
||||
<view class="icon">
|
||||
<text class="iconfont icon-sousuo"></text>
|
||||
</view>
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
:model="keywords"
|
||||
placeholder="搜索您需要的服务"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
<view class="search-component">
|
||||
<widget-search />
|
||||
</view>
|
||||
<view class="cate">
|
||||
<app-cate
|
||||
|
|
@ -34,6 +23,7 @@
|
|||
<script>
|
||||
import AppLayout from "@/components/layout/layout";
|
||||
import AppCate from "@/components/cate/cate";
|
||||
import WidgetSearch from "@/components/widgets/search";
|
||||
export default {
|
||||
name: "service-cate",
|
||||
data() {
|
||||
|
|
@ -95,6 +85,7 @@ export default {
|
|||
components: {
|
||||
AppLayout,
|
||||
AppCate,
|
||||
WidgetSearch,
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {},
|
||||
|
|
@ -112,37 +103,11 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
.search-component {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 30rpx;
|
||||
.input-box {
|
||||
width: 670rpx;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 65rpx;
|
||||
.icon,
|
||||
.input,
|
||||
.placeholder {
|
||||
color: #bebebe;
|
||||
}
|
||||
.icon {
|
||||
width: 85rpx;
|
||||
height: 65rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.input {
|
||||
width: 585rpx;
|
||||
height: 65rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue