app.js

App({onLaunch: function() {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({// env 参数说明：//   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源//   此处请填入环境 ID, 环境 ID 可打开云控制台查看//   如不填则使用默认环境（第一个创建的环境）// env: 'my-env-id',traceUser: true,})}this.globalData = {}}
})

app.json

{"tabBar": {"color": "#cdcdcd","selectedColor": "#0d1f75","list": [{"pagePath": "pages/repair/repair","text": "维修","iconPath": "images/repair.png","selectedIconPath": "images/repair-selected.png"},{"pagePath": "pages/maintain/maintain","text": "保养","iconPath": "images/maintain.png","selectedIconPath": "images/maintain-selected.png"},{"pagePath": "pages/vip/vip","text": "会员专区","iconPath": "images/vip.png","selectedIconPath": "images/vip-selected.png"}]},"pages": ["pages/repair/repair","pages/repair/faultSubmission/faultSubmission","pages/repair/onlineDetection/onlineDetection","pages/repair/vehicleRescue/vehicleRescue","pages/maintain/maintain","pages/maintain/production/production","pages/vip/vip"],"window": {"backgroundColor": "#0d1f75","backgroundTextStyle": "light","navigationBarBackgroundColor": "#0d1f75","navigationBarTitleText": "铭宝汽车一站式服务连锁","navigationBarTextStyle": "white"},"sitemapLocation": "sitemap.json"
}

app.wxss

@import 'css/weui.wxss';page{background-color: #EDEDED;font-size: 16px;font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.page__hd {padding: 40px;
}
.page__bd {padding-bottom: 40px;
}
.page__bd_spacing {padding-left: 15px;padding-right: 15px;
}.page__ft{text-align: center;padding:0 0 10px;padding:0 0 calc(10px + constant(safe-area-inset-bottom));padding:0 0 calc(10px + env(safe-area-inset-bottom));
}.page__title {text-align: left;font-size: 20px;font-weight: 400;
}.page__desc {margin-top: 5px;color: #888888;text-align: left;font-size: 14px;
}
.weui-cell_example:before{left:52px;
}

 repair.js

Page({data: {title: '维修服务',logo: {src: '../../img/logo.png',mode: 'aspectFit'},list: [{imgUrl: '../../img/repair/1.jpg',title: '故障提交',desc: '当您发现汽车存在异常，但是又不影响正常行驶，可以提交故障情况给我们，远程帮您查看故障原因',link: 'faultSubmission/faultSubmission'},{imgUrl: '../../img/repair/2.jpg',title: '在线检测',desc: '根据您的爱车型号对应提供表格，您只需要填写好对应的参数，在线为您车辆检测结果',link: 'onlineDetection/onlineDetection'},{imgUrl: '../../img/repair/3.jpg',title: '车辆救援',desc: '爱车把您抛弃在了路边，只需一个电话，无论刮风下雨，我们为您保驾护航',link: 'vehicleRescue/vehicleRescue'}],},onLoad: function() {},})

repair.wxml

{ {title}}{ {item.title}}{ {item.desc}}

repair.wxss

@charset "UTF-8";/* 组件---------------------------------------------------------------- */.weui-panel {background-color: #fff;margin-top: 10px;position: relative;overflow: hidden;
}.weui-panel:first-child {margin-top: 0;
}.weui-panel:before {top: 0;border-top: 1rpx solid rgba(0, 0, 0, 0.1);
}.weui-panel:after, .weui-panel:before {content: " ";position: absolute;left: 0;right: 0;height: 1px;color: rgba(0, 0, 0, 0.1);
}.weui-panel:after {bottom: 0;border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}.weui-panel__hd {padding: 16px 16px 13px;color: rgba(0, 0, 0, 0.9);font-size: 15px;font-weight: 700;position: relative;
}.weui-panel__hd:after {content: " ";position: absolute;left: 0;bottom: 0;right: 0;height: 1px;border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);color: rgba(0, 0, 0, 0.1);left: 16px;
}/*自定义部分 ---------------------------------------------------------------- */.logo-view {text-align: center;height: 250rpx;
}.logo-view image {width: 50%;height: 250rpx;
}.weui-media-box__hd_in-appmsg {width: 320rpx;height: 180rpx;border-radius: 10rpx;overflow: hidden;
}.weui-media-box__desc {line-height: 1.2;-webkit-line-clamp: 4;
}/* ---------------------------------------------------------------- */

maintain.js

Page({data: {inputShowed: false,inputVal: "",logo: {src: '../../img/logo.png',mode: 'aspectFit'},list: [{imgUrl: '../../img/maintain/1.jpg',title: '壳牌机油黄壳黄喜力正品HX5',desc: ' 10w-40 汽车发动机润滑油 SN 4L清洁润滑 保护引擎 清洁保护抑制氧化',price: '145.00',link: 'production/production'},{imgUrl: '../../img/maintain/2.jpg',title: 'Castrol嘉实多磁护Professional',desc: '专享5W-40全合成机油润滑油4LSN级 未启动先保护 智能分子配方',price: '120.00',link: 'production/production'},{imgUrl: '../../img/maintain/3.jpg',title: 'Mobil美孚一号全合成机油',desc: '汽车润滑油 5W-30 美孚1号 SN级 1L正品 新车推荐 卓越低温能力 磨损保护',price: '78.00',link: 'production/production'}, {imgUrl: '../../img/maintain/4.jpg',title: '倍耐力汽车轮胎新P7KS',desc: '适配宝马3/5/6系 205/55R18 正品保证 405城万家门店 25仓发货 包安装',price: '1890.00',link: 'production/production'},{imgUrl: '../../img/maintain/5.jpg',title: '普利司通汽车轮胎泰然者T001',desc: '225/55R17适配迈锐宝新君威奥迪A6L正品保证 405城万家门店 25仓发货 包安装',price: '1280.00',link: 'production/production'},{imgUrl: '../../img/maintain/6.jpg',title: '布雷博 brembo GT GT6 GT4',desc: '宝马F8XM2M3M4意大利刹车卡钳套件全原装带防伪卡',price: '2890.00',link: 'production/production'}],},showInput: function() {this.setData({inputShowed: true});},hideInput: function() {this.setData({inputVal: "",inputShowed: false});},clearInput: function() {this.setData({inputVal: ""});},inputTyping: function(e) {this.setData({inputVal: e.detail.value});}
});

 maintain.wxml

{ {item.title}}{ {item.desc}}{ {item.price}}

maintain.wxss

@charset "UTF-8";.searchbar-result {margin-top: 0;font-size: 14px;
}.searchbar-result .weui-cell__bd {padding: 2px 0 2px 20px;color: #666;
}.searchbar-result:before {display: none;
}/*自定义部分 ---------------------------------------------------------------- */.weui-media-box__hd_in-appmsg {width: 180rpx;height: 180rpx;border-radius: 10rpx;overflow: hidden;
}.weui-media-box__price {color: red;font-size: 40rpx;font-weight: bold;
}.weui-media-box__price::before {content: '￥';font-size: 20rpx;font-weight: 100;
}.weui-media-box__price::after {content: '元';font-size: 20rpx;font-weight: 100;
}/* ---------------------------------------------------------------- */