小程序界面布局实例

最新推荐文章于 2024-06-23 12:03:26 发布

编程有点甜

最新推荐文章于 2024-06-23 12:03:26 发布

阅读量468

点赞数

分类专栏：小程序文章标签： css css3 小程序前端

本文链接：https://blog.csdn.net/qq_55096795/article/details/129437048

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

搜索框

图片
在这里插入图片描述

wxml

<view class="search">
  <view class="weui-search-bar">
    <view class="weui-search-bar__form">
      <!-- 最初始时的搜索框 -->
      <view class="weui-search-bar__box">
        <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
        <input type="text" class="weui-search-bar__input" model:value="{{search_value}}" placeholder="搜索" />
      </view>
      <!-- 可编辑时的搜索框 -->
      <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
        <icon class="weui-icon-search" type="search" size="14"></icon>
        <view class="weui-search-bar__text">
          找商品 上民悦
        </view>
      </label>
    </view>
    <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="get_input">搜索</view>
    <!-- 取消搜索 -->
    <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
  </view>
</view>

// 使文本框进入可编辑状态
  showInput: function () {
    this.setData({
      inputShowed: true //设置文本框可以输入内容
    });
  },
  // 取消搜索
  hideInput: function () {
    this.setData({
      inputShowed: false
    });
  },

wxss

/* 搜索栏样式 */
.weui-search-bar {
  /* color: hotpink; */
  position: relative;
  padding: 8px 10px 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  /* 外边框的颜色 */
  background-color: #6bcd82;
  /* border-top: 1rpx solid #D7D6DC; */
  border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search {
  margin-right: 4px;
  font-size: inherit;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__text {
  display: inline-block;
  font-size: 16px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #000;
}
.weui-search-bar__label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  border-radius: 3px;
  text-align: center;
  color: #3cff6a;
  background: #FFFFFF;
  line-height: 28px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #FFFFFF;
  white-space: nowrap;
}

带右上角加号搜索框

图片
在这里插入图片描述

在这里插入图片描述

wxml

<view class="search">
  <view class="search_1">
    <input type="text" name="" id="" placeholder="选商品 上民悦"/>
  </view>
  <view class="search_2" bindtap="more_menu">
    <icon class="iconfont icon-add-fill" />
  </view>
  <view class="more_menu" wx:if="{{more_menu}}">
    <view class="more_menu_1" wx:for="{{json.more_menu_detail.length}}" wx:key="index" data-index="{{index}}" bindtap="more_menu_select">
      {{json.more_menu_detail[index]}}
    </view>
  </view>
</view>

more_menu_select(e) {
	console.log(e.currentTarget.dataset.index);
},

wxss

input {
  border-color: rgb(110, 155, 110);
  border-style: solid;
  border-width: 2rpx;
  border-radius: 20rpx;
  text-align: center;
}
.search {
  position: relative;
  padding: 20rpx;
}
.search_1 {
  position: relative;
  /* width: 90%; */
  width: 639rpx;
  float: left;
}
.search_2 {
  position: relative;
  width: 71rpx;
  /* width: 10%; */
  float: right;
}
.more_menu {
  position: absolute;
  background-color: rgb(117, 255, 186);
  text-align: center;
  /* padding: 2%; */
  padding: 14.2rpx;
  right: 80rpx;
  border-radius: 20rpx;
  color: rgb(107, 205, 130);
  border-style: solid;
  border-color: red;
  border-width: 5rpx;
  border-radius: 10px;
  background-color: #fff;
  z-index: 999;
}
.more_menu_1 {
  margin-bottom: 2rpx;
  margin-top: 2rpx;
  padding-top: 14.2rpx;
  padding-bottom: 14.2rpx;
}

轮播图

列表展示

图片
在这里插入图片描述

wxml

<!-- 基本菜单 -->
<view class="base_menu">
  <view class="base_menu_1" wx:for="{{json.base_menu.length/2}}" wx:key="index" data-index="{{index}}" bindtap="menu_selected">
    <view class="base_menu_1_1">
      <image class="base_menu_image" src="{{json.base_menu[index*2] == '' ? image_url : json.base_menu[index*2]}}" mode=""/>
    </view>
    <view class="base_menu_1_2">
      <text>{{json.base_menu[index*2+1]}}</text>
    </view>
  </view>
</view>

menu_selected(e) {
    var index = e.currentTarget.dataset.index;
    if (index == 8) {
      wx.navigateTo({
        url: '/pages/index_technology/index_technology',
      })
    } else if (index == 9) {
      wx.navigateTo({
        url: '/pages/index_hall/index_hall',
      })
    } else {
      wx.navigateTo({
        url: '/pages/index_base_menu_details/index_base_menu_details',
      })
    };    
  },

wxss

.base_menu {
  margin: 10px 10px 0px 10px;
  height: 360rpx;
  position: relative;
  background-color: #fff;
  border-radius: 20px;
  color: #909090;
  border-width: 1rpx;
  border-color: #3cff6a;
  border-style: solid;
}
.base_menu_1 {
  width: 140rpx;
  height: 150rpx;
  position: relative;
  float: left;
  padding-top: 10px;
}
.base_menu_1_2 {
  text-align: center;
}
.base_menu_image {
  width: 50px;
  height: 50px;
  position: relative;
  left: 25rpx;
  right: 25rpx;
  border-radius: 50%;
  border-style: solid;
  border-color: #cdcdcd;
  border-width: 1px;
}

分类列表展示

图片
在这里插入图片描述

wxml

<view class="recommend">
  <view class="recommend_1">
    <view class="recommend_1_1 {{recommend_menu_index == index ? 'recommend_checked' : ''}}" wx:for="{{json.recommend_menu}}" wx:key="index" data-index="{{index}}" bindtap="change_recommend_menu_index">
      <text>{{json.recommend_menu[index]}}</text>
    </view>
  </view>
  <view class="recommend_2">
    <view class="recommend_2_1" wx:for="{{json.recommend_menu_details[recommend_menu_index].length/2}}" wx:key="index" data-index="{{index}}">
      <view>
        <image class="recommend_image" src="{{json.recommend_menu_details[recommend_menu_index][index*2] == '' ? image_url : json.recommend_menu_details[recommend_menu_index][index*2]}}" mode=""/>
      </view>
      <view>
        <text style="font-size: smaller;">{{json.recommend_menu_details[recommend_menu_index][index*2+1]}}</text>
      </view>
    </view>
  </view>
</view>

change_recommend_menu_index: function (e) {
   var that = this;
   that.setData({
       recommend_menu_index: e.currentTarget.dataset.index
   });
   console.log(e.currentTarget.dataset.index);
 },

wxss

.recommend {
  margin: 10px 10px 0px 10px;
  height: 230px;
  position: relative;
  background-color: #aff;
  border-radius: 40rpx;
  text-align: center;
}
.recommend_1 {
  width: 100%;
  height: 40px;
  line-height: 80rpx;
  position: relative;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #eeeeee;
}
.recommend_1_1 {
  width: 25%;
  width: 175rpx;
  height: 100%;
  float: left;
  position: relative;
}
.recommend_2 {
  width: 100%;
  height: 200rpx;
  text-align: center;
  color: #111111;
}
.recommend_2_1 {
  position: relative;
  width: 140rpx;
  height: 160rpx;
  padding-top: 5px;
  position: relative;
  float: left;
}
.recommend_checked {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #3cff6a;
  color: #3cff6a;
}
.recommend_image {
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 50%;
  border-style: solid;
  border-color: #cdcdcd;
  border-width: 1px;
}

限时抢购

图片
在这里插入图片描述

wxml

<view class="limit_snap">
  <view class="limit_snap_1">
    <view class="limit_snap_1_1">
      <text>限 时 抢 购</text>
    </view>
    <view class="limit_snap_1_2">
      <text>苹果直降</text><text style="color: red;">31%</text> >
    </view>
  </view>
  <view class="limit_snap_2">
    <view class="limit_snap_2_1" wx:for="{{json.recommend_menu_details}}" wx:key="index" data-index="{{index}}">
      <view>
        <image class="limit_snap_image" src="{{image_url}}" mode=""/>
      </view>
      <view class="limit_snap_2_1_2">
        <view style="text-align: center;">
          <text>{{json.limit_menu[index][1]}}</text>
        </view>
        <view>
          <text class="limit_snap_now_sal">{{json.limit_menu[index][2]}}</text>
          <text class="limit_snap_old_sal">{{json.limit_menu[index][3]}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

wxss

.limit_snap {
  margin: 10px 10px 0px 10px;
  height: 155px;
  position: relative;
  background-color: #ffffee;
  border-radius: 20px;
}
.limit_snap_1 {
  height: 25px;
  /* background-color: #000; */
}
.limit_snap_1_1 {
  padding: 10px 0 10px 10px;
  font-weight: 700;
  position: relative;
  /* width: 40%; */
  width: 140px;
  float: left;
}
.limit_snap_1_2 {
  padding: 10px 10px 10px 0;
  position: relative;
  width: 175px;
  float: right;
  text-align: right;
}
.limit_snap_2 {
  /* width: 95%; */
  padding: 10px 10px 10px 10px;
}
.limit_snap_2_1 {
  width: 25%;
  /* width: 160rpx; */
  /* width: 25%; */
  height: auto;
  float: left;
  text-align: center;
}
.limit_snap_2_1_2 {
  position: relative;
  font-size: xx-small;
}
.limit_snap_image {
  width: 75px;
  height: 75px;
  position: relative;
  border-radius: 20%;
  border-style: solid;
  border-color: #cdcdcd;
  border-width: 1px;
}
.limit_snap_now_sal {
  /* width: 50%; */
  width: 80rpx;
  float: left;
  text-align: right;
  font-size: x-small;
  color: red;
}
.limit_snap_old_sal {
  width: 50%;
  width: 80rpx;
  text-decoration:line-through;
  float: right;
  text-align: left;
  font-size: x-small;
  color: #aaa;
}

列表视频

图片

wxml

<view class="square_menu">
  <view class="square_menu_1">
    <view class="square_menu_1_1 {{index == menu_select ? 'square_menu_select' : ''}}" wx:for="{{json.square_menu.length}}" wx:key="index" data-index="{{index}}" bindtap="menu_select">
      {{json.square_menu[index]}}
    </view>
  </view>
  <view class="square_menu_2">
    <view class="square_menu_2_1" wx:if="{{index == 0}}" wx:for="{{json.square_datail[menu_select].length / 2}}" wx:key="index" data-index="{{index}}">
      {{json.square_datail[menu_select][index*2+1]}}
    </view>
  </view>
</view>

menu_select(e) {
  var that = this;
  that.setData({
    menu_select: e.currentTarget.dataset.index
  })
},

wxss

.square_menu {
  position: relative;
  margin: 21.3rpx;
  top: 20rpx;
  margin-top: 35.5rpx;
}
.square_menu_1 {
  position: relative;
  padding: 14.2rpx;
  height: 80rpx;
  text-align: center;
}
.square_menu_1_1 {
  position: relative;
  /* width: 25%; */
  width: 172rpx;
  float: left;
  font-size: larger;
}
.square_menu_select {
  font-size: x-large;
  color: rgb(110, 155, 110);
}
.square_menu_2 {
  position: relative;
  /* width: 100%; */
  width: 710rpx;
}
.square_menu_2_1 {
  position: relative;
  /* width: 46%; */
  width: 327rpx;
  height: 360rpx;
  margin: 14.2rpx;
  float: left;
  background-color: pink;
}

列表选择及地址选择

图片
在这里插入图片描述
json

more_menu: false,
procurement: 0,
details_num: -1,
operation: 2,
category_select: false,
addr: [],
json: []

wxml

<view class="category_address">
  <view class="category_address_1">
    <view bindtap="procurement_select">
      <icon type="success_no_circle" size="15px" style="line-height: 25px;" /> {{procurement == '0' ? '采 购' : '出 售'}}
    </view>
  </view>
  <view class="category_address_2 category_address_4">
    <view bindtap="category_select">
      {{json.category_selected}}
    </view>
    <view class="category_address_1_1" wx:if="{{category_select}}">
      <view class="category_address_1_1_1" wx:for="{{json.category}}" wx:key="index" data-index="{{index}}" bindtap="category_selected">
        {{json.category[index]}}
      </view>
    </view>
  </view>
  <view class="category_address_3">
    <picker mode="region" bindchange="addr_change">
      <icon class="iconfont_2 icon-daohangdizhi" style="position: relative;float: left;" />
      <view wx:if="{{addr[0]}}">{{addr[1]}}-{{addr[2]}}</view>
      <view wx:else="{{addr[0]}}">选 择 地 区</view>
    </picker>
  </view>
</view>

// 采购出售选择
procurement_select() {
  var that = this;
  that.setData({
    procurement: !that.data.procurement
  }) 
},
// 分类文字点击
category_select(e) {
  var that = this;
  that.setData({
    category_select: !that.data.category_select
  })
},
// 分类选项点击
category_selected(e) {
  var that = this;
  var index = e.currentTarget.dataset.index;
  var json = that.data.json;
  json.category_selected = that.data.json.category[index],
  that.setData({
    json: that.data.json,
    category_select: false
  })
},
// 地址选择
addr_change(e){
  var that = this;
  that.setData({addr: e.detail.value});
  that.setData({item_4 : that.data.addr[0] + ',' + that.data.addr[1] + ',' + that.data.addr[2]});
},

wxss

.category_address {
  position: relative;
  margin: 28.4rpx;
  height: 50rpx;
  top: 20rpx;
  border: rgb(107, 205, 130);
  border-width: 1rpx;
  border-style: solid;
}
.category_address_1 {
  position: relative;
  width: 160rpx;
  height: 50rpx;
  line-height: 50rpx;
  float: left;
  text-align: center;
  color: red;
}
.category_address_1_1 {
  color: rgb(107, 205, 130);
  border-style: solid;
  border-color: red;
  border-width: 5rpx;
  border-radius: 10px;
  background-color: #fff;
}
.category_address_1_1_1 {
  margin-bottom: 2rpx;
  margin-top: 2rpx;
}
.category_address_2 {
  position: relative;
  width: 170rpx;
  height: 50rpx;
  line-height: 50rpx;
  float: left;
  text-align: center;
  font-size: small;
  z-index: 999;
}
.category_address_3 {
  position: relative;
  /* width: 48%; */
  width: 340rpx;
  height: 50rpx;
  line-height: 50rpx;
  float: right;
  text-align: center;
  font-size: small;
}
.category_address_4 {
  border: rgb(107, 205, 130);
  border-width: 0rpx 1rpx;
  border-style: solid;
}

商品列表

图片
在这里插入图片描述
wxml

<view class="business_detail">
  <view class="business_detail_1" wx:if="{{procurement == 0}}" wx:for="{{json.buy}}" wx:for-index="index" wx:key="index" data-index="{{index}}" bindtap="details_num">
    <view class="business_detail_1_1" wx:for="{{json.buy[index].length}}" wx:for-index="index_1" wx:key="index_1" data-index="{{index_1}}">
      {{json.buy[index][index_1]}}
    </view>
    <!-- 按钮 -->
    <view class="btn_1 btn_3" bindtap="go_source"><icon class="iconfont_3 icon-laiyuan"/> 来 源</view>
    <view class="btn_2 btn_3" bindtap="go_contact"><icon class="iconfont_3 icon-lianxi"/> 联 系</view>
  </view>
  <view class="business_detail_1" wx:if="{{procurement == 1}}" wx:for="{{json.out}}" wx:for-index="index_1" wx:key="index_1" data-index="{{index_1}}" bindtap="details_num">
    <view class="business_detail_1_1" wx:for="{{json.out[index_1].length}}" wx:for-index="index_2" wx:key="index_2" data-index="{{index_2}}">
      {{json.out[index_1][index_2]}}
    </view>
    <!-- 按钮 -->
    <view class="btn_2 btn_3" bindtap="go_contact"><icon class="iconfont_3 icon-lianxi"/> 联 系</view>
  </view>
</view>

// 上层
details_num(e) {
  var that = this;
  that.setData({
    details_num: e.currentTarget.dataset.index,
    more_menu: false
  })
  console.log(Number(that.data.procurement), that.data.details_num, that.data.operation);
  wx.navigateTo({
    url: '../business_details/business_details?procurement=' + Number(that.data.procurement) + "&details_num=" + that.data.details_num + "&operation=" + that.data.operation,
  })
},
// 去来源
go_source(e) {
  var that = this;
  that.setData({
    operation: 0
  })
},
// 去联系
go_contact(e) {
  var that = this;
  that.setData({
    operation: 1
  })
},

wxss

.business_detail {
  position: relative;
  margin: 0 14.2rpx 0 14.2rpx;
}
.business_detail_1 {
  position: relative;
  margin: 35.5rpx 0% 0% 0%;
  padding-bottom: 85.4rpx;
  border-radius: 20rpx;
  /* background-color: hotpink; */
  border: 5rpx;
  border-style: solid;
  border-color: rgb(155, 245, 139);
}
.business_detail_1_1 {
  position: relative;
  padding: 0% 35.5rpx 0% 35.5rpx;
}
.btn_1 {
  position: relative;
  float: left;
}
.btn_2 {
  position: relative;
  float: right;
}
.btn_3 {
  position: relative;
  color: white;
  color: rgb(107, 205, 130);
  letter-spacing: 20rpx;
  top: 20rpx;
  height: 50rpx;
  line-height: 50rpx;
  width: 39%;
  margin-left: 35.5rpx;
  margin-right: 35.5rpx;
  text-align: center;
  border-radius: 20rpx;
  border-style: solid;
  border-color: rgb(107, 205, 130);
  border-width: 1rpx;
  /* background-color: rgb(153, 245, 135); */
}

个人列表

图片
在这里插入图片描述
json

expert_selected: 0,
operation: 2,
random: 0,
json: [],
json_2: []

wxml

<view class="recommend">
  <view class="recommend_1 border" wx:for="{{json_2}}" wx:key="index" bindtap="to_select_num" data-index="{{index}}">
    <view style="position: relative;display: flex;">
      <view style="position: relative;width: 70px;float: left;padding-top: 10px;flex: 2;">
        <image style="position: relative;width: 50px;height: 50px;left: 10px;" src="{{image_url}}" mode="" />
      </view>
      <view style="position: relative;float: left;flex: 8;">
        <view>{{item.other[1]}} {{item.other[2]}}</view>
        <view>{{item.other[3]}}</view>
        <view class="text_width" style="width: 100%;"><text wx:for="{{item.content}}" wx:key="index">{{item}} </text></view>
        <view>{{item.other[4]}}</view>
        <view style="position: relative;width: 100%;">
          <view style="position: relative;width: 25%;margin: 0 8%;float: left;text-align: center;background-color: rgb(102, 243, 125);border-radius: 40px;" bindtap="to_q">去提问</view>
          <view style="position: relative;width: 25%;margin: 0 8%;float: left;text-align: center;background-color: rgb(109, 184, 255);border-radius: 40px;" bindtap="to_c">合作</view>
        </view>
      </view>
    </view>
  </view>
</view>

// 顶层
to_select_num(e) {
  var that = this;
  // console.log(e.currentTarget.dataset.index + " " + that.data.operation);
  wx.navigateTo({
    url: '/pages/index_expert_qa_teacher/index_expert_qa_teacher?index_1=' + e.currentTarget.dataset.index + "&index_2=" + that.data.operation,
  })
  that.setData({
    operation: 2
  })
},
// 选项一
to_q(e) {
  var that = this;
  that.setData({
    operation: 0
  })
},
// 选项二
to_c() {
  var that = this;
  that.setData({
    operation: 1
  })
},

wxss

.recommend {
  position: relative;
  margin: 2%;
  margin-top: 5%;
  font-size: smaller;
}
.recommend_1 {
  position: relative;
  margin: 2%;
  width: 96%;
  padding-bottom: 5px;
}
.recommend_1 view view {
  position: relative;
  padding: 2px 0;
}

个人信息一

图片
在这里插入图片描述

wxml

<view class="peoper">
  <view class="peoper_1">
    <view class="peoper_1_1">
      <image style="width: 110rpx;height: 110rpx;margin: 10rpx;margin-left: 20rpx;border-radius: 50%;" src="http://m.qpic.cn/psc?/V53WB25R0eRQ7b0sV1Oa16hH5q0feP3l/ruAMsa53pVQWN7FLK88i5mOfn8Md.ni3QDRLT3MlyhlifCWVQ2H*K7zZJHMdDwYYrFduFYfkIQnNZLROcxqcC.78Mz2GKfCWIB2XIbIlPGY!/b&bo=TQFNAQAAAAADByI!&rf=viewer_4" mode="" />
    </view>
    <view class="peoper_1_2">
      <view>
        不愿意透露真名的帅哥
      </view>
      <view>
        账号:94888666
      </view>
      <view>
        关注666 粉丝888 好友999
      </view>
    </view>
  </view>
  <view class="peoper_2">
    <view class="peoper_2_1 peoper_2_3" bindtap="go_kefu">
      <view>
        <icon class="iconfont_4 icon-kefufill"/>
      </view>
      <view>
        客服
      </view>
    </view>
    <view class="peoper_2_2 peoper_2_3" bindtap="go_shezhi">
      <view>
        <icon class="iconfont_4 icon-shezhitianchong"/>
      </view>
      <view>
        设置
      </view>
    </view>
  </view>

// 跳转后的界面显示在新的界面判断
go_collect(e) {
	wx.navigateTo({
		url: '/pages/mine_collect/mine_collect?index=' + e.currentTarget.dataset.index
	})
},

wxss

.peoper {
  margin: 14rpx;
  height: 300rpx;
  position: relative;
  /* background-color: rgb(187, 241, 255); */
}
.peoper_1 {
  background-color: #fff;
  position: relative;
  /* width: 80%; */
  width: 560rpx;
  height: 150rpx;
  float: left;
}
.peoper_1_1 {
  position: relative;
  /* width: 30%; */
  width: 120rpx;
  float: left;
}
.peoper_1_2 {
  position: relative;
  /* width: 70%; */
  width: 400rpx;
  float: right;
  font-size: small;
  padding-top: 5%;
}
.peoper_2 {
  position: relative;
  /* width: 20%; */
  width: 140rpx;
  height: 150rpx;
  float: right;
}
.peoper_2_1 {
  position: relative;
  /* width: 50%; */
  float: left;
}
.peoper_2_2 {
  position: relative;
  /* width: 50%; */
  width: 80rpx;
  float: right;
}
.peoper_2_3 {
  position: relative;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  text-align: center;
  font-size: small;
}
.peoper_2 image {
  width: 40rpx;
  height: 40rpx;
}
.peoper_3 {
  position: relative;
  /* width: 100%; */
}
.peoper_3_1 {
  position: relative;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  /* background-color: red; */
  position: relative;
  /* width: 25%; */
  width: 180rpx;
  margin-left: 5%;
  margin-right: 5%;
  width: 15%;
  float: left;
  text-align: center;
}
.peoper_3 image {
  border-radius: 20%;
}

个人信息二

图片
在这里插入图片描述

wxml

<view class="person border">
  <view class="person_1">
    <view style="position: relative;width: 20%;float: left;">
      <image style="width: 70px;height: 70px;border-radius: 50%;" src="{{image_url}}" mode="" />
    </view>
    <view style="position: relative;width: 55%;float: left;left: 8px;">
      <view style="height: 50%;" style="position: relative;margin-top: 10px;margin-bottom: 10px;">
        <text class="border" style="position: relative;padding: 0 10px;">{{json.other[1]}}</text>
      </view>
      <view style="height: 50%;" class="text_overflow">
        {{json.person_details}}
      </view>
    </view>
    <view style="position: relative;width: 25%;float: left;left: 10px;">
      <view style="position: relative;margin-top: 20%;">
        <view style="width: 20px;height: 20px;background-color: red;line-height: 18px;text-align: center;font-size: x-large;border-radius: 50%;color: white;float: left;">+</view>
        <view class="border" style="width: 50px;text-align: center;float: left;margin-left: 5px;">关注</view>
      </view>
    </view>
  </view>
  <view class="person_2">
    <view class="person_2_1 border" wx:for="{{json.content}}" wx:key="index">
      <text>{{item}}</text>
    </view>
  </view>
</view>
<!-- qa -->
<view class="qa">
  <scroll-view class="qa_1" scroll-y="true">
    <view class="qa_2 border" wx:for="{{json.qa}}" wx:key="index" bindtap="aq">
      <view>
        <view class="qa_q">
          <text>问</text>
        </view>
        <view class="text_width text_overflow">
          {{item[0]}}
        </view>
      </view>
      <view>
        <view class="qa_q">
          <text>答</text>
        </view>
        <view class="text_width text_overflow">
          {{item[1]}}
        </view>
      </view>
      <view>
        <text style="position: relative;font-size: smaller;color: grey;">>>>全部{{item.length}}条回答</text>
      </view>
    </view>
  </scroll-view>
</view>
<!-- small_person -->
<view class="small_person border" wx:if="{{menu_selected == 2}}">
  <view class="small_person_1" style="height: 50px;">
    <view style="width: 25%;float: left;">
      <image style="width: 40px;height: 40px;border-radius: 50%;" src="{{image_url}}" mode=""/>
    </view>
    <view style="position: relative;width: 75%;float: left;line-height: 40px;">
      不愿透露姓名的美女
    </view>
  </view>
  <view>
    <text class="border" wx:for="{{json.content}}" wx:key="index">{{item}}</text>
  </view>
  <view style="position: relative;top: 10px;bottom: 10px;text-align: center;">
    <view>
      <text class="border" style="padding: 0 20%;background-color: rgb(64, 159, 241);color: white;">去 发 布</text>
    </view>
  </view>
</view>
<!-- menu -->
<view class="menu border">
  <view class="menu_1" wx:for="{{json_2}}" wx:key="index" data-index="{{index}}" bindtap="menu_selected">
    <text class="border {{index == menu_selected ? 'menu_selected' : ''}}" style="position: relative;padding: 0 20px;margin-top: 10px">{{item}}</text>
  </view>
</view>

wxss

.text_overflow {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.border {
  border-radius: 20px;
  border-color: rgb(198, 228, 255);
  border-width: 1px;
  border-style: solid;
}
.text_width {
  position: relative;
  width: 60%;
}
.person {
  position: relative;
  margin: 2%;
  padding: 2%;
  /* background-color: rgb(194, 91, 91); */
}
.person_1 {
  height: 75px;
}
.person_2 {
  height: 20px;
  /* padding: 2% 5%; */
  /* background-color: rgb(194, 110, 110); */
}
.person_2_1 {
  position: relative;
  width: 20%;
  float: left;
  background-color: #fff;
  font-size: smaller;
  text-align: center;
}
.qa {
  position: relative;
  margin: 2%;
}
.qa_1 {
  position: relative;
  height: 280px;
}
.qa_2 {
  position: relative;
  padding: 2%;
  border-color: red;
  margin: 10px 0 10px 0;
}
.qa_q {
  position: relative;
  width: 40px;
  float: left;
}
.small_person {
  position: fixed;
  width: 200px;
  height: 130px;
  bottom: 50%;
  right: 1%;
  padding: 1%;
  border-color: rgb(64, 159, 241);
  background-color: rgb(64, 159, 241);
  /* opacity: 0.5; */
  color: white;
}
.menu {
  position: relative;
  margin: 2% 10%;
  height: 21px;
}
.menu_1 {
  position: relative;
  width: 33%;
  float: left;
  text-align: center;
}
.menu_selected {
  background-color: rgb(64, 159, 241);
  color: white;
}

订单总

图片
在这里插入图片描述

wxml

<view class="order">
  <view class="order_1">
    <view class="order_1_1">
      我 的 订 单
    </view>
    <view class="order_1_2" bindtap="go_dingdan">
      全部<text style="color: red;"> ></text>
    </view>
  </view>
  <view class="order_2">
    <view class="order_2_1" wx:for="{{json.order_2.length / 2}}" wx:key="index" data-index="{{index}}" bindtap="go_dingdan">
      <view>
        <!-- <image src="{{image_url}}" alt="" /> -->
        <icon class="iconfont_4 {{json.order_2[index*2]}}"/>
      </view>
      <view>
        {{json.order_2[index*2+1]}}
      </view>
    </view>
  </view>
</view>

go_dingdan(e) {
  // 订单e.currentTarget.dataset.index
  var dingdan_index = 0;
  if (e.currentTarget.dataset.index != undefined) {
    dingdan_index = e.currentTarget.dataset.index + 1
  }
  wx.navigateTo({
    url: '/pages/mine_dingdan/mine_dingdan?index=' + dingdan_index
  })
},

wxss

.order {
  position: relative;
  margin-right: 21rpx;
  margin-left: 21rpx;
  height: 210rpx;
  /* border-style: solid;
  border-width: 1rpx;
  border-color: green; */
  /* background-color: rgb(211, 235, 255); */
}
.order_1 {
  position: relative;
  /* width: 100%; */
  height: 50rpx;
  border-bottom: rgb(110, 155, 110);
  border-bottom-style: solid;
  border-bottom-width: 1rpx;
}
.order_1_1 {
  position: relative;
  /* width: 80%; */
  float: left;
  font-size: larger;
}
.order_1_2 {
  position: relative;
  /* width: 20%; */
  float: right;
  text-align: right;
}
.order_2 {
  position: relative;
  /* width: 100%; */
  width: 710rpx;
  float: left;
  padding-top: 30rpx;
  text-align: center;
}
.order_2_1 {
  position: relative;
  /* width: 20%; */
  width: 143rpx;
  float: left;
}

订单各界面

图片
在这里插入图片描述

wxml

<view class="menu">
<scroll-view class="menu_1" scroll-x="true">
  <view class="menu_2 {{menu_index == index ? 'menu_3' : ''}}" wx:for="{{json.menu.length}}" wx:key="index" data-index="{{index}}" bindtap="menu_index">
    {{json.menu[index]}}
  </view>
</scroll-view>
</view>
<view class="datails">
  <view class="datails_1" wx:for="{{json.details[menu_index].length}}" wx:key="index" data-index="{{index}}" bindtap="go_dingdan_detail">
      {{json.details[menu_index][index].name}}
  </view>
</view>

// 菜单选择
menu_index(e) {
  var that = this;
  that.setData({
    menu_index: e.currentTarget.dataset.index
  })
},
// 点击不同的订单
go_dingdan_detail(e) {
  console.log(this.data.menu_index, e.currentTarget.dataset.index)
  wx.navigateTo({
    url: '/pages/mine_dingdan_detail/mine_dingdan_detail?index_1=' + this.data.menu_index + "&index_2=" + e.currentTarget.dataset.index
  })
},

wxss

.menu {
  position: relative;
  margin: 2%;
  height: 40px;
  border-bottom-color: rgb(182, 182, 182);
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.menu_1 {
  width: 400px;
  white-space:nowrap;
}
.menu_2 {
  position: relative;
  /* width: 16.6%; */
  width: 75px;
  text-align: center;
  line-height: 40px;
  display:inline-block;
}
.menu_3 {
  color: rgb(107, 205, 130);
  font-size: x-large;
}

.datails {
  position: relative;
  margin: 1%;
  height: 40px;
  /* background-color: rgb(122, 255, 162); */
}
.datails_1 {
  position: relative;
  /* height: 50px; */
  margin: 2% 2% 1% 2%;
  padding: 10px;
  background-color: rgb(255, 252, 67);
  border-style: solid;
  border-color: blueviolet;
  border-width: 1px;
  border-radius: 20px;
}

视频列表

图片
在这里插入图片描述

wxml

<view class="taoyou_2">
    <!-- 批量 -->
    <view class="taoyou_2_1" wx:for="{{json.taoyou_2.length}}" wx:key="index" data-index="{{index}}">
      <!-- 作者 -->
      <view class="taoyou_2_1_1">
        <view class="taoyou_2_1_1_1">
          <image style="border-radius: 50%;" src="{{json.taoyou_2[index][0] == '' ? image_url : json.taoyou_2[index][0]}}" mode=""></image>
        </view>
        <view class="taoyou_2_1_1_2">
          {{json.taoyou_2[index][1]}}
          <text style="float: right;">{{json.taoyou_2[index][2]}}</text>
        </view>
      </view>
      <!-- 文案 -->
      <view class="taoyou_2_2">
        {{json.taoyou_2[index][3]}}
      </view>
      <!-- 内容 -->
      <video style="width: 100%;" src="{{json.taoyou_2[index][4]}}" show-center-play-btn="true"	enable-progress-gesture="true" play-btn-position="center" />
    </view>
  </view>

wxss

.taoyou_2 {
  position: relative;
  width: 100%;
  height: auto;
  border-style: dotted;
  border-width: 3rpx;
  border-color: green;
  border-radius: 20rpx;
}
.taoyou_2_1 {
  position: relative;
  /* width: 100%; */
  margin: 14rpx;
  padding-bottom: 35rpx;
}
.taoyou_2_1_1 {
  position: relative;
  /* width: 100%; */
}
/* 宽度问题 */
.taoyou_2_1_1_1 {
  position: relative;
  /* width: 15%; */
  width: 90rpx;
  height: 80rpx;
  float: left;
}
.taoyou_2_1_1_2 {
  position: relative;
  /* width: 85%; */
  width: 590rpx;
  height: 80rpx;
  float: right;
  line-height: 80rpx;
}
.taoyou_2_2 {
  width: 100%;
}

回答提问一

图片
在这里插入图片描述

wxml

<view class="title">
  <view class="title_1 {{selected == index ? 'title_selected' : ''}}" wx:for="{{json.title.length}}" wx:key="index" data-index="{{index}}" bindtap="title_selected">
    {{json.title[index]}}
  </view>
</view>
<!-- 详情 details -->
<view class="details">
  <view class="details_1" wx:if="{{selected == 0}}" wx:for="{{json.answer}}" wx:key="index" data-index="{{index}}">
    <view class="details_1_1">
      <view class="details_1_1_1">
        <image style="border-radius: 50%;" src="{{json.answer[index][0]}}" mode=""/>
      </view>
      <view class="details_1_1_2">
        {{json.answer[index][1]}}
      </view>
      <view class="details_1_1_3">
        {{json.answer[index][2]}}
      </view>
    </view>
    <view class="details_1_2 details_1_3">
      <view class="details_1_2_1" style="background-color: rgb(58, 255, 84);">
        问题
      </view>
      <view class="details_1_2_2">
        {{json.answer[index][3]}}
      </view>
    </view>
    <view class="details_1_2 details_1_4">
      <view class="details_1_2_1" style="background-color: rgb(240, 243, 65);">
        回答
      </view>
      <view class="details_1_2_2">
        {{json.answer[index][4]}}
      </view>
    </view>
  </view>
  <view class="details_1" wx:if="{{selected == 1}}" wx:for="{{json.question}}" wx:key="index" data-index="{{index}}">
    <view class="details_1_1">
      <view class="details_1_1_1">
        <image style="border-radius: 50%;" src="{{json.question[index][0]}}" mode=""/>
      </view>
      <view class="details_1_1_2">
        {{json.question[index][1]}}
      </view>
      <view class="details_1_1_3 {{json.question[index][2] == '未解决' ? 'details_1_1_4' : ''}}">
        {{json.question[index][2]}}
      </view>
    </view>
    <view class="details_1_2 details_1_3">
      <view class="details_1_2_1" style="background-color: rgb(58, 255, 84);">
        问题
      </view>
      <view class="details_1_2_2">
        {{json.question[index][3]}}
      </view>
    </view>
    <view class="details_1_2 details_1_4" wx:if="{{json.question[index][4] != ''}}">
      <view class="details_1_2_1" style="background-color: rgb(240, 243, 65);">
        回答
      </view>
      <view class="details_1_2_2">
        {{json.question[index][4]}}
      </view>
    </view>
  </view>
</view>

title_selected(e) {
    var that = this;
  	    that.setData({
    selected: e.currentTarget.dataset.index
  })
},

wxss

image {
  width: 60rpx;
  height: 60rpx;
}
.title {
  position: relative;
  margin: 2% 5% 2% 5%;
  height: 30px;
}
.title_1 {
  position: relative;
  width: 50%;
  float: left;
  line-height: 30px;
  text-align: center;
}
.title_selected {
  font-size: large;
  color: red;
  border-bottom-color: red;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.details {
  position: relative;
  height: 500px;
  margin: 2% 5% 2% 5%;
  /* background-color: rgb(243, 255, 71); */
}
.details_1 {
  position: relative;
  margin: 2% 5% 2% 5%;
  border-color: red;
  border-style: solid;
  border-width: 1px;
  border-radius: 20px;
}
.details_1_1 {
  position: relative;
  margin: 2%;
  height: 30px;
  top: 10px;
  /* background-color: rgb(240, 80, 80); */
}
.details_1_1_1 {
  position: relative;
  /* width: 20%; */
  float: left;
  margin-left: 1%;
}
.details_1_1_2 {
  position: relative;
  width: 50%;
  float: left;
  left: 10px;
  line-height: 30px;
}
.details_1_1_3 {
  position: relative;
  width: 25%;
  float: right;
  margin-right: 5%;
  text-align: center;
  color: white;
  background-color: rgb(122, 175, 255);
  border-radius: 10px;
}
.details_1_1_4 {
  background-color: red;
}
.details_1_2 {
  position: relative;
  margin: 2%;
  width: 96%;
}
.details_1_2_1 {
  position: relative;
  width: 15%;
  text-align: center;
  border-radius: 20px;
}
.details_1_2_2 {
  position: relative;
  margin: 0 2% 0 20%;
  top: -20px;
}
.details_1_3 {
  position: relative;
  top: 20px;
}
.details_1_4 {
  position: relative;
  top: 10px;
}

回答提问二

图片
在这里插入图片描述

json

expert_selected: 0,
operation: 2,
random: 0,
json: [],
json_2: []

wxml

<view class="qa">
  <view class="qa_1">
    <view style="font-size: larger;width: 100%;height: 20px;">
      <text style="position: relative;float: left;width: 50%;">最新问答</text>
      <text style="position: relative;float: right;width: 50%;text-align: right;font-size: smaller;" bindtap="flash_qa">刷新</text>
    </view>
    <view class="qa_2 border" wx:for="{{json.qa}}" wx:if="{{index == random}}" wx:key="index" data-index="{{index}}" bindtap="aq">
      <view>
        <view class="qa_q">
          <text>问</text>
        </view>
        <view class="text_width qa_a">
          <text>{{item[1]}}</text>
        </view>
      </view>
      <view>
        <view class="qa_q">
          <text>答</text>
        </view>
        <view class="text_width qa_a">
          {{item[2]}}
        </view>
        <view>
          <text style="position: relative;font-size: smaller;color: grey;">>>>全部{{item.length-1}}条回答</text>
        </view>
      </view>
    </view>
  </view>
</view>

flash_qa() {
  let that = this;
  let now = that.data.random;
  do {
    that.setData({
      random: Math.floor(Math.random() * app.data.json.minyue.index.index_expert_qa.qa.length)
    })
  } while(now == that.data.random);
},
aq(e) {
  wx.navigateTo({
    url: '/pages/index_expert_qa_details/index_expert_qa_details?index=' + e.currentTarget.dataset.index,
  })
},

wxss

.border {
  border-radius: 20px;
  border-color: rgb(198, 228, 255);
  border-width: 1px;
  border-style: solid;
}
.text_width {
  position: relative;
  width: 500rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa {
  position: relative;
  margin: 2%;
}
.qa_1 {
  position: relative;
  margin: 2%;
}
.qa_2 {
  position: relative;
  padding: 2%;
  border-color: red;
  margin: 10px 0 10px 0;
}
.qa_q {
  position: relative;
  width: 40px;
  float: left;
}
.qa_a {
  position: relative;
}

问答详情

图片
在这里插入图片描述

wxml

<view class="details">
  <view class="border" style="height: 50px;border-radius: 0;border-width: 0 0 1px 0;">
    <view style="position: relative;float: left;width: 15%;">
      <image src="{{image_url}}" mode="" />
    </view>
    <view style="position: relative;float: left;">
      <text style="line-height: 50px;">不愿透露真名的帅哥</text>
    </view>
  </view>
  <view style="position: relative;width: 100%;top: 20px;display: flex;flex-direction: column;" wx:for="{{json[num].length}}" wx:if="{{index != 0}}" wx:key="index" data-index="{{index}}">
    <view style="position: relative;margin: 5px 0;">
      <view style="position: relative;width: 10%; {{index % 2 == 1 ? 'float: left;' : 'float: right;'}}">
        <image class="border" style="border-radius: 50%;width: 40px;height: 40px;" src="{{image_url}}" mode="" />
      </view>
      <view style="position: relative;width: 90%;">
        <view class="chat {{index % 2 == 1 ? 'left_chat' : 'right_chat'}}" style="position: relative;padding: 10px 10px; {{index % 2 == 1 ? 'float: left;left: 10px;' : 'float: right;right: 10px;'}}" class="border text_center text_row">
          {{json[num][index]}}
        </view>
      </view>
    </view>
  </view>
</view>

wxss

image {
  width: 40px;
  height: 40px;
}
.border {
  border-radius: 20px;
  border-color: rgb(198, 228, 255);
  border-width: 1px;
  border-style: solid;
}
.details {
  position: relative;
  margin: 2%;
}
.left_chat {
  position: relative;
  float: left;
  background-color: rgb(101, 187, 245);
}
.right_chat {
  position: relative;
  float: right;
  background-color: rgb(109, 255, 72);
}
/* .chat {
  position: relative;
} */
.text_center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text_row {
  position: relative;
  max-width: 250px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: auto;
}

信息列表

图片
在这里插入图片描述

wxml

<!-- 今日要闻 -->
<view class="news border" style="border-color: red;">
  <view class="news_0">
    <view class="news_1">
      今日要闻
    </view>
    <view class="news_2" wx:for="{{json.news}}" wx:key="index" data-index="{{index}}">
      <view class="border" style="position: relative;width: 20px; float: left;text-align: center; border-radius: 0; {{index == 0 ? 'border-color: red;' : ''}}">
        {{index+1}}
      </view>
      <view class="text_width" style="position: relative;left: 15px;">
        {{json.news[index]}}
      </view>
    </view>
  </view>
  <view style="height: 30px;color: rgb(177, 177, 177);text-align: center;">
    更多->
  </view>
</view>
<!-- 其他框框 -->
<view class="box_1">
  <view class="box_2 border" wx:for="{{json.alls}}" wx:key="index">
    <view style="position: relative;height: 35px;">
      <text style="position: relative;font-size: larger;left: 10px;">{{item.name}}</text>
    </view>
    <view class="box_3" wx:for="{{item.details}}" wx:key="index" data-index="{{index}}" >
      <view class="border" style="position: relative;width: 20px;float: left;text-align: center;border-radius: 0;{{index == 0 ? 'border-color: red' : ''}}">{{index+1}}</view>
      <view class="text_width" style="position: relative;float: left;left: 10px;">{{item}}</view>
    </view>
    <view style="height: 20px;color: rgb(177, 177, 177);text-align: center;">
      更多->
    </view>
  </view>
</view>

wxss

.news {
  position: relative;
  margin: 2%;
}
.news_0 {
  position: relative;
  margin: 2%;
}
.news_1 {
  position: relative;
  height: 30px;
  font-size: larger;
}
.news_2 {
  position: relative;
  width: 100%;
  height: 15px;
  padding: 10px 0 10px 0;
}
.box_1 {
  position: relative;
  margin: 2%;
  margin-top: 20px;
}
.box_2 {
  position: relative;
  padding: 2%;
  margin: 0 0 20px 0;
  border-color: hotpink;
}
.box_3 {
  position: relative;
  left: 10px;
  height: 30px;
}

语音播报

图片
在这里插入图片描述

wxml

<!-- 语音播报 -->
<view class="border" style="position: fixed;left: 80%;bottom: 60px;text-align: center;border-radius: 50%;border-color: rgb(221, 192, 62);background-color: pink;width: 70px;height: 70px;">
  <view style="position: relative;padding: 10px;">
    <image style="width: 35px;height: 35px;" src="{{image_url}}" mode=""/>
    <view style="font-size: xx-small;">
      语音播报
    </view>
  </view>
</view>

wxss

.border {
  border-radius: 20px;
  border-color: rgb(198, 228, 255);
  border-width: 1px;
  border-style: solid;
}

标题小标签一

图片
在这里插入图片描述

wxml

<view class="expert_1">
    <view class="expert_1_1" style="position: relative;top: 5px;" wx:for="{{json.title.length / 2}}" wx:key="index" data-index="{{index}}" bindtap="expert_selected">
      <view style="position: relative;width: 80%;float: left;">
        <text style="font-size: x-small;">{{json.title[index*2+1]}}</text>
      </view>
      <view style="position: relative;width: 20%;float: right;">
        <image style="width: 20px;height: 20px;" src="{{image_url}}" mode="" />
      </view>
    </view>
  </view>
  <view class="expert_2 border" wx:if="{{expert_selected == 0}}">
    <view style="height: 10px;">
      <view style="position: relative;width: 80%;float: left;">
        <text style="position: relative;left: 20px;font-size: larger;">热门专家</text>
      </view>
      <view style="position: relative;width: 20%;float: right;">
        <text style="line-height: 10px;font-size: x-small;color: red;">> 更多</text>
      </view>
    </view>
    <view class="expert_2_1" wx:for="{{json.technology_expert}}" wx:key="index">
      <view class="expert_2_1_1 expert_2_1_3">
        <image src="{{image_url}}" style="border-radius: 50%;width: 40px;height: 40px;top: 5px;" mode="" />
      </view>
      <view class="expert_2_1_2 expert_2_1_3" style="top: 5px;">
        <view>
          <text>{{item.other[1]}}</text>
        </view>
        <view>
          <text style="font-size: x-small;">{{item.other[2]}}</text>
        </view>
      </view>
    </view>
  </view>

wxss

.border {
  border-radius: 20px;
  border-color: rgb(198, 228, 255);
  border-width: 1px;
  border-style: solid;
}
.expert_1 {
  position: relative;
  height: 30px;
  border-radius: 20px;
  border-bottom-color: rgb(137, 200, 255);
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.expert_1_1 {
  position: relative;
  width: 18%;
  margin: 0 3% 0 3%;
  text-align: center;
  float: left;
}
.expert_2 {
  position: relative;
  height: 80px;
  margin: 1%;
  background-color: rgb(243, 255, 234);
}
.expert_2_1 {
  position: relative;
  width: 33.33%;
  float: left;
}
.expert_2_1_1 {
  position: relative;
  width: 40%;
  float: left;
}
.expert_2_1_2 {
  position: relative;
  width: 60%;
  float: right;
}
.expert_2_1_3 {
  position: relative;
  height: 50px;
}

标题小标签二

图片
在这里插入图片描述

wxml

<view class="school_agriculture border" wx:if="{{expert_selected == 1}}">
    <view class="school_agriculture_1">
      <view style="position: relative;width: 50%;float: left;text-align: left;">
        <image src="{{image_url}}" style="width: 30px;height: 30px;" mode="" />
        <text style="position: relative;top: -10px;left: 10px;">{{json.college_contribution[1]}}</text>
      </view>
      <view style="position: relative;width: 50%;float: right;text-align: right;">
        <text style="position: relative;right: 10px;font-size: x-small;color: red;">> 更多</text>
      </view>
    </view>
    <view class="school_agriculture_2">
      <view style="position: absolute;width: 10%;float: left;"></view>
      <view style="position: relative;width: 90%;float: right;">
        <view class="text_width"> 
          <text>{{json.college_contribution[2]}}</text>
        </view>
        <view class="text_width">
          <text>{{json.college_contribution[3]}}</text>
        </view>
      </view>
    </view>
  </view>

wxss

.school_agriculture {
  position: relative;
  margin: 2%;
  height: 100px;
  border-color: rgb(255, 186, 121);
}
.school_agriculture_1 {
  position: relative;
  margin: 2%;
  height: 30px;
  line-height: 30px;
}

书架书籍

图片
在这里插入图片描述

wxml

<view class="general">
  <view class="general_1">
    讲堂
  </view>
  <view class="general_2">
    <view class="material_2_1" wx:for="{{json[1].length / 2}}" wx:key="index" data-index="{{index}}">
      <view>
        <image src="{{json[1][index*2]}}" mode=""></image>
      </view>
      <view>
        <text>{{json[1][index*2+1]}}</text>
      </view>
    </view>
  </view>
</view>
<!-- 题库 question_bank -->
<view class="general general_top"> 
  <view class="general_1">
    题库
  </view>
  <view class="general_2">
    <view class="material_2_1" wx:for="{{json[2].length / 2}}" wx:key="index" data-index="{{index}}">
      <view>
        <image src="{{json[2][index*2]}}" mode=""></image>
      </view>
      <view>
        <text>{{json[2][index*2+1]}}</text>
      </view>
    </view>
  </view>
</view>
<!-- 相关资料 material -->
<view class="general general_top"> 
  <view class="general_1 material_1">
    相关资料
  </view>
  <view class="general_2 material_2">
    <view class="material_2_1" wx:for="{{json[3].length / 2}}" wx:key="index" data-index="{{index}}">
      <view>
        <image src="{{json[3][index*2]}}" mode=""></image>
      </view>
      <view>
        <text>{{json[3][index*2+1]}}</text>
      </view>
    </view>
  </view>
</view>

wxss

.general {
  position: relative;
  margin: 2% 3% 2% 3%;
}
.general_1 {
  position: relative;
  margin: 2% 3% 2% 3%;
  font-size: large;
}
.general_2 {
  position: relative;
  margin: 2% 3% 2% 3%;
}
.general_top {
  position: relative;
  padding-top: 140px;
}
.material_2_1 {
  position: relative;
  width: 25%;
  text-align: center;
  float: left;
}