羲云社区团购微信小程序 活动详细页 （界面及功能设计）

羲云社区团购小程序 详细页设计

功能介绍

详细页主要是展示活动内容，以及特定的营销功能，我在设计的时候，将各种营销功能进行统一整合，以达到增加订单金额的效果。
1，优惠券，优惠券在很多应用中有会有，但是我的团购中，每一个活动拥有单独的优惠券，仅该活动可用。
2，秒杀 秒杀在一下大的团购小程序中也有，但是，他们的秒杀是对商品的秒杀，处了降价，没有任何的特性
本应用设计的秒杀，用户仅可以购买一件，以达到真正秒杀抢购的效果
3，满赠 满赠是系统的灵魂，用户购买一定金额的货品后，可以获得一定的商品赠品，会非常有效的提高订单量。
4，阶梯价，也可以有效提高单品的销售数量
5，配送运费，为了免单，也可以提高订单量
主要营销功能处了以上外，还有一些比如全场折扣，团长CPS分成等等，均在系统中，可以满足大部分需求。
上图（图片商品仅供参考，完全非销售所用）


在一个社区团购中，非常重要的就是一个整体的设计概念，因为我有自己的实体门店，所以在设计的时候，考虑了非常多的用户购物习惯。
主页代码如下

<import src="../temp.wxml"/>
<template is="nav" data="{{nav}}"></template>
<view class="main_top m" style="background:url({{list.bg}}) no-repeat center;background-size:cover;">
</view>

<view class="main" style="padding-top:{{nav.top+nav.safe_top}}px;">
<view class="shop_info">
<view class="logo" style="background: url({{shop.logo}}) no-repeat center;background-size: cover;"></view>
<view class="shop_name">{{shop.shot_name}}</view>
<view class="shop_addr"><view class="icon icon-bxs-phone-call" wx:if="{{shop.phone}}" bindtap="call"></view>
<view class="icon icon-daohang" bindtap="go" data-url="/pages/map/index?lat={{shop.latitude}}&lng={{shop.longitude}}"></view>
<text wx:if="{{dis}}" bindtap="go" data-url="/pages/map/index?lat={{shop.latitude}}&lng={{shop.longitude}}">距离您{{dis}}</text>
</view>
<view class="shop_info_box">
<text wx:if="{{shop.state==1}}">已实名认证</text><text wx:if="{{shop.hd_num>0}}">{{shop.hd_num}}个活动</text><text wx:if="{{shop.gz_num>0}}">{{shop.gz_num}}人正在关注</text>
</view>

<view class="share_bt_box" >
<view class="icon icon-share1" bindtap="draw_hb"></view>
<view class="bt" bindtap="gz_this" wx:if="{{need_gz==1}}">订阅</view>
</view>
</view>


<view class="edit_box none">
<view class="title">{{list.title}}</view>
<view class="hd_info" wx:if="{{list.people_num==0}}">一大波人正在赶来下单</view>
<view class="hd_info" wx:else>{{list.view}}人看过,共{{list.people_num}}人下单</view>
<!--时间-->
<view class="is_start">
<text>{{list.hd_state}}</text>
<view class="hd_time" wx:if="{{time_show}}">
<view class="item" wx:if="{{time_show.year>0}}"><view class="val">{{time_show.year}}</view><view class="c">年</view></view>
<view class="item" wx:if="{{time_show.days>0}}"><view class="val">{{time_show.days}}</view><view class="c">天</view></view>
<view class="item" wx:if="{{time_show.hour>0}}"><view class="val">{{time_show.hour}}</view><view class="c">时</view></view>
<view class="item" wx:if="{{time_show.minit>0}}"><view class="val">{{time_show.minit}}</view><view class="c">分</view></view>
<view class="val">{{time_show.second}}</view><view class="c">秒</view>
</view>
</view>
<!--特色-->
<view class="hui_box" wx:if="{{miao || mz}}">
<view wx:if="{{miao}}" class="item"><view class="icon icon-creative"></view>仅<text>{{miao.price}}</text>元秒杀商品<text>{{miao.pro.title}}</text>。</view>
<view wx:if="{{mz}}" class="item"><view class="icon icon-creative"></view>满<text>{{mz.price}}</text>元<text>{{mz.title}}</text>。</view>
<view wx:if="{{list.zk<100}}" class="item"><view class="icon icon-jine"></view>全场<text>{{list.zk}}</text>优惠。</view>
</view>

<text class="info">{{list.info}}</text>

<!--html-->
<view class="html">
<view class="item" wx:for="{{list.html}}" wx:key="i" wx:for-index="ins">
<text wx:if="{{item.type=='text'}}" value="{{item.value}}" >{{item.value}}</text>

<image wx:if="{{item.type=='img'}}" src="{{item.value}}" class="img" mode="widthFix" bindtap="preview" data-url="{{item.value}}"></image>
<video wx:if="{{item.type=='vedio'}}" src="{{item.value}}" ></video>

<view class="small" wx:if="{{item.type=='small'}}">
<view class="item" wx:for="{{item.value}}" wx:key="i" wx:index="index" >
<view style="background:url({{item.img_240}}) no-repeat center;background-size: cover;" bindtap="preview" data-url="{{item.img_750}}"></view>
</view>
</view>
</view>

</view>
<!--html 结束-->
<!--tag-->
<view class="tags" wx:if="{{info.tag_num>0}}">
<view class="b">标签:</view>
<text wx:for="{{list.tag}}" wx:key="i" wx:index="index">{{index}}</text>
</view>

<!--活动优惠券-->

</view>

<!--商品-->
<view class="edit_box ">
<view class="edit_box_b">~~ 在售商品 ~~</view>

<!--秒杀-->
<view class="pro_item" wx:if="{{miao}}">
<view class="pro_img" style="background: url({{miao.pro.img[0].img_240}}) no-repeat center;background-size: cover;">
<view class="icon icon-shouqing" wx:if="{{miao.total==0}}"></view>
</view>
<view class="pro_title">{{miao.title?miao.title:miao.pro.title}}</view>
<view class="new_or_hot"><view class="is_hot" style="width:auto;padding-left:5px;padding-right: 5px;">秒杀</view></view>
<view class="pro_price"><text class="c">秒杀价￥</text>{{miao.price}}<text class="old" >{{miao.pro.old>0?miao.pro.old:miao.pro.price}}</text></view>
<view class="buy_bt_box">
<view class="icon icon-add_circle_px_rounded add_cart_bt m m {{miao.total==0?'gay_icon':''}}" bindtap="{{miao.total==0?'':'cart_add'}}" data-c="miao" data-index="0">
<text class="num" wx:if="{{cart.miao.buy>0}}">{{cart.miao.buy}}</text>
</view></view>

</view>

<view class="pro_item" wx:for="{{pro}}" wx:key="id" wx:index="index">
<view class="pro_img" style="background: url({{item.img}}) no-repeat center;background-size: cover;">
<view class="icon icon-shouqing" wx:if="{{item.total==0}}"></view>
</view>
<view class="icon edit_bt icon-bianji" wx:if="{{can_edit==1}}" bindtap="go" data-url="/pages/pro/edit?id={{item.id}}"></view>
<view class="pro_title">{{item.title}}</view>
<view class="new_or_hot">
<view class="is_new" wx:if="{{item.is_new==1}}">新</view>
<view class="is_hot" wx:if="{{item.is_hot==1}}">热</view>
</view>
<view class="pro_info" wx:if="{{item.info}}">{{item.info}}</view>
<view class="pro_price">
<text class="c">￥</text>{{item.p[0]}}.<text class="b">{{item.p[1]}}</text><text class="old" wx:if="{{item.old>item.price}}">{{item.old}}</text></view>

<view class="buy_bt_box {{(item.total>0 && item.total<=5)?'shengyu_show':''}}" wx:if="{{!item.data}}">
<view class="icon icon-add_circle_px_rounded add_cart_bt m {{item.total==0?'gay_icon':''}}" bindtap="cart_add" data-c="pro" data-index="{{index}}"></view>
<view class="has_buy" wx:if="{{cart.pro[index].buy>0}}">
<view class="buy_num">{{cart.pro[index].buy}}</view>
<view class="icon icon-minus-circle1 add_cart_bt" bindtap="cart_add" data-c="pro" data-index="{{index}}" data-ac="jian"></view>
</view>

</view>

<view class="buy_bt_box {{((item.total>0 && item.total<=5) || list.pro[ins]['sell']>0)?'shengyu_show':''}}" wx:if="{{item.data}}">
<view class="select_buy_bt m {{item.total==0?'gay_bt':''}}" bindtap="open_select_data" data-index="{{index}}">选规格
<text class="num" wx:if="{{cart.pro[index].buy>0}}">{{cart.pro[index].buy}}</text>
</view>
</view>

<view class="shengyu" wx:if="{{((item.total>0 && item.total<=5) || list.pro[ins]['sell']>0)}}">
<text wx:if="{{item.total>0 && item.total<=5}}">仅剩{{item.total}}件</text>
<text wx:else>已售{{list.pro[ins]['sell']}}件</text>
</view>

</view>

<!--赠品-->
<view class="pro_item m {{cart.mz.buy>0?'is_zeng':''}}" wx:if="{{mz}}">
<view class="icon icon-xuanzhongjiaobiao"></view>
<view class="pro_img" style="background: url({{mz.pro.img[0].img_240}}) no-repeat center;background-size: cover;">
<view class="icon icon-shouqing" wx:if="{{mz.total==0}}"></view>
</view>
<view class="pro_title">{{mz.title?mz.title:mz.pro.title}}</view>
<view class="new_or_hot"><view class="is_hot">赠</view></view>
<view class="pro_info">{{mz.info?mz.info:'赠品图片仅供参考。'}}</view>
<view class="mz_info">满<text class="c">￥</text>{{mz.price}}赠</view>
</view>
<view class="hd_warn">{{list.warn?list.warn:shop.shop_name+'对本活动拥有最终解释权。'}}</view>
</view>

<view class="edit_box" style="margin-top:30px;">
<view class="edit_box_b">~~ 跟团记录 ~~</view>
<view class="no_order" wx:if="{{!order}}">{{info.no_order?info.no_order:'暂时还没有跟团记录'}}</view>
<view class="order_box" wx:if="{{order}}">
<view class="order_item" wx:for="{{order}}" wx:key="i">
<view class="logo" style="background: url({{item.logo}}) no-repeat center;background-size: cover;"></view>
<view class="nickname">{{item.nickname}}<text>{{item.time}}</text></view>

<view class="order_pro" wx:for="{{item.pro}}" wx:key="i"><text wx:if="{{item.c=='秒杀'}}">【秒杀】</text><text wx:if="{{item.c=='赠品'}}">【赠品】</text>{{item.title}}<view>+{{item.num}}</view>
</view>
</view>

<view class="get_more_order" bindtap="get_more_order" wx:if="{{order_num==10}}">获取更多订单</view>
</view>

</view>


<view class="edit_box">
<view class="msg_input_box" bindtap="win_open" data-c="msg_input_show">
<text class="icon icon-bianji"></text>{{msg.total}}条留言，快来说一下您的感受吧！
</view>

<view class="msg_list" wx:for="{{msg.item}}" wx:key="i">
<view class="msg_user">
  <view class="logo" style="background:url({{item.logo}}) no-repeat center;background-size: cover;"></view>
  <text class="nickname">{{item.nickname}}</text>
  <text class="time">{{item.time}}</text>
</view>
<text class="msg">{{item.msg}}</text>
</view>
<view class="more_msg" bindtap="more_msg" wx:if="{{msg.num==10}}">{{more_msg_text}}</view>


</view>


</view>

<template is="web_bottom" data="{{can_edit}}"></template>


<view class="buy_bottom m {{can_edit==1?'edit_show':''}}">
<view class="buy_box">
<view class="icon_box">
<view class="icon icon-dingdan2" bindtap="go" data-url="/pages/index/order">
<view class="num" wx:if="{{my_order_num>0}}">{{my_order_num>100?'99':my_order_num}}</view>
<text>我的订单</text></view>
<view class="icon icon-gouwuche" bindtap="win_open" data-c="cart_show">
<view class="num" wx:if="{{cart_num>0}}">{{cart_num>100?'99':cart_num}}</view>
<text>购物车</text></view>
</view>
<view class="cart_total" wx:if="{{total>0}}" style="{{cart.quan?'line-height:50px':''}}">
<text class="c">合计:￥</text>{{total}}
</view>
<view class="hd_quan_info" wx:if="{{cart.quan.id>0}}">满<text>{{cart.quan.man}}</text>减<text>{{cart.quan.price}}</text>元</view>

<view class="buy_bt m {{can_buy==1?'':'gay_bt'}}" bindtap="{{can_buy==1?'buy':''}}">{{list.state==1?'跟团购买':'活动未开始'}}</view>
</view>

<view class="adm_bottom">
<view class="icon_box">
<view class="item" bindtap="go" data-url="/pages/shop/order?hd_id={{list.id}}">
<icon class="icon icon-dingdan2"></icon>
<text>订单管理</text>
</view>

<view class="item" bindtap="win_open" data-c="cz_show">
<icon class="icon icon-bianji"></icon>
<text>活动操作</text>
</view>

<view class="item" bindtap="go" data-url="/pages/adm/hd_list">
<icon class="icon icon-list"></icon>
<text>活动列表</text>
</view>

</view>
</view>


</view>



<view class="win m win_{{pro_select_show}}">
<view class="handle">选择商品<icon class="icon icon-close" bindtap="win_close" data-c="pro_select_show"></icon></view>
<scroll-view class="pro_data_list">

<view class="stp1 {{is_select_c==index?'select':''}}" wx:for="{{select_pro.data}}" wx:key="i" wx:index="index" bindtap="{{item.num==0?'':'select_this_c'}}" data-c="{{index}}" >

<view wx:if="{{item.img}}" class="item_img" style="background: url({{item.img}}) no-repeat center;background-size: cover;">
<text class="m">{{index}}</text>
<view class="icon icon-shouqing" wx:if="{{item.num==0}}"></view>
</view>
<view wx:else class="item_bt"><text class="m {{item.num==0?'gay_bt':''}}">{{index}}</text></view>
</view>

<view wx:if="{{select_pro.data[is_select_c]['item']}}" >
<view class="b">选择商品</view>
<view wx:for="{{select_pro.data[is_select_c]['item']}}" wx:index="index" wx:key="i" class="stp1 {{sub_index==index?'select':''}}" bindtap="{{item.num==0?'':'select_this_sub'}}" data-index="{{index}}">
<view wx:if="{{item.img}}" class="item_img" style="background: url({{item.img}}) no-repeat center;background-size: cover;">
<text class="m">{{item.title}}</text>
<view class="icon icon-shouqing" wx:if="{{item.num==0}}"></view>
</view>
<view wx:else class="item_bt"><text class="m {{item.num==0?'gay_bt':''}}">{{item.title}}</text></view>
</view>

</view>

</scroll-view>
<view class="data_buy_bottom">
<view class="select_price">
<text class="c">￥</text>{{select_price}}
<view>{{select_info}}</view>
</view>

<view class="select_num">
  <icon class="icon icon-add_circle_px_rounded" bindtap="select_num_add" data-c="add"></icon>
<text>{{select_num}}</text>
<icon class="icon icon-minus-circle-outline m {{select_num>1?'icon_show':''}}"  bindtap="select_num_add" data-c="jian"></icon>
</view>

<view class="select_add" bindtap="select_cart_add" data-index="{{pro_index}}"><text>￥</text>{{select_total}}</view>
</view>
</view>
<view class="bg" wx:if="{{pro_select_show=='show'}}" bindtap="win_close" data-c="pro_select_show"></view>



<view class="win m win_{{cz_show}}">
<view class="handle">操作<icon class="icon icon-close" bindtap="win_close" data-c="cz_show"></icon></view>
<view class="hd_cz">
<view bindtap="hd_state" data-val="1" wx:if="{{list.state==0}}">发布此活动</view>
<view bindtap="rgo" data-url="/pages/index/editor?id={{list.id}}">修改活动内容</view>
<view bindtap="go" data-url="/pages/hd/analyze?id={{list.id}}"  wx:if="{{list.state==1}}">统计活动信息</view>

<view bindtap="hd_state" data-val="0" wx:if="{{list.state==1}}">结束本活动</view>
<view bindtap="creat_new" data-c="copy">复制并创建新活动</view>
<view bindtap="creat_new" data-c="new">创建全新活动</view>
<view bindtap="hd_del" wx:if="{{list.state==0}}">删除此活动</view>

<view bindtap="win_close" data-c="cz_show">取消操作</view>
</view>

</view>
<view class="bg" wx:if="{{cz_show=='show'}}" bindtap="win_close" data-c="cz_show"></view>



<view class="win m win_{{cart_show}}">
<view class="handle">
<text bindtap="clean_cart" class="clean_cart_bt">清空购物车</text>
我的购物车<icon class="icon icon-close" bindtap="win_close" data-c="cart_show"></icon></view>
<scroll-view scroll-y="true" class="cart_list" scroll-y="true">
<view wx:if="{{!cart.pro && !cart.miao}}" class="no_cart">您的购物车还没有商品</view>
<view wx:else style="float: left;width: 100%;height: 100%;padding-bottom: 20px;">

<view class="cart_item" wx:if="{{cart.miao.buy==1}}">
<view class="cart_img" style="background: url({{miao['pro']['img'][0].img_240}}) no-repeat center;background-size: cover;"></view>
<view class="cart_pro_title">{{miao['pro']['title']}}</view>
<view class="is_miao">秒杀商品</view>
<view class="cart_pro_price"><text class="c">￥</text>{{miao['price']}}<text class="x">×1</text></view>
<view class="num_box"><icon class="icon icon-shanchu" bindtap="miao_del"></icon></view>
</view>



<view  wx:for="{{cart.pro}}" wx:for-index="ins" wx:key="id" wx:for-item="items">
<view wx:if="{{items.data}}" class="if_box ">
<view class="if_box" wx:for="{{items.data}}" wx:key="i" wx:for-index="iix">
<view class="cart_item" wx:for="{{item}}" wx:key="i" wx:index="index"><!--存在商品分类-->
  <view class="cart_img" style="background: url({{pro[ins]['img']}}) no-repeat center;background-size: cover;"></view>
<view class="cart_pro_title">{{pro[ins]['title']}}</view>
<view class="cart_pro_info">{{item.info}}</view>
<view class="cart_pro_price"><text class="c">￥</text>{{item['price']}}</view>
<view class="num_box">
<icon class="icon icon-add_circle_px_rounded" bindtap="cart_num_add" data-ac="data" data-c="{{iix}}" data-index="{{ins}}" data-val="1" data-ins="{{index}}"></icon>
<view>{{item.buy}}</view>
<icon class="icon icon-minus-circle1" bindtap="cart_num_add" data-ac="data" data-c="{{iix}}" data-index="{{ins}}" data-val="-1" data-ins="{{index}}"></icon>
</view>

</view>
</view>
</view>
<view wx:if="{{!items.data}}" class="if_box cart_item">
<view class="cart_img" style="background: url({{pro[ins]['img']}}) no-repeat center;background-size: cover;"></view>
<view class="cart_pro_title">{{pro[ins]['title']}}</view>
<view class="cart_pro_price"><text class="c">￥</text>{{pro[ins]['price']}}</view>

<view class="num_box">
<icon class="icon icon-add_circle_px_rounded" bindtap="cart_num_add" data-index="{{ins}}" data-val="1"></icon>
<view>{{items.buy}}</view>
<icon class="icon icon-minus-circle1" bindtap="cart_num_add" data-index="{{ins}}" data-val="-1"></icon>
</view>
</view>
</view>
<!--满赠-->

<view class="cart_item" wx:if="{{cart.mz.buy==1}}">
<view class="cart_img" style="background: url({{mz['pro']['img'][0].img_240}}) no-repeat center;background-size: cover;"></view>
<view class="cart_pro_title">{{mz['pro']['title']}}</view>
<view class="is_mz">下单可以获得赠品</view>
</view>
</view>
</scroll-view>
</view>

<view class="bg" wx:if="{{cart_show=='show'}}" bindtap="win_close" data-c="cart_show"></view>


<template is="quan" data="{{quan,quan_show,info}}"></template>

<view class="msg_win m msg_{{msg_input_show}}">
<view class="handle">留言<icon class="icon icon-close" bindtap="win_close" data-c="msg_input_show"></icon></view>
<textarea placeholder="说说您对本活动的感受！" bindinput="msg_input" value="{{msg_inout}}"></textarea>
<view class="win_bt"><view bindtap="submit_msg">提交留言</view></view>
</view>
<view class="bg" wx:if="{{msg_input_show=='show'}}" bindtap="win_close" data-c="msg_input_show"></view>


<view class="share_list hb_{{hb_show}}">

<swiper class="share" bindchange="hb_change">
<swiper-item wx:for="{{list.img}}" wx:key="i" wx:index="index" class="share_swiper_box">
<view class="in_box">
<canvas id="hb_{{index}}" type="2d" data-index="{{index}}" disable-scroll="true"></canvas>
</view>
</swiper-item>
</swiper>
<view class="share_save_bt"><text bindtap="hb_save">保存海报</text></view>
<view class="hb_close icon icon-roundclosefill" bindtap="win_close" data-c="hb_show"></view>
</view>
<view class="bg" wx:if="{{hb_show=='show'}}" bindtap="win_close" data-c="hb_show"></view>

CSS

page{background: #fff;}
.main_top{position: absolute;width: 100%;height:300px;z-index: 0;}
.main{float: left;width: 100%;padding:15px;}
.main_top::after{position: absolute;width: 100%;z-index: 1;background:  linear-gradient(rgba(255,255,255,0), #fff);bottom: 0;left: 0;height:150rpx;content: '';}
.shop_info{float: left;width: 100%;margin-top:50px;padding-left:180rpx;min-height: 180rpx;color: #fff;margin-bottom:20px;}
.shop_info .logo{position: absolute;width:140rpx;height: 140rpx;left:10rpx;top: 0;border-radius: 50%;border:4px solid rgba(255,255,255,.8);}
.shop_info .shop_name{float: left;width: 100%;height:40rpx;line-height:40rpx;font-size: 22px;overflow: hidden;font-weight: bold;margin-top:6rpx;text-shadow: 1px 1px #666;}
.nav{overflow: visible;}
.shop_addr{float: left;width: 100%;line-height:20px;margin-top: 5px;font-size: 13px;z-index: 100;}
.shop_addr .icon{float: left;width:20px;height:20px;background: rgba(0,0,0,.3);border-radius: 50%;margin-right: 5px;line-height: 20px !important;text-align: center;}
.shop_addr text{float: left;}
.shop_info_box{float: left;width:80%;}
.shop_info_box text{float: left;padding-left:6px;padding-right:6px;height: 18px;line-height: 18px;background: rgba(0,0,0,.3);border-radius:3px;margin-right:3px;font-size: 12px;margin-top:3px;color: #eee;}
.share_bt_box{position: absolute;right: 0;top:-20px;z-index: 100;}
.share_bt_box .icon{float: right;width:36px;height: 36px;background: rgba(0,0,0,.3);color: #fff;line-height: 36px;text-align: center;border-radius: 50%;margin-right: 10px;font-size: 20px;}
.share_bt_box .bt{float: right;height: 36px;line-height: 36px;margin-right: 10px;padding-right: 15px;padding-left: 15px;border-radius: 18px;background: #00a47c;font-size: 14px;}

.nav_icon{width: 36px;background: rgba(0,0,0,.3);color: #fff;border: none;border-radius: 50%;height: 36px;padding: 0;}
.nav_icon .icon{float: left;width: 100%;height: 100%;padding: 0;margin: 0;text-align: center;font-weight: normal;color: rgba(255,255,255,.8);}
.edit_box{float: left;width: 100%;margin-top: 10px;border-radius:10px}
.title{float: left;width: 100%;line-height:32px;font-size:25px;font-weight:bold;}
.hd_info{float: left;width: 100%;margin-top:8px;color: #ccc;}
.edit_box .info{float: left;width: 100%;line-height:30px;margin-top:10px;font-size: 18px;}

.tags{float: left;width: 100%;margin-top:10px;z-index: 100;}
.tags .b{float: left;width: 100%;font-size: 18px;font-weight: bold;}
.tags text{color: #00a47c;margin-right: 10px;height: 32px;line-height: 32px;}
.hui_box{float: left;width: 100%;margin-top: 10px;padding:15px;background: #e4fff8;border-radius: 10px;}
.hui_box .item{float: left;width: 100%;height:24px;line-height: 24px;color: #aaa;}
.hui_box text{font-weight: bold;margin-left: 2px;margin-right: 2px;color: #00a47c;}
.hui_box .icon{float: left;margin-right: 5px;height: 24px !important;line-height: 24px !important;color: #00a47c;font-size: 17px !important;}


.html{float: left;width: 100%;}
.html .item{float: left;width: 100%;z-index: 100;}
.html .img{float: left;width: 100%;margin-top:10px;z-index:100;}

.small{float: left;width: 100%;z-index: 100;margin-top: 10px;}
.small .item{float: left;width:33.33%;padding: 5px;}
.small .item view{float: left;width: 100%;height:180rpx;}
.small text{position: absolute;font-size: 20px;top: 10px;right: 10px;color: #fff;z-index: 100;}
.small .add{background: #efefef;line-height: 160rpx;font-size: 40px;color: #999;text-align: center;}
.html video{float: left;width: 100%;}
.html text{float: left;width: 100%;margin-top:10px;line-height:30px;font-size: 18px;}

.edit_box_b{float: left;width: 100%;text-align: center;font-size:22px;font-weight: bold;margin-bottom: 5px;}
.pro_item{float: left;width: 100%;min-height:220rpx;padding-left: 250rpx;margin-top:15px;border-radius:10px;padding-top:5px;background: #fff;box-shadow:0px 20px 20px -15px rgba(0,0,0,0.2),1px 0px 0px 0px rgba(0,0,0,0.05) ,-1px -1px 0px 0 rgba(0,0,0,0.05);overflow: hidden;}
.pro_item .icon-shouqing{position: absolute;width:100%;height:220rpx;line-height: 220rpx;text-align: center;font-size:80px;color: rgba(255,255,255,.75);background: rgba(0,0,0,.4);}
.gay_bt{background: #aaa !important;}
.gay_icon{color: #aaa !important;}
.pro_img{position: absolute;width:230rpx;height:220rpx;left: 0;top: 0;}
.pro_title{float: left;width: 100%;line-height:22px;font-size:18px;font-weight: bold;max-height: 44px;overflow: hidden;}

.pro_price{position: absolute;width: 100%;bottom:10rpx;left: 0;padding-left: 250rpx;color: crimson;font-size:24px;font-weight: bold;}
.pro_info{float: left;width: 100%;color: crimson;font-size: 14px;margin-top: 3px;}
.pro_price .c{font-size: 12px;font-weight: normal;}
.pro_price .old{color: #999;font-weight: normal;text-decoration: line-through;margin-left: 10px;font-size: 11px;}
.pro_price .b{font-size: 18px;}
.buy_bt_box{position: absolute;right: 0rpx;bottom:10rpx;z-index: 100;padding-right: 10px;}
.add_cart_bt{font-size:38px;color: #00a47c;float:right;height: 40px;line-height: 40px;}
.buy_bt_box .num{position: absolute;width:20px;height:20px;color: #fff;font-size: 12px;text-align: center;line-height:20px;border-radius: 50%;z-index: 100;top:-2px;background: #00a47c;right: 0px;overflow: hidden;}

.shengyu{position: absolute;right:15px;bottom:10rpx;color:crimson;font-size:13px;}
.buy_bt_box .icon-minus-circle1{color: #eee;font-size:36px;height: 40px;line-height: 40px;}

.buy_bt_box .buy_num{float: right;height:40px;line-height: 40px;padding-left:5px;padding-right:5px;font-size:20px;}
.buy_bt_box .has_buy{float: right;}
.select_buy_bt{float: right;height:36px;line-height: 36px;padding-right: 15px;padding-left: 15px;background: #00a47c;color: #fff;font-size: 16px;border-radius: 20px;}
.select_buy_bt .num{top:-5px}

.new_or_hot{float: left;width: 100%;}
.new_or_hot view{float: left;width:22px;line-height: 22px;text-align: center;line-height: 22px;border-radius:6px;font-size: 12px;color: #fff;margin-right: 5px;margin-top: 5px;}
.new_or_hot .is_new{background: #00a47c;}
.new_or_hot .is_hot{background: crimson;}
.shengyu_show{bottom: 40rpx;}
.mz_info{position: absolute;width: 100%;bottom: 20rpx;padding-left: 250rpx;color:#00a47c;font-size: 18px;font-weight: bold;left: 0;}
.mz_info .c{font-size: 14px;}
.pro_item .icon-xuanzhongjiaobiao{position: absolute;bottom:-2px;right:-2px;font-size: 40px;color: #00a47c;display: none;}
.is_zeng{background: #e1fff0 !important;}
.is_zeng .icon-xuanzhongjiaobiao{display: block;}

.buy_bottom{position: fixed;width: 100%;left: 0;bottom:-60px;background: #fff;text-align: center;z-index: 1000;}
.buy_bottom .buy_box{float: left;width: 100%;height:70px;padding-left:110px;box-shadow: 0px -1px 5px 0 #ccc;padding-right:290rpx;}
.buy_bottom .icon_box{position: absolute;width:100px;left: 0;top:15px;height: 40px;}
.buy_bottom .icon_box .icon{float: left;width: 50%;text-align: center;height:50px;line-height:28px;font-size:30px;}
.buy_bottom .icon_box .icon text{position: absolute;width: 100%;bottom: 0;left: 0;font-size: 12px;color: #666;}
.buy_bottom .icon_box .num{position: absolute;width: 18px;height: 18px;line-height: 18px;font-size: 11px;background: #00a47c;color: #fff;border-radius: 50%;top:-5px;right:10%;}
.buy_bottom .buy_bt{position: absolute;width: 270rpx;right: 10px;top:10px;height:50px;line-height: 50px;border-radius:25px;background: #00a47c;color: #fff;font-size: 16px;text-align: center;}
.cart_total{float: left;width: 100%;height: 60px;line-height: 60px;color: crimson;font-size:22px;font-weight: bold;text-align: left;margin-top:8px;}
.cart_total .c{font-size: 12px;font-weight: normal;}
.hd_quan_info{position: absolute;width: 100%;left: 0;bottom:6px;color: #999;height: 16px;line-height: 16px;font-size: 13px;padding-left:110px;text-align: left;}
.hd_quan_info text{color: #00a47c;font-weight: bold;padding-left: 2px;padding-right: 2px;}

.edit_show{bottom: 0;}

.adm_bottom{width: 100%;height:60px;bottom: 0;left: 0;background: #fff;z-index: 1000;float: left;box-shadow:0px -1px 0 0 #eee;z-index: 100;text-align: center;}
.adm_bottom .icon_box{float: left;width: 100%;z-index: 100;margin-top: -10px;}
.adm_bottom .item{float: left;width: 33.33%;text-align: center;color: #00a47c;}
.adm_bottom .item .icon{float: left;width: 100%;height:30px;line-height: 30px;font-size: 30px;text-align: center !important;}
.adm_bottom .item text{float: left;width: 100%;height: 20px;line-height: 20px;font-size: 11px;color: #666;}



.hd_cz{float: left;width: 100%;padding-bottom: 20px;}
.hd_cz view{float: left;width: 100%;height:60px;line-height:60px;font-size: 18px;text-align: center;}
.no_order{float: left;width: 100%;margin-top:10px;text-align: center;color: #999;font-size: 17px;}
.hd_warn{float: left;width: 100%;margin-top: 10px;color: crimson;font-size: 14px;line-height:18px;}


.edit_box .handle{float: left;width: 100%;height: 32px;line-height: 32px;font-size: 18px;font-weight: bold;}

.cart_list{float: left;width: 100%;max-height:75vh;min-height: 30vh;overflow: hidden;padding-left: 10px;padding-right: 10px;padding-bottom:10px;border-bottom: 1px solid #eee;}
.cart_item{float: left;width: 100%;height:160rpx;margin-top: 5px;padding-left:180rpx;padding-top: 10rpx;}
.cart_item .cart_img{position: absolute;width: 160rpx;height: 140rpx;top: 10rpx;left:0;border-radius: 5px;}
.cart_pro_title{float: left;width: 100%;line-height: 20px;max-height: 40px;overflow: hidden;font-size: 17px;font-weight: bold;}
.cart_pro_price{position: absolute;width: 100%;color: #00a47c;bottom: 10rpx;padding-left: 180rpx;left: 0;font-size:20px;}
.cart_pro_price .c{font-size: 12px;}
.cart_pro_price .x{margin-left: 10px;color: #000;font-size: 16px;}
.cart_pro_info{float: left;width: 100%;line-height: 20px;color: crimson;}
.num_box .icon-shanchu{font-size: 22px !important;color: #999;}
.num_box{position: absolute;bottom:0rpx;right: 0;z-index: 100;}
.num_box icon{float: right;font-size:32px;height: 32px;line-height: 32px;}
.num_box view{float: right;height: 32px;line-height: 32px;width:20px;font-size:18px;text-align: center;}
.num_box .icon-add_circle_px_rounded{color: #00a47c;}
.num_box .icon-minus-circle1{color: #eee;}
.cart_item .is_miao{float: left;height: 20px;line-height: 20px;background:crimson;color: #fff;font-size: 12px;padding-left: 5px;padding-right: 5px;border-radius: 5px;margin-top: 5px;}
.cart_item .is_mz{float: left;margin-top: 5px;font-weight: bold;color:#00a47c;font-size:16px;}
.is_start{float: left;width: 100%;font-size: 16px;font-weight: normal;margin-top:8px;}
.is_start text{float: left;color: #ccc;margin-right:5px;height: 24px;line-height: 24px;}

.hd_time{float: left;}
.hd_time .item{float: left;}
.hd_time .val{float: left;padding-left:5px;padding-right:5px;color: #fff;height: 24px;line-height: 24px;background:#00a47c;border-radius:5px;margin-left: 3px;min-width:24px;text-align: center;font-size: 14px;font-weight: bold;}
.hd_time .c{float: left;height: 24px;line-height: 24px;color: #666;font-size: 14px;margin-left: 3px;}


.no_cart{float: left;width: 100%;color: #999;margin-top: 10px;font-size: 16px;}
.clean_cart_bt{position: absolute;left: 10px;font-size:15px;color:#00a47c;font-weight: normal;top:8px;z-index: 100;}

.pro_data_list{float: left;width:100%;padding-left: 5px;padding-right:5px;min-height:50vh;padding-bottom:70px;position: relative;max-height: 75vh;}
.pro_data_list .stp1{float: left;width: 33.33%;padding: 5px;text-align: center;}
.pro_data_list .item_img{float: left;width: 100%;height:180rpx;border-radius: 5px;overflow: hidden;}
.pro_data_list .item_img text{position: absolute;width: 100%;height: 25px;line-height: 25px;bottom: 0;left: 0;background: rgba(0,0,0,.5);color: #fff;font-size: 13px;overflow: hidden;}
.item_img .icon-shouqing{position: absolute;width: 100%;height:180rpx;line-height: 180rpx;background: rgba(0,0,0,.4);color: rgba(255,255,255,.5);text-align: center;font-size:60px;}

.pro_data_list .b{float: left;width: 100%;height: 32px;line-height:32px;border-bottom: 1px solid #eee;margin-bottom: 5px;}

.pro_data_list .item_bt{float: left;width: 100%;height: 180rpx;}
.pro_data_list .item_bt text{float: left;width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 40rpx;padding-left: 10px;padding-right: 10px;background: #efefef;font-size: 13px;overflow: hidden;margin-top: 50rpx;}

.pro_data_list .select text{background: #00a47c;color: #fff;}
.data_buy_bottom{position: absolute;width: 100%;height:70px;bottom: 0;left: 0;padding-left: 10px;padding-right: 120px;padding-bottom:15px;box-shadow: -1px 0 5px 0px #ccc;}
.select_price{float: left;width:50%;height: 50px;line-height:35px;font-size: 20px;font-weight: bold;color: crimson;margin-top: 5px;}
.select_price text{float: left;font-size: 12px;font-weight: normal;}
.select_price view{position: absolute;width: 100%;bottom: 0;color: #00a47c;font-size: 14px;left: 0;font-weight: normal;margin-top: 5px;line-height: 16px;}
.select_num{float:right;width: 50%;margin-top: 5px;}
.select_num icon{float: right;height: 50px;line-height: 50px;font-size: 30px;color: crimson;}
.select_num  text{float: right;height: 50px;line-height: 50px;padding-left: 5px;padding-right: 5px;font-size: 18px;}
.select_add{position: absolute;width: 100px;height: 40px;line-height: 40px;top:10px;right:10px;background: crimson;color: #fff;font-size:16px;border-radius: 20px;text-align: center;}
.select_add text{font-size: 12px;}
.select_num .icon-minus-circle-outline{color: #ccc;}
.select_num .icon_show{color: #999;}
.if_box{float: left;width: 100%;}

.win .handle{height:50px;line-height:50px;border-bottom: 1px solid #eee;}
.win{padding-top:50px;}

.order_box{float: left;width: 100%;}
.order_item{float: left;width: 100%;padding-left:50px;border-bottom: 1px solid #eee;margin-top: 10px;padding-bottom:8px;}
.order_item .logo{position: absolute;width:40px;height:40px;border-radius: 50%;left: 0;top:0px;}
.order_item .nickname{float: left;width: 100%;height:40px;line-height: 40px;font-size:18px;font-weight: bold;padding-right: 100px;overflow: hidden;}
.order_item .nickname text{position: absolute;right: 0;top: 0;font-size: 13px;font-weight: normal;color: #999;}
.order_pro{float: left;width: 100%;height:26px;line-height: 26px;font-size: 15px;text-align: right;overflow: hidden;padding-right:30px;}
.order_pro view{position: absolute;width:30px;color: #000;right: 0;top: 0;font-weight: bold;}
.order_pro text{font-weight: bold;color: crimson;}
.get_more_order{float: left;width: 100%;margin-top: 10px;color: #ccc;text-align: center;font-size: 15px;z-index: 100;}
.none{display: block;}
.edit_bt{position: absolute;right: 5px;top: 5px;z-index: 100;color: crimson;font-size: 20px;}

.msg_input_box{float: left;width: 100%;margin-top: 20px;height:50px;line-height: 50px;text-align: center;border-radius: 5px;background: #efefef;color: #666;}


.msg_win textarea{float: left;width: 100%;margin-top: 10px;height:100px;}
.win_bt{float: left;padding-left: 10%;padding-right: 10%;margin-top: 5px;}
.win_bt view{float: left;width: 100%;height:50px;line-height:50px;background: #00a47c;color: #fff;text-align: center;font-size: 17px;border-radius: 5px;z-index: 100;}

.msg_list{float: left;width: 100%;padding-top: 10px;padding-bottom: 10px;border-bottom: 1px solid #eee;}
.msg_user{float: left;width: 100%;height: 36px;line-height: 36px;padding-left: 42px;padding-right: 50px;}
.msg_user .logo{position: absolute;width: 36px;height: 36px;left: 0;top: 0;border-radius: 50%;}
.msg_user .nickname{float: left;width: 100%;overflow: hidden;font-size: 17px;}
.msg_user .time{position: absolute;right: 0;color: #999;font-size: 14px;}
.msg_list .msg{float: left;width: 100%;line-height:26px;font-size: 15px;margin-top: 10px;color: #666;}
.more_msg{float: left;width: 100%;margin-top: 10px;color: #999;text-align: center;font-size: 14px;}


.share{width: 100%;padding-left: 20px;padding-right: 20px;height:70vh;overflow: hidden;float: left;}
.share_swiper_box{float: left;width: 100%;height:70vh;}
.share_swiper_box .in_box{float: left;width: 100%;height: 100%;}
canvas{float: left;width: 100%;height: 100%;}
.share_list{position: fixed;width: 100%;height: 100vh;left: 0;top: 0;z-index: 10000000;padding-top: 10vh;display: none;}
.share_save_bt{float: left;width: 100%;text-align: center;margin-top: 40px;}
.share_save_bt text{padding-top: 15px;padding-right:40px;padding-left:40px;padding-bottom: 15px;border-radius: 5px;color: #fff;background: #00a47c;z-index: 1000;}
.hb_show{display: block;}
.hb_close{font-size: 40px;color: rgba(255,255,255,.5);float: left;margin-top:30px;z-index: 1000;text-align: center;width: 100%;}

JS代码由于没有统一的设计以及代码还处于开发阶段，所以暂时不提供

测试地址：app.zjhn.top/test/
试用地址:app.zjhn.top
注册后可以完全免费测试和试用，代码会不断的进行更新