完成了创建星球的页面制作

AndIMissU · Dec 3, 2017 · d30a552 · d30a552
1 parent 4a1f850
commit d30a552
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 5 deletions.
diff --git a/pages/main/createStars/createStars.js b/pages/main/createStars/createStars.js
@@ -11,8 +11,11 @@ Page({
    * 完成创建 跳转到主页面
    */
   toMain: function(e) {
-    wx.navigateTo({
-      url:'../main'
+    wx.switchTab({
+      url:'../main',
+      complete: function(res) {
+        console.log(res);
+      }
     })
   },
   /**

diff --git a/pages/main/createStars/createStars.wxml b/pages/main/createStars/createStars.wxml
@@ -3,7 +3,24 @@
         <view class="page-title__title">创建免费星球</view>
         <view class="page-title__finish" bindtap="toMain">完成</view>
     </view>
-    <view class="page-hd"></view>
-    <view class="page-bd"></view>
-    <view class="page-ft"></view>
+    <view class="page-hd">
+        <view class="page-hd__star"><image src="../../../images/stars2.png"/></view>
+        <view class="page-hd__text"><input type="text" value="星球名字"/></view>
+    </view>
+    <view class="page-bd">
+        <view class="page-bd__text">选择所属星球类别(必选)</view>
+        <view class="page-bd__choose">
+            <view class="page-bd__choosebtn">文艺</view>
+            <view class="page-bd__choosebtn">科技</view>
+            <view class="page-bd__choosebtn">时尚</view>
+            <view class="page-bd__choosebtn">娱乐</view>
+            <view class="page-bd__choosebtn">经济</view>
+            <view class="page-bd__choosebtn">教育</view>
+            <view class="page-bd__choosebtn">健康</view>
+            <view class="page-bd__choosebtn">生活</view>
+        </view>
+    </view>
+    <view class="page-ft">
+        <input type="text" value="星球简介(选填)"/>
+    </view>
 </view>
diff --git a/pages/main/createStars/createStars.wxss b/pages/main/createStars/createStars.wxss
@@ -19,4 +19,73 @@
     font-size: 32rpx;
     text-indent: 170rpx;
     color: #14b392;
+}
+.page-hd {
+    text-align: center;
+    margin: auto;
+    margin-top: 46rpx;
+    width: 290rpx;
+    height: 402rpx;
+    border: 1px solid #edecee;
+    border-radius: 15rpx;
+    background: white;
+}
+.page-hd__star image{
+    margin: auto;
+    border-radius: 15rpx;
+    width: 290rpx;
+    height: 292rpx;
+}
+.page-hd__text input{
+    font-size: 32rpx;
+    width: 290rpx;
+    height: 90rpx;
+    line-height: 90rpx;
+    color: #a2a3a7;
+}
+.page-bd__text {
+    margin-top: 20rpx;
+    color: #4b4c4e;
+    text-align: center;
+    font-size: 26rpx;
+}
+.page-bd__choose {
+    margin: auto;
+    text-align: center;
+    margin-top: 30rpx;
+    width: 714rpx;
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    grid-template-rows: repeat(2,67rpx);
+    grid-gap: 18rpx;
+}
+.page-bd__choosebtn {
+    border: 1px solid #a2a3a7;
+    border-radius: 33rpx;
+    line-height: 67rpx;
+    color: #a2a3a7;
+    font-size: 26rpx;
+}
+.page-bd__choosebtn:active {
+    background: #14b392;
+    color: white;
+}
+.page-bd__choosebtn:hover {
+    background: #14b392;
+    color: white;
+}
+.page-ft {
+    margin: auto;
+    margin-top: 40rpx;
+    width: 672rpx;
+    height: 344rpx;
+    background: white;
+    border: 1px solid #edecee;
+    border-radius: 15rpx;
+}
+.page-ft input {
+    font-size: 28rpx;
+    margin-top: 20rpx;
+    margin-left: 30rpx;
+    color: #a2a3a7;
 }