增加课程报名的页面

mallApp/src/pages/class/index.vue

@@ -1,5 +1,161 @@
 <template>
-  <view>
-    123
+  <view class="app-content classPage">
+    <view class="class_info">
+      <view class="class_details">
+        <text class="flower_name">专业花店</text>
+        <text class="flower_price">¥6800.00</text>
+      </view>
+      <view class="class_intro">
+        <text class="_intro">针对有想法的人</text>
+        <text class="_intro">×1</text>
+      </view>
+    </view>
+    <view class="class_fill">
+      <view class="fill_name">
+        <text class="nickname">昵称</text>
+        <input type="text" class="inputText" placeholder="请填写昵称" placeholder-style="font-size: 28upx; color: #999;">
+        <view class="generate_btn">点击生成</view>
+      </view>
+      <view class="fill_name">
+        <text class="nickname">手机号</text>
+        <input type="text" class="inputText" placeholder="请填写手机号" placeholder-style="font-size: 28upx; color: #999;">
+        <view class="generate_btn">点击生成</view>
+      </view>
+      <view class="fill_name">
+        <text class="nickname">姓名</text>
+        <input type="text" class="inputLast" placeholder="请填写姓名" placeholder-style="font-size: 28upx; color: #999;">
+      </view>
+    </view>
+    <view class="footer_bar">
+     <text class="item_price">学费：
+        <text class="price">
+          ¥
+          <text style="font-size: 40upx;padding-left: 10upx;">6800.00</text>
+        </text>
+      </text>
+      <view class="confirm_btn">确认</view>
+    </view>
   </view>
-</template>
+</template>
+
+<script>
+export default{
+  data() {
+    return {
+      dataList: {
+        form: {
+          classId: '',
+          customId: '',
+          name: '',
+          mobile: '',
+          payWay: ''
+        }
+      }
+    }
+  },
+  onLoad(option) {
+    this.dataList.form.classId = option.classId
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.classPage{
+  padding: 20upx;
+  &>.class_info{
+    border-radius: 10upx;
+    padding: 30upx 20upx;
+    background-color: #fff;
+    &>.class_details{
+      display: flex;
+      justify-content: space-between;
+      &>.flower_name{
+        font-size: 28upx;
+        font-weight: 700;
+        color: #333;
+      }
+      &>.flower_price{
+        font-size: 28px;
+        font-weight: bold;
+        color: #FF2842;
+      }
+    }
+    &>.class_intro{
+      margin-top: 20upx;
+      display: flex;
+      justify-content: space-between;
+      &>._intro{
+        font-size: 24px;
+        color: #999999;
+      }
+    }
+  }
+  &>.class_fill{
+    margin-top: 20upx;
+    padding: 0 20upx;
+    background-color: #fff;
+    border-radius: 10upx;
+    &>.fill_name{
+      height: 88upx;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      &>.nickname{
+        max-width: 130upx;
+        width: 130upx;
+        font-size: 28px;
+        color: #333333;
+      }
+      &>.inputText{
+        width: calc(100% - 300upx);
+      }
+      &>.inputLast{
+        width: calc(100% - 150upx);
+      }
+      &>.generate_btn{
+        width: 140px;
+        height: 50px;
+        line-height: 50upx;
+        text-align: center;
+        background: #3385FF;
+        border: 1px solid #3385FF;
+        border-radius: 8px;
+        color: #fff;
+      }
+    }
+  }
+  &>.footer_bar{
+    height: 100upx;
+    width: 100vw;
+    background-color: #fff;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20upx;
+    box-sizing: border-box;
+    &>.item_price{
+      font-size: 24upx;
+      .price{
+        display: inline-block;
+        color: #FF2842;
+        font-weight: 700;
+      }
+    }
+    &>.confirm_btn{
+      width: 200upx;
+      height: 70upx;
+      text-align: center;
+      line-height: 70upx;
+      background: #3385FF;
+      border: 1px solid #3385FF;
+      border-radius: 8px;
+      color: #fff;
+      font-size: 32upx;
+    }
+  }
+}
+</style>

mallApp/src/pages/home/recent.vue

@@ -80,6 +80,7 @@ export default {
       display: inline-block;
       text-align: center;
       margin-top: 30upx;
+      width: 100%;
     }
     & > image {
       display: inline-block;