【开发】 标协会员

app.json

@@ -30,7 +30,13 @@
     "pages/signUpPageGuoji/signUpPageGuoji",
     "pages/signUpSuccess/signUpSuccess",
     "pages/upDateInfo/upDateInfo",
-    "pages/writtenSign/writtenSign"
+    "pages/writtenSign/writtenSign",
+    "pages/standardRouter/standardRouter",
+    "pages/standardBasicInfo/standardBasicInfo",
+    "pages/council/council",
+    "pages/councilDetail/councilDetail"
+
+
   ],
   "window":{
     "backgroundTextStyle": "dark",

assets/js/http/standardApi.js

@@ -0,0 +1,9 @@
+import http from './http.js'
+let URL_CONFIG = '/jero-boot/'
+
+// 标协会员基本信息
+const getStandardBasicInfo = (params) => http.get(`${URL_CONFIG}`, params)
+
+export {
+  getStandardBasicInfo
+}

assets/js/http/userApi.js

@@ -63,6 +63,10 @@ const UserApi = {
   committeeList: (params) => http.get(`${URL_CONFIG}payCaseCommitteeSubitem/payCaseCommitteeSubitem/findTwo`, params),
   // 分标委详情
   committeeDetail: (params) => http.get(`${URL_CONFIG}payCaseCommittee/payCaseCommittee/detail`, params),
+  // 理事会列表 
+  councilList:(params) => http.get(`${URL_CONFIG}payCaseCouncilSubitem/payCaseCouncilSubitem/findTwo`, params),
+  // 理事会详情 
+  councilDetail: (params) => http.get(`${URL_CONFIG}payCaseCouncil/payCaseCouncil/detail`, params),
   // 资料网员分页接口
   queryDataMemberList: (params) => http.get(`${URL_CONFIG}jero/memberProjectSubitem/pageCompany`, params),
   // 获取用户的信息

pages/committeeDetail/committeeDetail.js

@@ -44,7 +44,7 @@ Page({
       icon: 'loading'
     })
     this.data.id = options.id
-    MeetingApi.meetingList({caseCommitteeId: this.data.id, meetingSignUpType: 2, column: 'pm.createTime', order: 'desc'}).then(res=>{
+    MeetingApi.meetingList({caseCommitteeId: this.data.id, meetingSignUpType: 2, column: 'createTime', order: 'desc'}).then(res=>{
       if(res.success){
         if(res.result.records && res.result.records.length <= 2){
           this.setData({

pages/contractDetail/contractDetail.wxss

@@ -87,5 +87,4 @@ page{
   top: 6%;
   right: 20%;
   z-index: 2;
-
 }

pages/council/council.js

@@ -0,0 +1,109 @@
+// pages/council/council.js
+import UserApi from '../../assets/js/http/userApi'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
+    pageNo: 1,
+    pageSize: 10,
+    list: []
+  },
+  goBack(){
+    wx.navigateBack()
+  },
+  loadData(){
+    wx.showToast({
+      title: '加载中...',
+      icon: 'loading'
+    })
+    let params = {
+      pageNo: this.data.pageNo,
+      pageSize: this.data.pageSize,
+       // 创建时间倒叙排序
+       column:'createTime',
+       order:'desc'
+    }
+    UserApi.councilList(params).then(res=>{
+      if(res.success){
+        if(res.result.records && res.result.records.length){
+          this.setData({
+            list: [...this.data.list, ...res.result.records]
+          })
+        }
+      }
+    }).catch(err => {
+      wx.showToast({
+        title: '加载失败',
+        icon: 'none',
+        duration: 2000
+      })
+    })
+  },
+  // 理事会详情页
+  detail(e){
+    wx.navigateTo({
+      url: `../councilDetail/councilDetail?id=${e.currentTarget.dataset.committee.id}&name=${e.currentTarget.dataset.committee.name}&type=council`,
+    })
+  },
+
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.loadData()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    this.data.pageNo++
+    this.loadData()
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/council/council.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

pages/council/council.wxml

@@ -0,0 +1,19 @@
+<!--pages/council/council.wxml-->
+<!--pages/meeting/meeting.wxml-->
+<!-- 自定义头部start -->
+<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
+	<image src="../../assets/images/back.png" bindtap="goBack"></image>
+	<text>理事会</text>
+</view>
+<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view><!-- 空view用来填充自定义头部的padding-top -->
+<!-- 自定义头部end -->
+<view>
+	<view class="item" wx:for="{{list}}" wx:key="item" bindtap="detail" data-committee="{{item}}">
+		<text>{{item.name}}</text>
+		<view>项目负责人:{{item.principal}}</view>
+	</view>
+	<view>
+		<text class="no-data" wx:if="{{list.length == 0}}">暂无数据</text>
+	</view>
+</view>
+

pages/council/council.wxss

@@ -0,0 +1,25 @@
+/* pages/council/council.wxss */
+page{
+  padding-bottom: 20px;
+  background-color: #f5f5f5;
+  padding: 15px;
+  box-sizing: border-box;
+}
+.item{
+  box-sizing: border-box;
+  padding: 0 15px;
+  width: 100%;
+  height: 80px;
+  line-height: 40px;
+  background-color: #fff;
+  border-radius: 10px;
+  color: #333;
+  font-size: 14px;
+  margin-bottom: 10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.item:last-child{
+  margin-bottom: 0;
+}

pages/councilDetail/councilDetail.js

@@ -0,0 +1,129 @@
+// pages/councilDetail/councilDetail.js
+import UserApi from '../../assets/js/http/userApi'
+import { previewFile } from '../../assets/js/preview'
+import MeetingApi from '../../assets/js/http/meetingApi'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    form: {},
+    name: '',
+    id: '', // ,项目id
+    projectFileList: [], // 项目资料文件
+    meetingList: [] // 会议文件
+  },
+    // 预览
+    preview(e){
+      const fileObj = e.currentTarget.dataset.file
+      previewFile(fileObj.fileId ,fileObj.fileName)
+    },
+    // 获取更多会议信息数据
+    goMoreMeeting(){
+      wx.navigateTo({
+        url: `../meeting/meeting?councilId=${this.data.id}`,
+      })
+    },
+    //  会议详情
+    meetingDetail(e){
+      console.log(e);
+      const meetingInfo = JSON.stringify(e.currentTarget.dataset.meetinginfo)
+      wx.navigateTo({
+        url: `../meetingDetailSigned/meetingDetailSigned?meetingInfo=${meetingInfo}`,
+      })
+    },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.setData({
+      name: options.name
+    })
+    wx.showToast({
+      title: '加载中...',
+      icon: 'loading'
+    })
+    this.data.id = options.id
+    MeetingApi.meetingList({councilId: this.data.id, meetingSignUpType: 2, column: 'createTime', order: 'desc'}).then(res=>{
+      if(res.success){
+        if(res.result.records && res.result.records.length <= 2){
+          this.setData({
+            meetingList: res.result.records
+          })
+        }else if(res.result.records && res.result.records.length > 2){
+          this.setData({
+            meetingList: res.result.records.slice(0,2)
+          })
+        }
+      }
+    }).catch(err => {
+      wx.showToast({
+        title: '加载失败',
+        icon: 'none',
+        duration: 2000
+      })
+    })
+    UserApi.councilDetail({id: this.data.id}).then(res=>{
+      this.setData({
+        form: res.result
+      })
+    }).catch(err => {
+      wx.showToast({
+        title: '加载失败',
+        icon: 'none',
+        duration: 2000
+      })
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/councilDetail/councilDetail.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "项目详情",
+  "usingComponents": {}
+}

pages/councilDetail/councilDetail.wxml

@@ -0,0 +1,41 @@
+<!--pages/councilDetail/councilDetail.wxml-->
+<view>
+	<view class="basic-info">
+		<view class="meeting-name">
+			<text>项目名称</text>
+			<text>{{name}}</text>
+		</view>
+		<view class="meeting-name">
+			<text>项目负责人</text>
+			<text>{{form.principal}}</text>
+		</view>
+		<view class="remark">
+			<text>目标简介</text>
+			<text>{{form.remarks}}</text>
+		</view>
+		<view style="height: auto !important;">
+			<text>项目资料</text>
+			<view class="info-file" wx:if="{{form.files && form.files.length}}">
+				<text class='color-green' data-file="{{item}}" wx:for="{{form.files}}" wx:key='item'
+				bindtap="preview">{{item.fileName}}</text>
+			</view>
+			<text wx:if="{{form.files.length == 0}}">无</text>
+		</view>
+	</view>
+	<view class="basic-info" style="margin-top: 10px;">
+		<view class="title">
+			<text>会议信息</text>
+			<text style="border: none;color: #999; font-size: 13px;" bindtap="goMoreMeeting">更多>></text>
+		</view>
+		<view style="padding: 0 15px;" wx:for="{{meetingList}}" wx:key="item">
+			<view class="meeting-info">
+				<text>{{item.meetingName}}</text>
+				<text style="color: #069F99;" bindtap="meetingDetail" data-meetingInfo = "{{item}}">查看详情</text>
+			</view>
+		</view>
+		<text wx:if="{{meetingList.length == 0}}" class="no-data" style="height: 40px;">暂无会议记录！</text>
+	</view>
+</view>
+
+<view class="tips"> 更多功能和信息请到pc端操作</view>
+

pages/councilDetail/councilDetail.wxss

@@ -0,0 +1,290 @@
+/* pages/councilDetail/councilDetail.wxss */
+page{
+  box-sizing: border-box;
+  background-color: #F5F5F5;
+  padding-bottom: 20px;
+}
+.basic-info .title{
+  height: 40px;
+}
+.basic-info .title text{
+  display: block;
+  border-left: 3px solid #069F99;
+  height: 14px;
+  padding-left: 10px;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #333;
+  font-size: 15px;
+  font-weight: 500;
+}
+.basic-info view{
+  background-color: #FFF;
+  padding: 15px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #333;
+  font-size: 14px;
+  border-bottom: 0.5px solid #f5f5f5;
+  position: relative;
+}
+.basic-info view:last-child{
+  border-bottom: 0;
+}
+.basic-info view text:nth-child(1){
+  flex-shrink: 0;
+  margin-right: 10px;
+}
+.meeting-name{
+  margin-bottom: 10px;
+}
+.meeting-name text:nth-child(2){
+  text-overflow:ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.meeting-files{
+  margin-top: 10px;
+  flex-direction: column;
+  align-items: flex-start !important;
+  height: auto !important;
+}
+.basic-info .meeting-files .file-name{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  height: 40px;
+  margin-top: 10px;
+}
+.file-name view{
+  padding: 0;
+  height: 30px;
+  line-height: 30px;
+  border-bottom: 0;
+}
+.file-name view image{
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+}
+.basic-info .meeting-files .file-name .look-file{
+  color: #069F99;
+}
+.warning-text{
+  position: absolute !important;
+  top: 5px;
+  left: 75px;
+  color: #FF5E60 !important;
+  font-size: 10px !important;
+  padding: 0 !important;
+}
+.warning-text image{
+  width: 10px;
+  height: 10px;
+}
+.pay-prove-box{
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: flex-start !important;
+  align-items: flex-start !important;
+  padding: 0;
+  height: 120px !important;
+}
+.pay-prove-box .pay-prove-content{
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0;
+  height: 80px;
+}
+.pay-prove-box .pay-prove-content .pay-prove{
+  width: 80px;
+  height: 80px;
+  margin-right: 10px;
+  position: relative !important;
+  background-color: #D1D1D1;
+  padding: 0;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pay-prove-box .pay-prove-content .pay-prove image{
+  width: 80px;
+  height: 80px;
+}
+.pay-prove-box .pay-prove-content .pay-prove .delete-image{
+  width: 12px;
+  height: 12px;
+  color: #fff;
+  background-color: #FF5E60;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 7px;
+  position: absolute;
+  top: -3px;
+  right: -3px;
+}
+.way-box{
+  display: block !important;
+  padding: 0 !important;
+  height: auto !important;
+}
+.info-file{
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end !important;
+  height: auto !important;
+  overflow: hidden;
+}
+.info-file text{
+  display: block;
+  width: 100%;
+  text-align: right;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0 !important;
+}
+.meeting-info{
+  width: 100%;
+  height: auto !important;
+  display: flex;
+  justify-content: space-between !important;
+  align-items: center;
+  padding: 0 !important;
+  border: none;
+}
+.meeting-info text:nth-child(1){
+  flex-shrink: 1 !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.meeting-info text:nth-child(2){
+  flex-shrink: 0 !important;
+}
+.basic-info .way{
+  padding: 0 15px;
+  display: flex;
+  justify-content: flex-start !important;
+}
+.basic-info .way image{
+  width: 23px;
+  height: 23px;
+  margin-right: 10px;
+}
+.way-info .way-left{
+  padding: 0;
+  display: flex;
+  justify-content: flex-start !important;
+}
+.way-info .way-center{
+  display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.way-info .way-center text:nth-child(1){
+  color: #333;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.way-info .way-center text:nth-child(2){
+  color: #999;
+  font-size: 11px;
+  flex-shrink: 0;
+}
+.way-info .green {
+  width: 20px;
+    height: 20px;
+    background: #069F99;
+    color: #fff;
+    font-size: 11px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 5px;
+}
+.way-info .blue {
+  width: 20px;
+    height: 20px;
+    background: #0A72F7;
+    color: #fff;
+    font-size: 11px;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 5px;
+}
+.way-info .way-right{
+  flex-shrink: 0;
+  padding: 0;
+  color: #666;
+  font-size: 12px;
+}
+.basic-info .look-progress{
+  padding: 0 15px;
+}
+.basic-info .look-progress text:nth-child(1){
+  color: #FF5E60;
+  font-size: 14px;
+}
+.basic-info .look-progress text:nth-child(2){
+  display: block;
+  width: 70px;
+  height: 26px;
+  color: #069F99;
+  font-size: 11px;
+  border-radius: 13px;
+  border: 0.5px solid #069F99;
+  text-align: center;
+  line-height: 26px;
+}
+.sign-up-empty{
+  height: 60px;
+  width: 100%;
+  display: block;
+  margin-top: 10px;
+}
+.sign-up{
+  width: 100%;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+}
+.sign-up text{
+  background-color: #069F99;
+  height: 40px;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  display: block;
+  text-align: center;
+  line-height: 40px;
+}
+
+.remark {
+  height: auto!important;
+  margin-bottom: 10px;
+}
+
+.tips {
+  margin-top: 20px;
+  color: #000;
+  font-weight: 700;
+  font-size: 14px;
+  text-align: center;
+}

pages/standardBasicInfo/standardBasicInfo.js

@@ -0,0 +1,81 @@
+// pages/standardBasicInfo/standardBasicInfo.js
+import {getStandardBasicInfo} from '../../assets/js/http/standardApi'
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    secretariatInfo:{},// 秘书处信息
+    companyInfo:{} // 本企业信息
+  },
+  // 获取基本信息
+  getBasicInfo(){
+    getStandardBasicInfo().then(res => {
+      console.log(res);
+      if(res.success){
+        this.setData({
+          secretariatInfo:res.result,
+          companyInfo:res.result
+        })
+      }
+    }).catch(err => {
+      console.log(err,'err');
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.getBasicInfo()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+ 
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/standardBasicInfo/standardBasicInfo.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "基本信息",
+  "usingComponents": {}
+}

pages/standardBasicInfo/standardBasicInfo.wxml

@@ -0,0 +1,54 @@
+<!--pages/standardBasicInfo/standardBasicInfo.wxml-->
+<view>
+  <!-- 秘书处信息begin -->
+  <view class="basic-info mishu">
+    <view class="title">
+      <text>秘书处信息：</text>
+    </view>
+    <view>
+      <text>地址：</text>
+      <text>{{secretariatInfo.address}}</text>
+    </view>
+    <view>
+      <text>联系人：</text>
+      <text>{{secretariatInfo.contract}}</text>
+    </view>
+    <view>
+      <text>联系人电话：</text>
+      <text>{{secretariatInfo.phone}}</text>
+    </view>
+    <view>
+      <text>联系人邮箱：</text>
+      <text>{{secretariatInfo.email}}</text>
+    </view>
+  </view>
+  <!-- 秘书处信息end -->
+  <!-- 本企业信息begin -->
+  <view class="basic-info company mishu">
+
+    <view class="title">
+      <text>本企业信息：</text>
+    </view>
+    <view>
+      <text>企业名称：</text>
+      <text>{{companyInfo.name}}</text>
+    </view>
+    <view>
+      <text>企业管理员：</text>
+      <text>{{companyInfo.email}}</text>
+    </view>
+    <view>
+      <text>管理员电话：</text>
+      <text>{{companyInfo.phone}}</text>
+    </view>
+    <view>
+      <text>管理人邮箱：</text>
+      <text>{{companyInfo.email}}</text>
+    </view>
+    <view>
+      <text>会员有效期：</text>
+      <text>{{companyInfo.email}}</text>
+    </view>
+  </view>
+  <!-- 本企业信息end' -->
+</view>

pages/standardBasicInfo/standardBasicInfo.wxss

@@ -0,0 +1,38 @@
+/* pages/standardBasicInfo/standardBasicInfo.wxss */
+page{
+  padding: 10px;
+  box-sizing: border-box;
+  background-color: #F5F5F5;
+  padding-bottom: 20px;
+}
+
+.basic-info .title text{
+  border-left: 3px solid #069F99;
+  height: 14px;
+  padding-left: 10px;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  color: #333;
+  font-size: 15px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+.mishu {
+  padding: 30rpx;
+  background-color: #fff;
+  border-radius: 10px;
+  height: auto;
+}
+.mishu view{
+  display: flex;
+  padding: 14rpx;
+  font-size: 14px;
+}
+.mishu view text:nth-child(1){
+  flex-shrink: 0;
+}
+
+.company {
+  margin-top: 20px;
+}

pages/standardRouter/standardRouter.js

@@ -7,7 +7,7 @@ Page({
   data: {
     pageRputers: [
     {
-      path: "",
+      path: "../standardBasicInfo/standardBasicInfo",
       imgPath:'../../assets/images/basic-info.png',
       val: "1",
       name: "基本信息"
@@ -31,7 +31,7 @@ Page({
       name: "信息交流会"
     },
     {
-      path: "../meeting/meeting?type=", // 这里应该是一个新的页面 或者用分标委的页面 
+      path: "../council/council", 
       imgPath:'../../assets/images/lishi.png',
       val: "5",
       name: "理事会"

pages/standardRouter/standardRouter.wxml

@@ -1,7 +1,11 @@
 <!--pages/standardRouter/standardRouter.wxml-->
-<view class="select-box">
+
+
+
+<view class="wrap">
+  <view class="select-box">
   <view class="select">
-    <view class="select-item" wx:for="{{pageRputers}}" wx:for-item="item" wx:key="path" bindtap="clickSelect"
+    <view class="select-item" wx:for="{{pageRputers}}" wx:for-item="item" wx:key="path"  bindtap="clickSelect"
       data-item="{{item}}" data-index="{{index}}">
       <view class="image-box">
         <view class="img-mask"></view>
@@ -14,4 +18,6 @@
     <text class="select-item"></text>
     <text class="select-item"></text>
   </view>
+</view>
+
 </view>

pages/standardRouter/standardRouter.wxss

@@ -1,6 +1,11 @@
 /* pages/standardRouter/standardRouter.wxss */
+page {
+  background: #f5f5f5;
+  padding: 15px;
+  box-sizing: border-box;
+}
 .select-box {
-  transform: translateY(40rpx);
+  transform: translateY(60rpx);
 }
 .select {
   padding: 20rpx;
@@ -38,4 +43,11 @@
   border-radius: 50%;
   background-color: #069f99;
   opacity: .2;
+}
+
+.wrap {
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 10px;
+  height: 150pt;
 }