小程序--首页

<import src="../../template/baseNavigationBar.wxml"/>
<template is="navigationBar" data="{{...item}}"></template>
<swiper
        indicator-dots="true"
        autoplay="true"
        interval="2000"
        duration="500"
        indicator-color="rgba(0,0,0,0.5)"
        indicator-active-color="red"
        circular="true"
>
    <block wx:for="{{imgUrls}}" wx:key="{{index}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" style="width: 100%;height: 360rpx"/>
        </swiper-item>
    </block>
</swiper>

<!-- 进入直播页面入口 -->
<view  class='enter-live' bindtap="enterLive" data-id="{{room_id}}">
    <text class='tag-item iconfont icon-live'></text>
    <view class='tag-item tint'>直播中</view>
    <text class='tag-item iconfont icon-jiantouarrow487'></text>
  </view>

<!--搜索-->
<view class="hot_search">
    <view bindtap="bindClassify">
        <text class="iconfont icon-mulu"></text>
    </view>
    <view class="section">
        <input type="text" placeholder="热门搜索 “老过石素章”"/>
    </view>
</view>
<!--分类-->

<view class="classify">
    <!--左面-->
    <view class="left_classify">
        <view class="classify_title">
            <view class="class_title">直播</view>
            <view class="class_brief">三生石系列直播</view>
        </view>
        <view class="left_img">
            <image src="../../images/5.png" mode="widthFix"></image>
        </view>
    </view>
    <!--右面-->
    <view class="right_classify">
        <view class="r_classify r_classify_top">
            <view class="classify_title">
                <view class="class_title">最新上线</view>
                <view class="class_brief">定制十二生肖印章</view>
            </view>
            <view class="right_img1">
                <image src="../../images/7.png" mode="widthFix"></image>
            </view>
        </view>
        <view class="r_classify">
            <view class="classify_title">
                <view class="class_title">九大系列</view>
                <view class="class_brief">传家宝文创产品</view>
            </view>
            <view class="right_img2">
                <image src="../../images/6.png" mode="widthFix"></image>
            </view>
        </view>

    </view>
</view>
<!--活动专区-->
<view class="active_area">
    <view class="active_title">活动专区</view>
    <view>
        <image src="../../images/44.png" style="width: 100%;height: 290rpx;border-radius: 8rpx"></image>
    </view>
</view>

<!--热门推荐-->

<view class="active_area">
    <view class="active_title" style="color: #c90000">热门推荐</view>
    <view class="hot_goods">
        <view class="hot_goods_item" bindtap="bind_goods_item">
            <view class="goods_img">
                <image src="../../images/img.png" mode="widthFix"></image>
            </view>
            <view class="goods_content">
                <view class="hot_goods_title">青田印章青田印章青田印章青田印章青田印章青田印章</view>
                <text class="hot_goods_price">￥5500</text>
            </view>
        </view>
        <view class="hot_goods_item">
            <view class="goods_img">
                <image src="../../images/img.png" mode="widthFix"></image>
            </view>
            <view class="goods_content">
                <view class="hot_goods_title">青田印章青田印章青田印章青田印章青田印章青田印章</view>
                <text class="hot_goods_price">￥5500</text>
            </view>
        </view>
        <view class="hot_goods_item">
            <view class="goods_img">
                <image src="../../images/img.png" mode="widthFix"></image>
            </view>
            <view class="goods_content">
                <view class="hot_goods_title">青田印章青田印章青田印章青田印章青田印章青田印章</view>
                <text class="hot_goods_price">￥5500</text>
            </view>
        </view>
        <view class="hot_goods_item">
            <view class="goods_img">
                <image src="../../images/img.png" mode="widthFix"></image>
            </view>
            <view class="goods_content">
                <view class="hot_goods_title">青田印章青田印章青田印章青田印章青田印章青田印章</view>
                <text class="hot_goods_price">￥5500</text>
            </view>
        </view>
    </view>
</view>
<button bindtap="bind_headline">头条</button>
<button bindtap="bindCraftsman">匠人信息</button>
<button bindtap="bindmaster">大师信息</button>
<button bindtap="bindstorecard">店铺名片</button>

@import "../../lib/style/iconfont.wxss";
@import "../../lib/style/base.wxss";
@import "../../lib/style/baseNavigationBar.wxss";
page {
  background-color: #f3f3f3;
}
swiper {
  display:block;
  height:360rpx;
  margin-top: 140rpx;
}

.hot_search {
  display: flex;
  padding: 20rpx;
  align-items: center;
  background: white;
}
.icon-mulu {
  font-size: 66rpx;
}
.section {
  flex: 1;
  border: 2rpx solid #cccccc;
  border-radius: 6rpx;
  margin-left: 10rpx;
}
.section input {
  width: 100%;
  text-align: center;
  padding: 8rpx;
}

/*活动专区*/
.active_area {
  background: white;
  padding: 0 20rpx 40rpx;
  margin-top: 20rpx;
}
.active_title {
  padding: 20rpx;
  text-align: center;
  font-weight: bold;
  font-size: 32rpx;
  margin-bottom: 20rpx;
}

/*热门推荐*/
.hot_goods {
  display: flex;
  flex-wrap: wrap;
}
.hot_goods_item {
  width: 49%;
  margin-bottom: 20rpx;
}
.hot_goods_item:nth-child(2n+1){
  margin-right: 2%;
}
.goods_img {
  width: 100%;
}
.goods_img  image {
  width: 100%;
  border-top-left-radius: 8rpx;
  border-top-right-radius: 8rpx;
}
.goods_content {
  box-shadow: 0 5rpx 8rpx 4rpx #f0f0f0;
  padding: 20rpx;
  border-bottom-left-radius: 8rpx;
  border-bottom-right-radius: 8rpx;
  line-height: 1.4;
}
.hot_goods_title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  font-size: 24rpx;
  color: #4c4c4c;
}
.hot_goods_price {
  color: #c90000;
  font-size: 24rpx;
}

/*分类*/
.classify {
  background: white;
  margin-top: 20rpx;
  display: flex;
}
.left_classify {
  position: relative;
  width: 50%;
  height: 294rpx;
  padding: 36rpx 20rpx;
}
.right_classify {
  width: 50%;
}
.r_classify {
  position: relative;
  width: 100%;
  height: 147rpx;
  padding: 36rpx 20rpx;
}
.class_title {
  font-weight: bold;
  font-size: 30rpx;
}
.class_brief {
  font-size: 24rpx;
  color: #828282;
  transform: scale(0.9);
  transform-origin: left;

}
.r_classify_top:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2rpx;
  background: #d9d9d9;
  bottom: 0;
  left: 0;
}
.left_classify:after {
  position: absolute;
  content: "";
  width: 2rpx;
  height: 100%;
  background: #d9d9d9;
  right: 0;
  top: 0;
}
.left_img {
  width: 154rpx;
  position: absolute;
  right: 36rpx;
  top: 84rpx;
}
.left_img image {
  width: 100%;
}
.right_img1 {
  width: 161rpx;
  position: absolute;
  right: 10rpx;
  top: 50rpx;
}
.right_img1 image {
  width: 100%;
}
.right_img2 {
  width: 132rpx;
  position: absolute;
  right: 26rpx;
  top: 38rpx;
}
.right_img2 image {
  width: 100%;
}

.enter-live{
  display: flex;
  position: fixed;
  right: 0;
  top: 220rpx;
  background: -webkit-linear-gradient(left,#c23e38,#ef906d);
  color: #fff;
  height: 26px;
  line-height: 26px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  align-items: center;
  box-sizing: border-box;
  font-size: 12px;
  justify-content: center;
  width: 78px;
  padding: 0 0px 0 4px;
  z-index: 2;
}
.enter-live .tag-item{
 font-size: 12px;
 color: #fff;
}
.enter-live .icon-live{
  font-size: 16px;
  color: #fff;
  margin-right: 2px;
}
.enter-live .tint{
  margin-right: 1px;
}