作者 刘晓艳

生鲜部分静态页

正在显示 67 个修改的文件 包含 4774 行增加0 行删除

要显示太多修改。

为保证性能只显示 67 of 67+ 个文件。

//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
\ No newline at end of file
... ...
{
"pages": [
"pages/index/index",
"pages/my/orderDetail/orderDetail",
"pages/my/big/big",
"pages/my/activityInformation/activityInformation",
"pages/my/serach/serach",
"pages/my/selectAddress/selectAddress",
"pages/my/editAddress2/editAddress2",
"pages/my/editAddress/editAddress",
"pages/index/production_steps/production_steps",
"pages/my/myCollection/myCollection",
"pages/index/goodsDetial2/goodsDetial2",
"pages/index/goodsDetial/goodsDetial",
"pages/my/modifyPersonInformation/modifyPersonInformation",
"pages/my/modifyName/modifyName",
"pages/my/invitationList/invitationList",
"pages/my/invoiceInformation/invoiceInformation",
"pages/my/invoice/invoice",
"pages/my/commonProblems/commonProblems",
"pages/my/myAddress/myAddress",
"pages/my/invitationPolite/invitationPolite",
"pages/my/comment/comment",
"pages/my/coupons/coupons",
"pages/my/balance _center2/balance _center2",
"pages/my/charger_code/charger_code",
"pages/my/balance _center/balance _center",
"pages/my/my",
"pages/cart/cart"
],
"window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#1a191f",
"navigationBarTitleText": "HI,鲜生",
"navigationBarTextStyle": "white"
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"tabBar": {
"selectedColor": "#222222",
"list": [
{
"selectedIconPath": "pages/imgs/nav02@2x.png",
"iconPath": "pages/imgs/nav01@2x.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "pages/imgs/nav04@2x.png",
"iconPath": "pages/imgs/nav03@2x.png",
"pagePath": "pages/cart/cart",
"text": "购物车"
},
{
"selectedIconPath": "pages/imgs/nav06@2x.png",
"iconPath": "pages/imgs/nav05@2x.png",
"pagePath": "pages/my/my",
"text": "个人中心"
}
]
},
"networkTimeout": {
"request": 1000,
"connectSocket": 1000,
"uploadFile": 1000,
"downloadFile": 1000
}
}
\ No newline at end of file
... ...
/**app.wxss**/
@font-face {
font-family: 'pingfang';
src: url('pages/src/fonts/PingFangLight.ttf');
font-family: 'pingfanglight';
src: url('pages/src/fonts/PingFangLight.ttf');
}
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, menu, nav, output, ruby, section, summary, time,
mark, audio, video, input, view, text, template, blockquote, page, image {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'pingfang';
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
display: block;
}
body {
line-height: 1;
height: 100%;
position: relative;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
width: 100%;
}
/* custom */
a {
color: #000;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
img {
border: 0;
margin: 0;
}
input, textarea {
height: 100%;
width: 100%;
border: 0;
outline: none;
background: none;
}
.rmb {
font-size: 22rpx;
color: #222;
}
.nav_type_box {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #222;
padding: 29rpx 23rpx;
border-bottom: 1rpx solid #f2f2f2;
background-color: #fff;
}
.nav_type_left {
display: flex;
align-items: center;
flex: 1;
}
.nav_type {
display: flex;
align-items: center;
margin-right: 30rpx;
}
.nav_type .iconfont, .nav_type_right .iconfont {
font-size: 24rpx;
margin: 0 11rpx 0 0;
}
.nav_type_right {
display: flex;
align-items: center;
}
.type_active {
color: #ffda44;
}
/* 单个商品列表样式 */
.goodbox {
background-color: #fff;
}
.good_item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 50rpx 22rpx;
border-bottom: 1rpx solid #f2f2f2;
}
.good_img {
width: 225rpx;
height: 217rpx;
display: flex;
align-items: center;
justify-content: center;
}
.good_right {
flex: 2;
margin-left: 20rpx;
}
.good_name {
color: #222;
font-size: 30rpx;
padding: 0 0 10rpx 0;
}
.good_stand {
font-size: 24rpx;
color: #888;
}
.rmb {
font-size: 22rpx;
}
.good_pprice {
font-size: 26rpx;
color: #222;
font-weight: bold;
padding: 0 10rpx;
}
.good_oprice {
font-size: 22rpx;
color: #888;
}
.good_vip {
color: #f44;
font-size: 34rpx;
font-weight: bold;
}
.good_vipbox {
display: flex;
align-items: center;
justify-content: space-between;
}
.good_vipbox_left {
display: flex;
align-items: center;
flex: 1;
}
.good_vip_spec {
font-size: 18rpx;
height: 25rpx;
background-color: #f44;
padding: 3rpx;
text-align: center;
color: #fff;
line-height: 100%;
margin-left: 5rpx;
/* background-image: url('../imgs/') */
}
.good_btn {
height: 60rpx;
width: 60rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #ffda44;
box-shadow: 5rpx 0px 5rpx rgba(248, 207, 38, 0.3);
}
.icon-gouwuche {
font-size: 29rpx;
color: #444;
}
/* 头部信息 */
.banner {
height: 86rpx;
width: 100%;
overflow: hidden;
line-height: 80rpx;
background: #fff;
display: flex;
font-size: 34rpx;
color: #222;
border-bottom: 1rpx solid #ededed;
padding: 0 26rpx;
box-sizing: border-box;
}
.coupons {
font-weight: bold;
margin: 0 auto;
}
@font-face {
font-family: 'iconfont'; /* project id 636259 */
src: url('//at.alicdn.com/t/font_636259_xrf3sdkafk.eot');
src: url('//at.alicdn.com/t/font_636259_xrf3sdkafk.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_636259_xrf3sdkafk.woff') format('woff'),
url('//at.alicdn.com/t/font_636259_xrf3sdkafk.ttf') format('truetype'),
url('//at.alicdn.com/t/font_636259_xrf3sdkafk.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-vip:before { content: "\e62f"; }
.icon-jia:before { content: "\e65b"; }
.icon-jiantouarrow486:before { content: "\e6aa"; }
.icon-quan:before { content: "\e741"; }
.icon-gouwuche:before { content: "\e6be"; }
.icon-cuowu:before { content: "\e657"; }
.icon-icondayu:before { content: "\e632"; }
.icon-huangguan:before { content: "\e640"; }
.icon-3:before { content: "\e62c"; }
.icon-one-off:before { content: "\e62d"; }
.icon-two-off:before { content: "\e62e"; }
.icon-shangyinhao:before { content: "\e63f"; }
.icon-xiaoyu:before { content: "\e74c"; }
.icon-diandian:before { content: "\e631"; }
.icon-location:before { content: "\e601"; }
.icon-search:before { content: "\e602"; }
.icon-message:before { content: "\e603"; }
.icon-fenlei:before { content: "\e604"; }
.icon-jiance:before { content: "\e605"; }
.icon-xingzhuang:before { content: "\e606"; }
.icon-xingzhuang1:before { content: "\e607"; }
.icon-datu:before { content: "\e608"; }
.icon-wangge:before { content: "\e609"; }
.icon-liebiao:before { content: "\e60a"; }
.icon-shaixuan:before { content: "\e60b"; }
.icon-chakanguize:before { content: "\e600"; }
.icon-tianxie:before { content: "\e60c"; }
.icon-xingzhuang2:before { content: "\e60d"; }
.icon-fanhui:before { content: "\e60e"; }
.icon-dingwei:before { content: "\e60f"; }
.icon-lishisousuo:before { content: "\e610"; }
.icon-remensousuo:before { content: "\e611"; }
.icon-quxiao:before { content: "\e612"; }
.icon-shanchu:before { content: "\e613"; }
.icon-zhankai:before { content: "\e614"; }
.icon-meipingfen:before { content: "\e615"; }
.icon-maishoutuijian:before { content: "\e616"; }
.icon-shoucang:before { content: "\e617"; }
.icon-jinru:before { content: "\e618"; }
.icon-pingfen:before { content: "\e619"; }
.icon-genghuan:before { content: "\e630"; }
.icon-location1:before { content: "\e61a"; }
.icon-weixuanzhong:before { content: "\e61b"; }
.icon-time:before { content: "\e61c"; }
.icon-xuanzhong:before { content: "\e61d"; }
.icon-fenxiangyouli:before { content: "\e61e"; }
.icon-wodeshoucang:before { content: "\e61f"; }
.icon-location2:before { content: "\e620"; }
.icon-yonghuzhinan:before { content: "\e621"; }
.icon-yijianfankui:before { content: "\e622"; }
.icon-qiandao:before { content: "\e623"; }
.icon-zhangdanmingxi:before { content: "\e624"; }
.icon-chuxuyouli:before { content: "\e625"; }
.icon-saoma:before { content: "\e626"; }
.icon-pingjia:before { content: "\e627"; }
.icon-cai:before { content: "\e628"; }
.icon-zan:before { content: "\e629"; }
.icon-kefu:before { content: "\e62a"; }
.icon-quxiao1:before { content: "\e62b"; }
.icon-dangqian:before { content: "\e64a"; }
.icon-meipingfen-copy:before { content: "\e6bf"; }
... ...
// pages/cart/cart.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/cart/cart.wxml-->
<text>pages/cart/cart.wxml</text>
... ...
/* pages/cart/cart.wxss */
\ No newline at end of file
... ...
不能预览此文件类型
// pages/index/goodsDetial/goodsDetial.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/index/goodsDetial/goodsDetial.wxml-->
<view>
<view class='banner'>
<view class='iconfont icon-fanhui'></view>
<view class='coupons'>
<view class='goods_detail'>商品详情</view>
<view class='graphic_detail'>图文详情</view>
</view>
<view class='share'>分享</view>
</view>
<view class='banner_box'>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
</view>
<view class='content_item'>
<view class='item_list'>
<view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
<view class='introduce'>量大好吃无限回购</view>
<view class='banner_character'>
<view class='banner_price'>
<view class=''>
<text class='money_icon'>¥</text>
<text class='money'>26.0</text>
<text class='original_price'>¥52.0</text>
</view>
<view class='display_box'>
<text class='money_icon2'>¥</text>
<text class='money2'>20.0</text>
<text class='vip'>会员专享</text>
</view>
</view>
<view>已售出:1566份</view>
</view>
</view>
<view class='item_list'>
<view class='list_content'>
<view class='content_title'>
<view class='title'>商品规格</view>
<view class='content'>选择 处理方式 份量</view>
</view>
<view class='iconfont icon-jinru'></view>
</view>
<view class='list_content'>
<view class='content_title'>
<view class='title'>基本参数</view>
<view class='content'>重量:500g*包 场地/品牌:大理弥渡 ...</view>
</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='item_list7'>
<view class='list_content'>
<view>
<view class='attribute'>
<view class='attribute_titel'>难度</view>
<view class='stars'>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
</view>
</view>
<view class='attribute'>
<view class='attribute_titel'>难度</view>
<view class='stars'>10分钟</view>
</view>
</view>
<view>
<view class='attribute'>
<view class='attribute_titel'>难度</view>
<view class='attribute_content'>微辣</view>
</view>
<view class='attribute'>
<view class='attribute_titel'>难度</view>
<view class='attribute_content'>10分钟</view>
</view>
</view>
</view>
<view class='more_box'>
<view>展开更多</view>
<view class='iconfont icon-zhankai'></view>
</view>
</view>
<view class='item_list1'>
<view class='hint1'>
<view>15元升级SVIP,立享5特权</view>
<view class='cash_back'>
本商品
<text class='red_font'>更返2元</text>
</view>
</view>
<view class='hint1'>
<view>15元升级SVIP,立享5特权</view>
<view class='cash_back'>
本商品
<text class='red_font'>更返2元</text>
</view>
</view>
</view>
<view class='item_list2'>
<view class='user_evaluation'>
<view class='user_evaluation_title'>用户评价</view>
<view class='user_evaluation_time'>
<view>(26)</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='user_information_box'>
<view class='user_information'>
<view class='the_star'>
<view class='head_portrait'>
<image src='../../imgs/icon32.png'></image>
</view>
<view class='star_box'>
<view class='user_name'>叶晓林</view>
<view class='stars1'>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
</view>
</view>
</view>
<view class='title'>2017-04-23</view>
</view>
<view class='evaluation'>第一次用Hi,鲜生,准时送达,送货上门,主动联系,态度很好,配送很快.感觉挺好。期待下一次购物~</view>
<view class='evaluation_img'>
<view class='upload_img_box'>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
</view>
</view>
<view class='comments_btn'>
<view class='iconfont icon-message'></view>
<view class='comments'>评论</view>
</view>
</view>
</view>
<view class='item_list3'>
<view class='package_title'>购买含本商品套餐更优惠</view>
<view class='package_box'>
<view class='package_img_box'>
<view class='package_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='package_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='package_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='package_img'>
<image src='../../imgs/pic38.png'></image>
</view>
</view>
<view class='package_content'>
<view>粤菜大礼包 春节团圆系列</view>
<view class='package_hint'>为大家精选挑选的菜系</view>
<view class='pickage_display'>最多可省
<text class='money_icon2'>¥</text>
<text class='money2'>65.0</text> </view>
</view>
</view>
</view>
<view class='item_list4'>
<view class='detection'>
<view class='line1'></view>
<view class='detection_title'>安心检测</view>
<view class='line2'></view>
</view>
<view class='detection_hint'>经过14项感官排查,100%可溯,点标签查看。</view>
<view class='detection_item'>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
</view>
</view>
<view class='itme_list5'>
<view class='recommended_box'>
<view class='iconfont icon-maishoutuijian'></view>
<view>买手推荐</view>
</view>
<view class='foretaste_box'>
<view class='head_portrait'>
<image src='../../imgs/icon32.png'></image>
</view>
<view class='buyer_recommend'>
<view class='buyer_name'>杨军</view>
<view>被称为挑剔的试吃官,力求让每个家庭吃上安心蔬菜</view>
</view>
</view>
<view class='aaa'></view>
<view class='recommend_content'>
<view class='iconfont icon-shangyinhao'></view>
<view class='recommend_character'>沃柑生产于广西,南方温和气候有着充足的日照环境,使其沃柑更甘甜水润。沃柑个大皮薄,容易剥皮,果肉脆嫩,粒粒果肉饱满,容易剥皮,果汁多易化渣。看得到的鲜嫩美味。</view>
<view class='triangle'></view>
</view>
<view class='ingredients'>
<view class='ingredients_title'>食材包内含20件</view>
<view class='ingredients_box'>
<view class='ingredients_img'>
<image src='../../imgs/icon32.png'></image>
</view>
<view>
<view class='ingredients_item'>
<view class='ingredients_name'>主料</view>
<view class='ingredients_content'>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
</view>
</view>
<view class='ingredients_item'>
<view class='ingredients_name'>主料</view>
<view class='ingredients_content'>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
<view> 排骨</view>
</view>
</view>
</view>
</view>
</view>
<view class='graphic_ingredients_box'>
<view class='graphic_ingredients'>
<view class='graphic_ingredients_background'>
<view class='graphic_ingredients_border'>浏览图文食谱</view>
</view>
</view>
<view class='graphic_ingredients'>
<view class='graphic_ingredients_background'>
<view class='graphic_ingredients_border'>浏览图文食谱</view>
</view>
</view>
</view>
</view>
<view class='item_list6'>
<view class='collocation_title'>建议搭配 酸梅汁或红酒 解腻助消化</view>
<view class='collocation'>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
<view class=''>
<text class='money_icon2'>¥</text>
<text class='money2'>20.0</text>
<text class='original_price'>¥52.0</text>
</view>
</view>
</view>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
<view class=''>
<text class='money_icon2'>¥</text>
<text class='money2'>20.0</text>
<text class='original_price'>¥52.0</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='bottom_btn'>
<view class='hint_btn'>
<view class='shop_car'>
<view class='iconfont icon-gouwuche'></view>
<view>购物车</view>
</view>
<view>
<view class='iconfont icon-shoucang'></view>
<view class='shop_car'>收藏</view>
</view>
</view>
<view class='join_btn'>加入购物车</view>
<view class='immediately_btn'>立即购买</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/index/goodsDetial/goodsDetial.wxss */
page {
background: #f3f5f5;
}
.coupons {
font-size: 30rpx;
color: #222;
display: flex;
}
.goods_detail {
font-weight: bold;
border-bottom: 3rpx solid #ffda44;
}
.graphic_detail {
font-weight: bold;
margin-left: 56rpx;
}
.share {
font-size: 28rpx;
color: #222;
}
.banner_img {
height: 630rpx;
}
.banner_img image {
width: 100%;
height: 100%;
}
.item_list {
padding: 32rpx 25rpx;
background-color: #fff;
margin-bottom: 20rpx;
}
.banner_title {
font-size: 34rpx;
color: #222;
}
.introduce {
font-size: 28rpx;
color: #888;
}
.banner_character {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #888;
margin-top: 40rpx;
}
.banner_price {
display: flex;
/* align-items: center; */
}
.money_icon {
font-size: 22rpx;
color: #222;
}
.money {
font-size: 38rpx;
font-weight: bold;
color: #222;
}
.original_price {
color: #888;
text-decoration: line-through;
}
.display_box {
margin-left: 40rpx;
}
.money_icon2 {
font-size: 22rpx;
color: #f44;
}
.money2 {
font-size: 38rpx;
font-weight: bold;
color: #f44;
}
.vip {
color: #fff;
background-color: #f44;
margin-left: 5rpx;
}
.list_content {
display: flex;
justify-content: space-between;
align-items: center;
}
.content_title {
display: flex;
}
.title {
font-size: 24rpx;
color: #888;
}
.content {
font-size: 24rpx;
color: #222;
margin-left: 47rpx;
}
.icon-jinru {
font-size: 22rpx;
color: #c7c7c7;
}
.more_box {
font-size: 24rpx;
color: #949a9a;
border-top: 1rpx solid #ededed;
display: flex;
justify-content: center;
align-items: center;
padding-top: 24rpx;
margin-top: 35rpx;
}
.icon-zhankai {
font-size: 14rpx;
margin-left: 10rpx;
}
.item_list1 {
background-color: #fff;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 19rpx 16rpx;
}
.hint1 {
font-size: 22rpx;
color: #222;
background-color: #fafafa;
border-radius: 12rpx;
padding: 25rpx 39rpx;
}
.cash_back {
font-size: 28rpx;
font-weight: bold;
color: #222;
}
.red_font {
font-weight: bold;
color: #f44;
}
.item_list7 {
padding: 31rpx 25rpx 25rpx 25rpx;
}
.attribute {
width: 375rpx;
display: flex;
align-items: center;
/* margin-left: 49rpx; */
}
.attribute_titel {
font-size: 26rpx;
color: #94999a;
}
.stars {
display: flex;
font-size: 26rpx;
color: #222;
margin-left: 35rpx;
}
.icon-pingfen {
font-size: 26rpx;
color: #222;
}
.attribute_content {
font-size: 26rpx;
color: #222;
margin-left: 113rpx;
}
.item_list2, .item_list3, .item_list4, .itme_list5, .item_list6, .item_list7 {
background-color: #fff;
margin-bottom: 20rpx;
}
.user_evaluation {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f3f5f5;
padding: 31rpx 25rpx;
}
.user_evaluation_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.user_evaluation_time {
font-size: 24rpx;
color: #c7c7c7;
display: flex;
align-items: center;
}
.comments_btn {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 23rpx;
color: #949a9a;
margin-top: 24rpx;
}
.icon-message {
font-size: 22rpx;
color: #949a9a;
margin-right: 10rpx;
}
.user_information_box {
padding: 31rpx 25rpx 25rpx 25rpx;
}
.user_information {
display: flex;
justify-content: space-between;
align-items: center;
}
.head_portrait {
width: 62rpx;
height: 62rpx;
}
.head_portrait image {
width: 100%;
height: 100%;
}
.star_box {
margin-left: 25rpx;
}
.the_star {
display: flex;
align-items: center;
}
.stars1 {
display: flex;
}
.user_name {
font-size: 26rpx;
color: #222;
}
.evaluation {
font-size: 24rpx;
color: #222;
margin-top: 25rpx;
}
.evaluation_img {
margin-top: 21rpx;
}
.upload_img_box {
display: flex;
}
.upload_img {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.upload_img image {
width: 100%;
height: 100%;
}
.item_list3 {
padding: 39rpx 25rpx 40rpx 25rpx;
}
.package_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.package_box {
display: flex;
margin-top: 44rpx;
}
.package_img_box {
width: 200rpx;
height: 200rpx;
display: flex;
flex-wrap: wrap;
/* justify-content: flex-end;
align-content: space-between; */
}
.package_img {
width: 95rpx;
height: 95rpx;
}
.package_img image {
width: 100%;
height: 100%;
}
.package_content {
font-size: 30rpx;
color: #222;
margin-left: 40rpx;
}
.package_hint {
font-size: 24rpx;
color: #94999a;
}
.pickage_display {
font-size: 24rpx;
color: #f44;
margin-top: 47rpx;
}
.item_list4 {
padding: 46rpx 44rpx;
}
.detection_item {
display: flex;
justify-content: space-around;
margin-top: 58rpx;
}
.detection {
display: flex;
justify-content: center;
align-items: center;
}
.line1 {
width: 115rpx;
height: 1rpx;
background: linear-gradient(to right, #fff, #bbb);
}
.line2 {
width: 115rpx;
height: 1rpx;
background: linear-gradient(to left, #fff, #bbb);
}
.detection_title {
font-size: 26rpx;
color: #222;
margin: 0 30rpx;
}
.detection_box {
font-size: 26rpx;
color: #222;
}
.detection_img {
margin: 0 auto;
width: 54rpx;
height: 54rpx;
}
.detection_img image {
width: 100%;
height: 100%;
}
.detection_hint {
font-size: 22rpx;
color: #94999a;
text-align: center;
margin-top: 20rpx;
}
.itme_list5 {
position: relative;
padding: 45rpx 25rpx 30rpx 25rpx;
box-sizing: border-box;
}
.recommended_box {
width: 150rpx;
height: 45rpx;
display: flex;
align-items: center;
justify-content: center;
background: #ffda44;
border-radius: 0 0 16rpx 16rpx;
font-size: 22rpx;
color: #333;
position: absolute;
right: 24rpx;
top: 0;
}
.foretaste_box {
display: flex;
align-items: center;
font-size: 30rpx;
}
.buyer_recommend {
font-size: 22rpx;
color: #94999a;
margin-left: 20rpx;
}
.buyer_name {
font-size: 30rpx;
color: #222;
}
.recommend_content {
background-color: #fafafa;
border-radius: 16rpx;
padding: 25rpx 25rpx 25rpx 25rpx;
margin-top: 30rpx;
font-size: 26rpx;
color: #222;
position: relative;
}
.icon-shangyinhao {
font-size: 22rpx;
color: #e3e3e3;
}
.triangle {
width: 0;
height: 0;
border-left: 60rpx solid #fafafa;
border-top: 30rpx solid transparent;
border-bottom: 30rpx solid transparent;
position: absolute;
top: -30rpx;
left: 50rpx;
}
.recommend_character {
margin-left: 10rpx;
}
.ingredients {
margin-top: 40rpx;
}
.ingredients_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
text-align: center;
}
.ingredients_img {
width: 280rpx;
height: 280rpx;
}
.ingredients_box {
display: flex;
}
.ingredients_img image {
width: 100%;
height: 100%;
}
.ingredients_item {
width: 400rpx;
font-size: 26rpx;
display: flex;
/* margin-left: 34rpx; */
margin-top: 34rpx;
border: 1px solid red;
}
.ingredients_name {
color: #94999a;
width: 80rpx;
}
.ingredients_content {
width: 300rpx;
display: flex;
flex-wrap: wrap;
margin-left: 30rpx;
border: 1px solid red;
}
.graphic_ingredients_box {
margin-top: 40rpx;
}
.graphic_ingredients {
height: 200rpx;
border: 1rpx solid red;
display: flex;
align-items: center;
justify-content: center;
background-image: url('http://hifresh.w.bronet.cn/assets/wxapp/keshihua@2x.png');
margin-bottom: 20rpx;
}
.graphic_ingredients_background {
width: 450rpx;
height: 110rpx;
background-color: #ffb244;
display: flex;
align-items: center;
justify-content: center;
}
.graphic_ingredients_border {
font-size: 38rpx;
color: #fff;
width: 430rpx;
height: 90rpx;
border: 1rpx solid #fff;
display: flex;
align-items: center;
justify-content: center;
}
.item_list6 {
padding: 30rpx 25rpx;
}
.collocation_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
margin-bottom: 40rpx;
}
.collocation {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.collocation_box {
width: 340rpx;
border: 1rpx solid red;
border-radius: 16rpx;
overflow: hidden;
/* margin-left: 20rpx; */
}
.collocation_img {
width: 340rpx;
height: 340rpx;
}
.collocation_img image {
width: 100%;
height: 100%;
}
.collocation_content {
background: #fafafa;
font-size: 30rpx;
color: #222;
padding: 22rpx;
}
.bottom_btn {
height: 100rpx;
background: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
.hint_btn {
width: 218rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
.shop_car {
font-size: 18rpx;
color: #747b7d;
}
.join_btn {
width: 266rpx;
height: 100rpx;
background: linear-gradient(to left, #ffda44, #ffb244);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
}
.immediately_btn {
width: 266rpx;
height: 100rpx;
background: linear-gradient(to left, #f99115, #f56800);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
}
... ...
// pages/index/goodsDetial2/goodsDetial2.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/index/goodsDetial/goodsDetial.wxml-->
<view>
<view class='banner'>
<view class='iconfont icon-fanhui'></view>
<view class='coupons'>商品详情</view>
<view class='share'>分享</view>
</view>
<view class='banner_box'>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
</view>
<view class='content_item'>
<view class='item_list'>
<view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
<view class='introduce'>量大好吃无限回购</view>
<view class='banner_character'>
<view class='banner_price'>
<view class=''>
<text class='money_icon'>¥</text>
<text class='money'>26.0</text>
<text class='original_price'>¥52.0</text>
</view>
<view class='display_box'>
<text class='money_icon2'>¥</text>
<text class='money2'>20.0</text>
<text class='vip'>会员专享</text>
</view>
</view>
<view>已售出:1566份</view>
</view>
</view>
<view class='item_list2'>
<view class='user_evaluation'>
<view class='user_evaluation_title'>用户评价</view>
<view class='user_evaluation_time'>
<view>(26)</view>
<view class='iconfont icon-jinru'></view>
</view>
</view>
<view class='user_information_box'>
<view class='user_information'>
<view class='the_star'>
<view class='head_portrait'>
<image src='../../imgs/icon32.png'></image>
</view>
<view class='star_box'>
<view class='user_name'>叶晓林</view>
<view class='stars1'>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
<view class='iconfont icon-pingfen'></view>
</view>
</view>
</view>
<view class='title'>2017-04-23</view>
</view>
<view class='evaluation'>第一次用Hi,鲜生,准时送达,送货上门,主动联系,态度很好,配送很快.感觉挺好。期待下一次购物~</view>
<view class='evaluation_img'>
<view class='upload_img_box'>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view class='upload_img'>
<image src='../../imgs/pic38.png'></image>
</view>
</view>
</view>
<view class='comments_btn'>
<view class='iconfont icon-message'></view>
<view class='comments'>评论</view>
</view>
</view>
</view>
<view class='item_list1'>
<view class='hint1'>
<view>15元升级SVIP,立享5特权</view>
<view class='cash_back'>
本商品
<text class='red_font'>更返2元</text>
</view>
</view>
<view class='hint1'>
<view>15元升级SVIP,立享5特权</view>
<view class='cash_back'>
本商品
<text class='red_font'>更返2元</text>
</view>
</view>
</view>
<view class='item_list3'>
<view class='detection'>
<view class='line1'></view>
<view class='detection_title'>安心检测</view>
<view class='line2'></view>
</view>
<view class='detection_hint'>经过14项感官排查,100%可溯,点标签查看。</view>
<view class='detection_item'>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
<view class='detection_box'>
<view class='detection_img'>
<image src='../../imgs/pic38.png'></image>
</view>
<view>可视化种植</view>
</view>
</view>
</view>
<view class='itme_list5'>
<view class='recommended_box'>
<view class='iconfont icon-maishoutuijian'></view>
<view>买手推荐</view>
</view>
<view class='foretaste_box'>
<view class='head_portrait'>
<image src='../../imgs/icon32.png'></image>
</view>
<view class='buyer_recommend'>
<view class='buyer_name'>杨军</view>
<view>被称为挑剔的试吃官,力求让每个家庭吃上安心蔬菜</view>
</view>
</view>
<view class='recommend_content'>
<view class='iconfont icon-shangyinhao'></view>
<view class='recommend_character'>沃柑生产于广西,南方温和气候有着充足的日照环境,使其沃柑更甘甜水润。沃柑个大皮薄,容易剥皮,果肉脆嫩,粒粒果肉饱满,容易剥皮,果汁多易化渣。看得到的鲜嫩美味。</view>
<view class='triangle'></view>
</view>
</view>
<view class='item_list4'>
<view class='detection'>
<view class='line1'></view>
<view class='detection_title'>商品包内容</view>
<view class='line2'></view>
</view>
<view class='detection_hint'>经过14项感官排查,100%可溯,点标签查看。</view>
<view class='collocation'>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
</view>
</view>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
</view>
</view>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
</view>
</view>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
</view>
</view>
</view>
<view class='charge_btn'>
<view class='iconfont icon-genghuan'></view>
<view>更换菜品</view>
</view>
</view>
<view class='tips'>
<view class='item_list7'>
<view class='detection'>
<view class='line1'></view>
<view class='detection_title'>小贴士</view>
<view class='line2'></view>
</view>
<view class='tips_content'>
<view>01 烤翅中时,在烤盘底部刷一层油再放入烤箱中烤,这样就不会粘盘。</view>
<view>02 将腌制好的翅中再涂一层蜂蜜,这样会给翅中提鲜,烤出的翅中肉质更细嫩可口。</view>
<view>03 用翅中和香菇一起烹煮,可令两种食物中的纤维效果加倍,双重营养,使人体更容易消化吸收。</view>
</view>
</view>
</view>
<view class='item_list6'>
<view class='collocation_title'>建议搭配 酸梅汁或红酒 解腻助消化</view>
<view class='collocation'>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
<view class=''>
<text class='money_icon2'>¥</text>
<text class='money2'>20.0</text>
<text class='original_price'>¥52.0</text>
</view>
</view>
</view>
<view class='collocation_box'>
<view class='collocation_img'>
<image src='../../imgs/pic43.png'></image>
</view>
<view class='collocation_content'>
<view>泰式冬阴功秘制虾汤...</view>
<view class='introduce'>量大好吃无限回购</view>
<view class=''>
<text class='money_icon2'>¥</text>
<text class='money2'>20.0</text>
<text class='original_price'>¥52.0</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='bottom_btn'>
<view class='hint_btn'>
<view class='shop_car'>
<view class='iconfont icon-gouwuche'></view>
<view>购物车</view>
</view>
<view>
<view class='iconfont icon-shoucang'></view>
<view class='shop_car'>收藏</view>
</view>
</view>
<view class='join_btn'>加入购物车</view>
<view class='immediately_btn'>立即购买</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/index/goodsDetial/goodsDetial.wxss */
page {
background: #f3f5f5;
}
.coupons {
font-size: 30rpx;
color: #222;
display: flex;
}
.goods_detail {
font-weight: bold;
border-bottom: 3rpx solid #ffda44;
}
.graphic_detail {
font-weight: bold;
margin-left: 56rpx;
}
.share {
font-size: 28rpx;
color: #222;
}
.banner_box {
display: flex;
flex-wrap: wrap;
}
.banner_img {
width: 370rpx;
height: 315rpx;
}
.banner_img image {
width: 100%;
height: 100%;
}
.item_list {
padding: 32rpx 25rpx;
background-color: #fff;
margin-bottom: 20rpx;
}
.banner_title {
font-size: 34rpx;
color: #222;
}
.introduce {
font-size: 28rpx;
color: #888;
}
.banner_character {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #888;
margin-top: 40rpx;
}
.banner_price {
display: flex;
/* align-items: center; */
}
.money_icon {
font-size: 22rpx;
color: #222;
}
.money {
font-size: 38rpx;
font-weight: bold;
color: #222;
}
.original_price {
color: #888;
text-decoration: line-through;
}
.display_box {
margin-left: 40rpx;
}
.money_icon2 {
font-size: 22rpx;
color: #f44;
}
.money2 {
font-size: 38rpx;
font-weight: bold;
color: #f44;
}
.vip {
color: #fff;
background-color: #f44;
margin-left: 5rpx;
}
.list_content {
display: flex;
justify-content: space-between;
align-items: center;
}
.content_title {
display: flex;
}
.title {
font-size: 24rpx;
color: #888;
}
.content {
font-size: 24rpx;
color: #222;
margin-left: 47rpx;
}
.icon-jinru {
font-size: 22rpx;
color: #c7c7c7;
}
.more_box {
font-size: 24rpx;
color: #949a9a;
border-top: 1rpx solid #ededed;
display: flex;
justify-content: center;
align-items: center;
padding-top: 24rpx;
margin-top: 35rpx;
}
.icon-zhankai {
font-size: 14rpx;
margin-left: 10rpx;
}
.item_list1 {
background-color: #fff;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 19rpx 16rpx;
}
.hint1 {
font-size: 22rpx;
color: #222;
background-color: #fafafa;
border-radius: 12rpx;
padding: 25rpx 39rpx;
}
.cash_back {
font-size: 28rpx;
font-weight: bold;
color: #222;
}
.red_font {
font-weight: bold;
color: #f44;
}
.attribute {
width: 375rpx;
display: flex;
align-items: center;
/* margin-left: 49rpx; */
}
.attribute_titel {
font-size: 26rpx;
color: #94999a;
}
.stars {
display: flex;
font-size: 26rpx;
color: #222;
margin-left: 35rpx;
}
.icon-pingfen {
font-size: 26rpx;
color: #222;
}
.attribute_content {
font-size: 26rpx;
color: #222;
margin-left: 113rpx;
}
.item_list2, .item_list3, .item_list4, .itme_list5, .item_list6 {
background-color: #fff;
margin-bottom: 20rpx;
}
.user_evaluation {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f3f5f5;
padding: 31rpx 25rpx;
}
.user_evaluation_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.user_evaluation_time {
font-size: 24rpx;
color: #c7c7c7;
display: flex;
align-items: center;
}
.comments_btn {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 23rpx;
color: #949a9a;
margin-top: 24rpx;
}
.icon-message {
font-size: 22rpx;
color: #949a9a;
margin-right: 10rpx;
}
.user_information_box {
padding: 31rpx 25rpx 25rpx 25rpx;
}
.user_information {
display: flex;
justify-content: space-between;
align-items: center;
}
.head_portrait {
width: 62rpx;
height: 62rpx;
}
.head_portrait image {
width: 100%;
height: 100%;
}
.star_box {
margin-left: 25rpx;
}
.the_star {
display: flex;
align-items: center;
}
.stars1 {
display: flex;
}
.user_name {
font-size: 26rpx;
color: #222;
}
.evaluation {
font-size: 24rpx;
color: #222;
margin-top: 25rpx;
}
.evaluation_img {
margin-top: 21rpx;
}
.upload_img_box {
display: flex;
}
.upload_img {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.upload_img image {
width: 100%;
height: 100%;
}
.item_list3 {
padding: 46rpx 44rpx;
}
.item_list4 {
padding: 30rpx 25rpx;
}
.charge_btn {
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #f44;
border: 1rpx solid #f44;
border-radius: 40rpx;
margin-top: 30rpx;
}
.detection_item {
display: flex;
justify-content: space-around;
margin-top: 58rpx;
}
.detection {
display: flex;
justify-content: center;
align-items: center;
}
.line1 {
width: 115rpx;
height: 1rpx;
background: linear-gradient(to right, #fff, #bbb);
}
.line2 {
width: 115rpx;
height: 1rpx;
background: linear-gradient(to left, #fff, #bbb);
}
.detection_title {
font-size: 26rpx;
font-weight: bold;
color: #222;
margin: 0 30rpx;
}
.detection_box {
font-size: 26rpx;
color: #222;
}
.detection_img {
margin: 0 auto;
width: 54rpx;
height: 54rpx;
}
.detection_img image {
width: 100%;
height: 100%;
}
.detection_hint {
font-size: 22rpx;
color: #94999a;
text-align: center;
margin-top: 20rpx;
}
.itme_list5 {
position: relative;
padding: 45rpx 25rpx 30rpx 25rpx;
box-sizing: border-box;
}
.recommended_box {
width: 150rpx;
height: 45rpx;
display: flex;
align-items: center;
justify-content: center;
background: #ffda44;
border-radius: 0 0 16rpx 16rpx;
font-size: 22rpx;
color: #333;
position: absolute;
right: 24rpx;
top: 0;
}
.foretaste_box {
display: flex;
align-items: center;
font-size: 30rpx;
}
.buyer_recommend {
font-size: 22rpx;
color: #94999a;
margin-left: 20rpx;
}
.buyer_name {
font-size: 30rpx;
color: #222;
}
.recommend_content {
background-color: #fafafa;
border-radius: 16rpx;
padding: 25rpx 25rpx 25rpx 25rpx;
margin-top: 30rpx;
font-size: 26rpx;
color: #222;
position: relative;
}
.icon-shangyinhao {
font-size: 22rpx;
color: #e3e3e3;
}
.triangle {
width: 0;
height: 0;
border-left: 60rpx solid #fafafa;
border-top: 30rpx solid transparent;
border-bottom: 30rpx solid transparent;
position: absolute;
top: -30rpx;
left: 50rpx;
}
.recommend_character {
margin-left: 10rpx;
}
.ingredients {
margin-top: 40rpx;
}
.ingredients_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
text-align: center;
}
.ingredients_img {
width: 280rpx;
height: 280rpx;
}
.ingredients_box {
display: flex;
}
.ingredients_img image {
width: 100%;
height: 100%;
}
.ingredients_item {
width: 400rpx;
font-size: 26rpx;
display: flex;
/* margin-left: 34rpx; */
margin-top: 34rpx;
border: 1px solid red;
}
.ingredients_name {
color: #94999a;
width: 80rpx;
}
.ingredients_content {
width: 300rpx;
display: flex;
flex-wrap: wrap;
margin-left: 30rpx;
border: 1px solid red;
}
.graphic_ingredients_box {
margin-top: 40rpx;
}
.graphic_ingredients {
height: 200rpx;
border: 1rpx solid red;
display: flex;
align-items: center;
justify-content: center;
background-image: url('http://hifresh.w.bronet.cn/assets/wxapp/keshihua@2x.png');
margin-bottom: 20rpx;
}
.graphic_ingredients_background {
width: 450rpx;
height: 110rpx;
background-color: #ffb244;
display: flex;
align-items: center;
justify-content: center;
}
.graphic_ingredients_border {
font-size: 38rpx;
color: #fff;
width: 430rpx;
height: 90rpx;
border: 1rpx solid #fff;
display: flex;
align-items: center;
justify-content: center;
}
.item_list6 {
padding: 30rpx 25rpx;
}
.collocation_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
margin-bottom: 40rpx;
}
.collocation {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 39rpx;
}
.collocation_box {
width: 340rpx;
border: 1rpx solid red;
border-radius: 16rpx;
overflow: hidden;
margin-bottom: 20rpx;
}
.collocation_img {
width: 340rpx;
height: 340rpx;
}
.collocation_img image {
width: 100%;
height: 100%;
}
.collocation_content {
background: #fafafa;
font-size: 30rpx;
color: #222;
padding: 22rpx;
}
.bottom_btn {
height: 100rpx;
background: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
.hint_btn {
width: 218rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
.shop_car {
font-size: 18rpx;
color: #747b7d;
}
.join_btn {
width: 266rpx;
height: 100rpx;
background: linear-gradient(to left, #ffda44, #ffb244);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
}
.immediately_btn {
width: 266rpx;
height: 100rpx;
background: linear-gradient(to left, #f99115, #f56800);
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #fff;
}
.tips{
padding: 0 25rpx;
box-sizing: border-box;
}
.tips_content{
margin-top: 30rpx;
line-height: 40rpx;
}
.item_list7 {
height: 368rpx;
background: rgba(255, 255, 255, 1);
border-radius: 16rpx;
box-shadow: 15rpx 0rpx 30rpx rgba(214, 214, 214, 0.6);
font-size: 26rpx;
color: #222;
margin: 0 auto;
margin-bottom: 20rpx;
padding: 34rpx 49rpx;
}
... ...
// pages/cart/cart.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
/**
* 页面的初始数据
*/
data: {
city: '',
imgUrls: [
1, 2, 2
],
num: 5,
current_index: 0,
showad: true, //首页广告控制显示
popup_state: false
},
cancleMask() {
this.setData({
popup_state: false
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
qqmapsdk = new QQMapWX({
key: 'KLXBZ-KAFCF-6LVJZ-JQAAL-NCI65-XTF52'
});
this.getaddress()
},
active_btn() {
this.setData({
current_index: 1
})
},
getaddress() {
var that = this
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {
console.log(res)
var latitude = res.latitude
var longitude = res.longitude
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function(res) {
console.log(res);
var ctiy = res.result.address_component.district
that.setData({
city: ctiy
})
},
fail: function(res) {
console.log(res);
},
complete: function(res) {
console.log(res);
}
});
}
})
},
//控制广告
show_ad() {
this.setData({
showad: false
})
},
//广告页的跳转
goad() {
console.log(1)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<view class='index_top'>
<view class='index_add' bindtap='getaddress'>
<view class='iconfont icon-location'></view>
<text class='city_box'>{{city}}</text>
</view>
<view class='index_input'>
<input placeholder='有机红颜草莓' placeholder-class='holder'></input>
<icon type='search' size='16' color='#222'></icon>
</view>
<view class='iconfont icon-message'></view>
</view>
<view class='nav_box'>
<swiper display-multiple-items='{{num}}' class='swiper_nav_box'>
<swiper-item>
<text class='nav_swiper_active'>推荐</text>
</swiper-item>
<swiper-item bindtap='active_btn'>
<text>中餐</text>
</swiper-item>
<swiper-item>
<text>中餐</text>
</swiper-item>
<swiper-item>
<text>美味海鲜</text>
</swiper-item>
<swiper-item>
<text>美味海鲜</text>
</swiper-item>
</swiper>
<view class='nav_text'>
<text class='iconfont icon-fenlei'></text>
</view>
</view>
<swiper previous-margin='40rpx' next-margin='40rpx' circular='true' display-multiple-items='1' class='swiper_banner_box'>
<swiper-item>
<image src='../imgs/pic2.png'></image>
</swiper-item>
<swiper-item>
<image src='../imgs/pic1.png'></image>
</swiper-item>
<swiper-item>
<image src='../imgs/pic2.png'></image>
</swiper-item>
</swiper>
<view class='safe_box'>
<view>
<text class='iconfont icon-jiance'></text>
<text>安心检测</text>
</view>
<view>
<text class='iconfont icon-xingzhuang'></text>
<text>优选源头</text>
</view>
<view>
<text class='iconfont icon-xingzhuang1'></text>
<text>赔付保证</text>
</view>
</view>
<view class='classfy'>
<image src='../imgs/pic2.png'></image>
</view>
<view class="safety_box function">
<navigator class="safe_item clo" url='goods_detial/goods_detial' hover-class="none">
<image src="../imgs/ic01@2x.png" alt="" mode='aspectFit'></image>
<text>会员俱乐部</text>
</navigator>
<navigator href="" class="safe_item clo" hover-class="none">
<image src="../imgs/ic02@2x.png" alt="" mode='aspectFit'></image>
<text>储值送券</text>
</navigator>
<navigator href="" class="safe_item clo" hover-class="none">
<image src="../imgs/ic03@2x.png" alt="" mode='aspectFit'></image>
<text>邀请有礼</text>
</navigator>
<navigator href="" class="safe_item clo" hover-class="none">
<image src="../imgs/ic04@2x.png" alt="" mode='aspectFit'></image>
<text>每日签到</text>
</navigator>
</view>
<view class='new_person_box'>
<view class="index_title">
<text class="title_left"></text>
<text class="title_mid">超值新人礼包</text>
<text class="title_right"></text>
</view>
<scroll-view class='scroll_box' scroll-x>
<view class='new_person_item'>
<image src='../imgs/pic1.png'></image>
<view class='goods_name'>三纹鱼片</view>
<view>
<text class='rmb'>¥</text>
<text class='pprice'>26.0</text>
<text class='oprice'>¥52.0</text>
</view>
</view>
<view class='new_person_item'>
<image src='../imgs/pic1.png'></image>
<view class='goods_name'>三纹鱼片</view>
<view>
<text class='rmb'>¥</text>
<text class='pprice'>26.0</text>
<text class='oprice'>¥52.0</text>
</view>
</view>
<view class='new_person_item'>
<image src='../imgs/pic1.png'></image>
<view class='goods_name'>三纹鱼片</view>
<view>
<text class='rmb'>¥</text>
<text class='pprice'>26.0</text>
<text class='oprice'>¥52.0</text>
</view>
</view>
</scroll-view>
</view>
<view class='nav_type_box'>
<view class='nav_type_left'>
<view class='nav_type type_active'>
<text class='iconfont icon-liebiao'></text>
<text>列表</text>
</view>
<view class='nav_type'>
<text class='iconfont icon-wangge'></text>
<text>网格</text>
</view>
<view class='nav_type'>
<text class='iconfont icon-datu'></text>
<text>大图</text>
</view>
</view>
<view class='nav_type_right'>
<text class='iconfont icon-shaixuan'></text>
<text>筛选</text>
</view>
</view>
<view class='classfy' style='padding-top:40rpx;'>
<image src='../imgs/pic2.png'></image>
</view>
<view class='goodbox'>
<view class='good_item'>
<view class='good_img'>
<image src='../imgs/pic2.png'></image>
</view>
<view class='good_right'>
<view class='good_name'>泰式冬阴功秘制虾汤620g</view>
<view class='good_stand'>量大好吃无限回购</view>
<view>
<text class='good_pprice'><text class='rmb'>¥</text>26.0</text>
<text class='good_oprice'><text class='rmb'>¥</text>52.0</text>
</view>
<view>
<view class='good_vipbox'>
<view class='good_vipbox_left'>
<text class='good_vip'><text class='rmb'>¥</text> 25.0</text>
<view class='good_vip_spec'>会员专享</view>
</view>
<view class='good_btn'>
<view class='iconfont icon-gouwuche'></view>
</view>
</view>
</view>
</view>
</view>
<view class='good_item'>
<view class='good_img'>
<image src='../imgs/pic2.png'></image>
</view>
<view class='good_right'>
<view class='good_name'>泰式冬阴功秘制虾汤620g</view>
<view class='good_stand'>量大好吃无限回购</view>
<view>
<text class='good_pprice'><text class='rmb'>¥</text>26.0</text>
<text class='good_oprice'><text class='rmb'>¥</text>52.0</text>
</view>
<view>
<view class='good_vipbox'>
<view class='good_vipbox_left'>
<text class='good_vip'><text class='rmb'>¥</text> 25.0</text>
<view class='good_vip_spec'>会员专享</view>
</view>
<view class='good_btn'>
<view class='iconfont icon-gouwuche'></view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class='ad_box' bindtap='show_ad' wx:if='{{showad}}'>
<image src='../imgs/atan@2x.png' mode='widthFix' catchtap='goad'></image>
<view class='iconfont icon-quxiao'></view>
</view>
<!-- 筛选弹窗LXY -->
<view class='masx_box' bindtap='cancleMask' wx:if='{{popup_state}}'>
<view class='popup_box'>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>10分钟</view>
<view class='popup_item_content'>10分钟</view>
<view class='popup_item_content'>10分钟</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>1~2星</view>
<view class='popup_item_content'>1~2星</view>
<view class='popup_item_content'>1~2星</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>微辣</view>
<view class='popup_item_content'>微辣</view>
<view class='popup_item_content'>微辣</view>
<view class='popup_item_content'>微辣</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>
<text class='iconfont icon-xiaoyu'></text>500cal </view>
<view class='popup_item_content'> 500~2000cal </view>
<view class='popup_item_content'> >2000cal</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>烹饪时间</view>
<view class='popup_item'>
<view class='popup_item_content'>10分钟</view>
<view class='popup_item_content'>10分钟</view>
<view class='popup_item_content'>10分钟</view>
</view>
</view>
<view class='popup_content'>
<view class='popup_title'>饮食禁忌/过敏(多选)</view>
<view class='popup_item'>
<view class='popup_item_content'>鸡蛋</view>
<view class='popup_item_content'>乳制品</view>
<view class='popup_item_content'>海鲜</view>
<view class='popup_item_content'>鸡蛋</view>
<view class='popup_item_content'>乳制品</view>
<view class='popup_item_content'>海鲜</view>
<view class='popup_item_content'>鸡蛋</view>
<view class='popup_item_content'>乳制品</view>
<view class='popup_item_content'>后台自定义</view>
</view>
</view>
<view class='popup_hint'>菜系(↓往下轮播可筛选更多属性)</view>
<view class='popup_btn'>
<view class='btn1'>重置</view>
<view class='btn2'>完成</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
page {
background-color: #fafafa;
}
.index_top {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
color: #222;
padding: 15rpx 25rpx;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 2;
background-color: #fff;
border-radius: 16rpx;
}
.city_box {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-align: center;
/* width:80rpx; */
}
.index_add {
display: flex;
align-items: center;
margin-right: 20rpx;
width: 130rpx;
}
.index_input {
display: flex;
align-items: center;
border-radius: 16rpx;
flex: 2;
padding: 10rpx 22rpx;
background-color: #f5f5f5;
}
.index_input icon {
color: #222;
}
.holder {
color: #adadad;
font-size: 24rpx;
}
.icon-location {
color: #222;
font-size: 36rpx;
margin-right: 10rpx;
}
.icon-message {
font-size: 36rpx;
color: #222;
margin-left: 30rpx;
}
.nav_box {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 25rpx 0 0;
height: 85rpx;
position: fixed;
width: 100%;
top: 100rpx;
left: 0;
border-bottom: 1px solid #ededed;
z-index: 2;
background-color: #fff;
}
.swiper_nav_box {
height: 100%;
flex: 1;
}
.nav_box .icon-fenlei {
font-size: 30rpx;
color: #888;
}
.nav_text {
display: flex;
align-items: center;
justify-content: center;
padding-top: 10rpx;
}
.swiper_nav_box swiper-item {
color: #888;
font-size: 28rpx;
text-align: center;
}
.swiper_nav_box swiper-item text {
padding: 26rpx 0 23rpx 0;
height: 100%;
display: inline-block;
}
.nav_swiper_active {
color: #222;
border-bottom: 2px solid #ffda44;
}
.swiper_banner_box {
height: 350rpx;
margin-top: 220rpx;
background-color: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.swiper_banner_box swiper-item{
width: 100%;
}
.swiper_banner_box image {
box-shadow: 1rpx 8rpx 30rpx rgba(38, 84, 9, 0.3);
height: 320rpx;
margin: 0 auto;
display: block;
border-radius: 16rpx;
overflow: hidden;
}
.safe_box {
display: flex;
align-items: center;
justify-content: space-around;
font-size: 24rpx;
color: #222;
/* margin: 30rpx 0 0 0; */
background-color: #fff;
padding: 0 0 30rpx 0;
}
.safe_box .iconfont {
font-size: 28rpx;
margin: 0 10rpx 0 0;
}
/* .ad_mold{
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.4)
} */
.classfy {
/* padding: 20rpx 25rpx; */
background-color: #fff;
height: 200rpx;
overflow: hidden;
/* margin: 0 0 15rpx 0; */
display: flex;
align-items: center;
justify-content: center;
}
.good_img image {
width: 100%;
height: 100%;
}
.classfy image {
width: 100%;
height: 100%;
margin: 20rpx 25rpx;
border-radius: 16rpx;
}
.index_title {
display: flex;
align-items: center;
justify-content: center;
padding: 0 145rpx;
font-size: 38rpx;
color: #26363a;
font-weight: 600;
background-color: #fff;
}
.title_left {
display: inline-block;
flex: 1;
height: 1px;
background: -webkit-linear-gradient(left, #fff, gray, #000);
background: -o-linear-gradient(left, #fff, gray, #000);
background: -moz-linear-gradient(left, #fff, gray, #000);
background: linear-gradient(left, #fff, gray, #000);
}
.title_right {
display: inline-block;
flex: 1;
height: 1rpx;
background: -webkit-linear-gradient(left, #000, gray, #fff);
background: -o-linear-gradient(left, #000, gray, #fff);
background: -moz-linear-gradient(left, #000, gray, #fff);
background: linear-gradient(left, #000, gray, #fff);
}
.title_mid {
margin: 0 46rpx;
}
.safety_box {
display: flex;
align-items: center;
justify-content: space-around;
padding: 32rpx 0;
font-size: 24rpx;
text-align: center;
background-color: #fff;
margin: 0 0 24rpx 0;
}
.safety_box .safe_item {
color: #455255;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
}
.safety_box image {
height: 90rpx;
width: 100%;
}
.clo {
flex-direction: column;
}
.new_person_box {
padding: 50rpx 0 0 0;
margin-bottom: 24rpx;
background-color: #fff;
}
.new_person_swiper {
height: 300rpx;
padding: 0 30rpx;
}
.scroll_box {
white-space: nowrap;
padding: 30rpx 20rpx;
}
.scroll_box {
margin-top: 30rpx;
position: relative;
z-index: 1;
}
.scroll_box .new_person_item {
width: 289rpx;
height: 270rpx;
display: inline-block;
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
border-radius: 16rpx;
margin-right: 30rpx;
margin-bottom: 20rpx;
padding: 0 11rpx;
text-align: center;
}
.goods_name {
font-size: 24rpx;
color: #222;
}
.new_person_item image {
width: 267rpx;
height: 170rpx;
border-radius: 16rpx;
/* position: absolute;
top: -50rpx; */
z-index: 10;
}
.pprice {
font-size: 28rpx;
color: #222;
margin: 0 10rpx 0 0;
}
.oprice {
font-size: 20rpx;
color: #888;
text-decoration: line-through;
}
.ad_box {
height: 100%;
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.ad_box image {
width: 600rpx;
}
.ad_box .iconfont {
color: #fff;
}
.nav_type_right {
}
/* 筛选弹窗 */
.masx_box {
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 5;
background-color: rgba(0, 0, 0, 0.8);
}
.popup_box {
width: 573rpx;
height: 100%;
background-color: #fff;
position: absolute;
right: 0;
overflow-y: scroll;
padding: 0 0 130rpx 0;
}
.popup_content {
padding: 0rpx 25rpx;
}
.popup_title {
font-size: 22rpx;
color: #222;
margin-top: 40rpx;
}
.popup_item {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.popup_item::after {
content: "";
position: relative;
width: 161rpx;
}
.popup_item_content {
width: 161rpx;
height: 65rpx;
font-size: 24rpx;
color: #222;
background-color: #f7f7f7;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 15rpx;
}
.popup_hint {
font-size: 22rpx;
color: #222;
margin-left: 25rpx;
margin-top: 49rpx;
}
.popup_btn {
display: flex;
font-size: 30rpx;
color: #222;
position: fixed;
bottom: 0;
}
.btn1, .btn2 {
width: 287rpx;
height: 100rpx;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
}
.btn2 {
background-color: #ffda44;
}
... ...
// pages/index/production_steps/production_steps.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/index/production_steps/production_steps.wxml-->
<view>
<view class='banner'>
<view class='iconfont icon-fanhui'></view>
<view class='coupons'>2/5</view>
</view>
<view class='banner_img'>
<image src='../../imgs/caipu.png'></image>
</view>
<view class='content_item'>
<view class='production_step'>步骤2</view>
<view class='content'>小米提前淘洗一遍,然后用清水泡2个小时左右。
</view>
<view class='tips'>Tipip:稍候我们会把小米打成糊,所以要提前多泡一会儿,搅拌的时候才会细腻一些。</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/index/production_steps/production_steps.wxss */
.banner_img{
width: 750rpx;
height: 750rpx;
}
.banner_img image{
width: 100%;
height: 100%;
}
.content_item{
padding: 0 25rpx;
font-size: 30rpx;
color: #333;
}
.production_step{
font-size: 34rpx;
font-weight: bold;
color: #333;
margin-top: 51rpx;
}
.content{
margin-top: 30rpx;
}
.tips{
margin-top: 45rpx;
}
\ No newline at end of file
... ...
// pages/my/activityInformation/activityInformation.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/my/coupons/coupons.wxml-->
<view class='banner'>
<view class='iconfont icon-fanhui'></view>
<view class='coupons'>消息</view>
<view class='clear_box'>
<view class='iconfont icon-shanchu'></view>
<view>全部清空</view>
</view>
</view>
<view class='tab'>
<view>活动消息</view>
<view>通知消息</view>
</view>
<view class='content_item'>
<view class='item_list'>
<view class='content_img'>
<image src='../../imgs/pic19.png'></image>
</view>
<view class='list_content'>
<view class='content_title'>春节焕新,万券齐发!</view>
<view class='time_box'>
<view class='time'>2018/03/09</view>
<view class='iconfont icon-diandian'></view>
</view>
</view>
</view>
<!-- <view class='item_list'>
<view class='content_img'>
<image src='../../imgs/pic19.png'></image>
</view>
<view class='list_content'>
<view class='content_title'>春节焕新,万券齐发!</view>
<view class='time_box'>
<view class='time'>2018/03/09</view>
<view class='iconfont icon-diandian'></view>
</view>
</view>
</view>
<view class='item_list'>
<view class='content_img'>
<image src='../../imgs/pic19.png'></image>
</view>
<view class='list_content'>
<view class='content_title'>春节焕新,万券齐发!</view>
<view class='time_box'>
<view class='time'>2018/03/09</view>
<view class='iconfont icon-diandian'></view>
</view>
</view>
</view> -->
<view class='item_list1'>
<view class='item_top'>
<view class='list_left'>
<view class='title'>订单已签收</view>
<view class='content'>香乐丝贝尔蒸蛋糕 608g 牛奶夹心零食散装整箱</view>
</view>
<view>
<view class='head_portrait'>
<image src='../../imgs/pic19.png'></image>
</view>
</view>
</view>
<view class='item_bottom'>
<view class='number'>运单编号:480486451242</view>
<view>18/03/09</view>
</view>
</view>
<view class='item_list1'>
<view class='item_top'>
<view class='list_left'>
<view class='title'>订单已签收</view>
<view class='content'>香乐丝贝尔蒸蛋糕 608g 牛奶夹心零食散装整箱</view>
</view>
<view>
<view class='head_portrait'>
<image src='../../imgs/pic19.png'></image>
</view>
</view>
</view>
<view class='item_bottom'>
<view class='number'>查看详情 ></view>
<view>18/03/09</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
page {
background-color: #fafafa;
}
.banner {
height: 86rpx;
width: 100%;
overflow: hidden;
line-height: 80rpx;
background: #fff;
display: flex;
font-size: 34rpx;
color: #222;
border-bottom: 1rpx solid #ededed;
box-sizing: border-box;
padding: 0 26rpx;
}
.coupons {
font-weight: bold;
margin: 0 auto;
}
.clear_box {
font-size: 28rpx;
color: #222;
display: flex;
}
.icon-shanchu {
font-size: 25rpx;
color: #222;
margin-right: 8rpx;
}
.tab {
display: flex;
justify-content: space-between;
background-color: #fff;
padding: 26rpx 85rpx;
font-size: 28rpx;
color: #222;
border-bottom: 1rpx solid #ededed;
}
.content_item {
padding: 0 25rpx;
}
.item_list {
border-radius: 16rpx;
box-shadow: 15rpx 10rpx 10rpx rgba(0, 0, 0, 0.05);
margin-top: 30rpx;
}
.content_img {
width: 700rpx;
height: 250rpx;
}
.content_img image {
width: 100%;
height: 100%;
}
.list_content {
padding: 25rpx 21rpx;
}
.content_title {
font-size: 30rpx;
font-weight: bold;
color: #222;
}
.time_box {
display: flex;
justify-content: space-between;
margin-top: 17rpx;
}
.time {
font-size: 24rpx;
color: #888;
}
.icon-diandian {
font-size: 32rpx;
color: #949a9a;
}
/* 通知消息 */
.item_list1 {
border-radius: 16rpx;
box-shadow: 15rpx 10rpx 10rpx rgba(0, 0, 0, 0.05);
margin-top: 30rpx;
padding: 30rpx;
}
.list_left {
width: 416rpx;
}
.title {
font-size: 30rpx;
color: #222;
}
.content {
font-size: 26rpx;
color: #333;
margin-top: 22rpx;
}
.item_top {
display: flex;
justify-content: space-between;
align-items: center;
}
.item_bottom {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 22rpx;
color: #888;
margin-top: 24rpx;
}
.head_portrait {
width: 105rpx;
height: 105rpx;
}
.head_portrait image {
width: 100%;
height: 100%;
border-radius: 50rpx;
}
... ...
// pages/my/balance _center/balance _center.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/my/balance _center/balance _center.wxml-->
<view class='banner_box'>
<view class='banner_top'>
<view class='iconfont icon-fanhui'></view>
<view class='hello'>你好,Rico
</view>
<view class='charge_code'>兑换码充值</view>
</view>
<view class='banner_middle'>
<view class='banner_img'>
<image src='http://hifresh.w.bronet.cn/assets/wxapp/coin@2x.png' mode='widthFix'></image>
</view>
<view class='my_balance'>
<view class='balance'>我的余额</view>
<view class='balance_num'>280.00元</view>
</view>
</view>
<view class='banner_bottom'>
<view class='bottom_btn'>
<view class='iconfont icon-chuxuyouli'></view>
<view class='btn_character'>储值有礼</view>
</view>
<view class='bottom_btn1'>
<view class='iconfont icon-zhangdanmingxi'></view>
<view class='btn_character'>账单明细</view>
</view>
</view>
</view>
<view class='content_item'>
<view class='item_list'>
<view class='list_information'>
<view>充值</view>
<view>+60.2</view>
</view>
<view class='time'>2018/3/13 12:23:16</view>
</view>
<view class='item_list'>
<view class='list_information'>
<view>退款</view>
<view>+28.6</view>
</view>
<view class='time'>2018/3/13 12:23:16</view>
</view>
<view class='item_list'>
<view class='list_information'>
<view>消费</view>
<view>-60.6</view>
</view>
<view class='time'>2018/3/13 12:23:16</view>
</view>
<view class='item_list bottom'>
<view class='list_information'>
<view>会员卡返现</view>
<view>+10.0</view>
</view>
<view class='time'>2018/3/13 12:23:16</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/my/balance _center/balance _center.wxss */
.banner_box {
padding: 28rpx 25rpx 0 25rpx;
}
.banner_box {
background-color: #ffda44;
}
.banner_top {
display: flex;
justify-content: space-between;
align-items: center;
}
.hello {
font-size: 34rpx;
font-weight: bold;
color: #333;
}
.charge_code {
font-size: 28rpx;
}
.banner_middle {
display: flex;
align-items: center;
justify-content: center;
margin-top: 35rpx;
}
.banner_img {
width: 238rpx;
height: 210rpx;
}
.banner_img image {
width: 100%;
}
.my_balance {
margin-left: 56rpx;
}
.balance {
font-size: 30rpx;
color: #333;
}
.balance_num {
font-size: 76rpx;
font-weight: bold;
color: #333;
}
.banner_bottom {
display: flex;
margin-top: 32rpx;
}
.bottom_btn,.bottom_btn1 {
color: #949a9a;
width: 100%;
font-size: 30rpx;
padding: 32rpx 92rpx;
display: flex;
align-items: center;
background-color: #f4f6f4;
border-radius: 16rpx 0rpx 0rpx 0rpx;
}
.bottom_btn1 {
color: red;
background-color: #fff;
border-radius: 0rpx 16rpx 0rpx 0rpx;
}
.btn_character{
margin-left: 15rpx;
}
.content_item {
padding: 20rpx 65rpx;
}
.item_list {
padding: 50rpx 0;
border-bottom: 1rpx solid #f2f2f2;
}
.bottom{
border: 0;
}
.list_information {
font-size: 30rpx;
color: #27363b;
display: flex;
justify-content: space-between;
}
.time {
font-size: 22rpx;
color: #949a9a;
}
... ...
// pages/my/balance _center2/balance _center2.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/my/balance _center/balance _center.wxml-->
<view class='banner_box'>
<view class='banner_top'>
<view class='iconfont icon-fanhui'></view>
<view class='hello'>你好,Rico
</view>
<view class='charge_code'>兑换码充值</view>
</view>
<view class='banner_middle'>
<view class='banner_img'>
<image src='http://hifresh.w.bronet.cn/assets/wxapp/coin@2x.png' mode='widthFix'></image>
</view>
<view class='my_balance'>
<view class='balance'>我的余额</view>
<view class='balance_num'>280.00元</view>
</view>
</view>
<view class='banner_bottom'>
<view class='bottom_btn'>
<view class='iconfont icon-chuxuyouli'></view>
<view class='btn_character'>储值有礼</view>
</view>
<view class='bottom_btn1'>
<view class='iconfont icon-zhangdanmingxi'></view>
<view class='btn_character'>账单明细</view>
</view>
</view>
</view>
<view class='content_item'>
<view class='content_title'>
<view class='recharge_amount'>充值金额</view>
<view class='amount_hint'>(储值金额暂不支持提现功能)</view>
</view>
<view class='species_box'>
<view class='species1' wx:for="{{[1,2,3,4]}}">
<view>100
<text>元</text> </view>
<view class='species_content'>送20元红包+1月会员</view>
</view>
</view>
</view>
<view class='bottom_btn2'>使用微信充值</view>
<view class='hint'>点击立即充值,表示您已经同意<text class='hint_font'>《充送活动协议》</text> </view>
\ No newline at end of file
... ...
/* pages/my/balance _center/balance _center.wxss */
.banner_box {
padding: 28rpx 25rpx 0 25rpx;
}
.banner_box {
background-color: #ffda44;
}
.banner_top {
display: flex;
justify-content: space-between;
align-items: center;
}
.hello {
font-size: 34rpx;
font-weight: bold;
color: #333;
}
.charge_code {
font-size: 28rpx;
}
.banner_middle {
display: flex;
align-items: center;
justify-content: center;
margin-top: 35rpx;
}
.banner_img {
width: 238rpx;
height: 210rpx;
}
.banner_img image {
width: 100%;
}
.my_balance {
margin-left: 56rpx;
}
.balance {
font-size: 30rpx;
color: #333;
}
.balance_num {
font-size: 76rpx;
font-weight: bold;
color: #333;
}
.banner_bottom {
display: flex;
margin-top: 32rpx;
}
.bottom_btn, .bottom_btn1 {
color: #949a9a;
width: 100%;
font-size: 30rpx;
padding: 32rpx 0;
text-align: center;
justify-content: center;
display: flex;
align-items: center;
background-color: #f4f6f4;
border-radius: 16rpx 0rpx 0rpx 0rpx;
flex: 1
}
.bottom_btn1 {
background-color: #fff;
border-radius: 0rpx 16rpx 0rpx 0rpx;
}
.btn_character {
margin-left: 15rpx;
}
.content_item {
padding: 0 55rpx;
box-sizing: border-box;
}
.content_title {
display: flex;
padding: 42rpx 0;
box-sizing: border-box;
}
.recharge_amount {
font-size: 30rpx;
font-weight: bold;
}
.amount_hint{
font-size:22rpx;
color: #888;
}
.species_box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.species1 {
padding: 47rpx 33rpx 24rpx 33rpx;
border: 2rpx solid #ffda44;
border-radius: 16rpx;
margin-bottom: 20rpx;
}
.species_content {
font-size: 25rpx;
color: #333;
margin-top: 33rpx;
}
.bottom_btn2 {
width: 90%;
height: 80rpx;
background-color: #ffda44;
border-radius: 40rpx;
box-shadow: 10rpx 10rpx 30rpx rgba(255, 204, 68, 0.6);
font-size: 26rpx;
color: #333;
text-align: center;
line-height: 80rpx;
margin: 100rpx auto 0 auto;
}
.hint {
font-size: 22rpx;
color: #222;
text-align: center;
margin-top: 44rpx;
margin-bottom: 58rpx;
}
.hint_font {
color: #f44;
}
... ...
// pages/my/big/big.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/my/big/big.wxml-->
<view class='content_item'>
<view class='banner_img'>
<image src='../../imgs/pic6.png'></image>
</view>
<view class='item_list'>
<view class='content_img'>
<image src='../../imgs/caipu.png'></image>
<view class='label'>促销标签</view>
</view>
<view class='content_character'>
<view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
<view class='introduce'>量大好吃无限回购</view>
<view class='banner_character'>
<view class='banner_price'>
<view class='money_box'>
<text class='money_icon'>¥</text>
<text class='money'>26.0</text>
<text class='original_price'>¥52.0</text>
</view>
<view class='display_box'>
<text class='money_icon2'>¥</text>
<text class='money2'>20.0</text>
<text class='vip'>会员专享</text>
</view>
</view>
<view class='shop_car'>
<view class='iconfont icon-gouwuche'></view>
</view>
</view>
</view>
</view>
</view>
<view class='content_item'>
<view class='banner_img'>
<image src='../../imgs/pic6.png'></image>
</view>
<view class='item_list'>
<view class='content_img'>
<image src='../../imgs/caipu.png'></image>
<view class='label2'>距离团购结束 21时49分</view>
</view>
<view class='content_character'>
<view class='banner_title'>泰式冬阴功升级版秘制虾汤620g</view>
<view class='introduce'>
<view class='progress_bar_box'>
<view class='progress_bar'>
<view class='bar'></view>
</view>
<view>38%</view>
</view>
<view class='object_hint'>
<text>已拼320份</text><text class='object'>目标500份</text>
</view>
</view>
<view class='banner_character'>
<view class='banner_price'>
<view class='display_box'>
<text class='money_icon2'>¥</text>
<text class='money2'>20.0</text>
<text class='original_price'>¥52.0</text>
</view>
</view>
<view class='shop_car'>
<view class='iconfont icon-gouwuche'></view>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/my/big/big.wxss */
page {
background-color: #ededed;
}
.content_item {
background-color: #fff;
padding: 25rpx 25rpx;
margin-top: 25rpx;
}
.banner_img {
height: 180rpx;
/* padding: 25rpx 25rpx 0 25rpx; */
}
.banner_img image {
width: 100%;
height: 100%;
}
.content_img {
height: 630rpx;
position: relative;
}
.content_img image {
width: 100%;
height: 100%;
}
.label {
width: 140rpx;
height: 140rpx;
font-size: 40rpx;
color: #333;
padding: 28rpx 31rpx;
background-color: #ffda44;
position: absolute;
top: 0;
left: 25rpx;
display: flex;
align-items: center;
justify-content: center;
}
.label2 {
width: 100%;
height: 45rpx;
font-size: 30rpx;
color: #333;
background: linear-gradient(to right, #ffda44, rgba(0, 0, 0, 0));
position: absolute;
bottom: 0;
display: flex;
align-items: center;
padding-left: 20rpx;
}
.progress_bar_box {
display: flex;
align-items: center;
justify-content: space-between;
}
.progress_bar {
width: 87%;
height: 14rpx;
border-radius: 6rpx;
background-color: #e7e7e7;
position: relative;
}
.bar {
width: 50%;
height: 14rpx;
border-radius: 6rpx;
background-color: #ffd15d;
position: absolute;
}
.object_hint {
font-size: 24rpx;
color: #94999a;
}
.object {
margin-left: 30rpx;
}
.item_list {
border-radius: 16rpx;
overflow: hidden;
margin-top: 40rpx;
/* margin-bottom: 20rpx; */
}
.content_character {
background-color: #fafafa;
padding: 25rpx 21rpx;
}
.banner_title {
font-size: 34rpx;
color: #222;
}
.introduce {
font-size: 28rpx;
color: #888;
}
.banner_character {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24rpx;
color: #888;
}
.banner_price {
display: flex;
/* align-items: center; */
}
.money_box {
margin-right: 40rpx;
}
.money_icon {
font-size: 22rpx;
color: #222;
}
.money {
font-size: 38rpx;
font-weight: bold;
color: #222;
}
.original_price {
color: #888;
text-decoration: line-through;
}
.money_icon2 {
font-size: 22rpx;
color: #f44;
}
.money2 {
font-size: 38rpx;
font-weight: bold;
color: #f44;
}
.vip {
color: #fff;
background-color: #f44;
margin-left: 5rpx;
}
.shop_car {
width: 60rpx;
height: 60rpx;
border-radius: 50rpx;
background-color: #ffda44;
box-shadow: 5rpx 0rpx 5rpx rgba(255, 218, 68, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.icon-gouwuche {
font-size: 29rpx;
color: #333;
}
... ...
// pages/my/charger_code/charger_code.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<!--pages/my/charger_code/charger_code.wxml-->
<view class='container'>
<view class='banner'>
<view class='iconfont icon-fanhui'></view>
<view class='title'>兑换码充值</view>
</view>
<view class='charge_code'>
<view class='input_box'>
<input type='text' placeholder='请输入兑换码' placeholder-class='input_font'></input>
</view>
<view class='iconfont icon-saoma'></view>
</view>
<view class='bottom_btn'>确认兑换</view>
<view class='hint'>*每个兑换码仅可以使用一次</view>
</view>
\ No newline at end of file
... ...