1.0.0

app.js

@@ -18,7 +18,7 @@ App({
     IsProduction: false,
     ProgramID: 105,
     StartSecond: 4,
-    fileUrl: "https://kylx365-1253256735.file.myqcloud.com/",
+    fileUrl: "https://math-1253256735.file.myqcloud.com/",
     serverUrl: "https://www.kylx365.com/apiData/",
     serverUrlServer: "https://www.kylx365.com/apiData/",
     serverUrlLocalhost: "http://localhost:3020/apiData/",

app.json

@@ -1,5 +1,9 @@
 {
   "pages": [
+    "pages/main/answer",
+    "pages/main/detail",
+    "pages/main/list",
+    "pages/main/default",
     "pages/index/index",
     "pages/index/detail",
     "pages/index/list"

pages/index/index.js

@@ -1,6 +1,5 @@
 import common from '../../utils/util';
 import server from '../../utils/main';
-const innerAudioContext1 = wx.createInnerAudioContext();
 
 const app = getApp()
 Page({
@@ -9,72 +8,10 @@ Page({
     FileUrl: app.globalData.fileUrl,
   },
   onLoad: function () {
-    var that = this;
-    server.getLocalHost(function () {
-      that.getEnumerationData(function () {
-        that.getQuestionTypesList(function () {
-          var data = wx.getStorageSync('QuestionTypeList');
-          that.setData({
-            QuestionCategory: data,
-            Containnerheight: common.getSystemHeight(),
-
-          });
-        });
-      });
-    });
-
-    var url = app.globalData.audioUrlBaidu;
-    url = url.replace("[token]", "24.6dbece3e76e486120456e6f6fc5dee15.2592000.1531286017.282335-10850912");
-    url = url.replace("[word]", "答案：45，159，55，197，781，1456，745，159，55，197，781，1456，7");
-    url = encodeURI(url);
-    innerAudioContext1.src=url;
-    innerAudioContext1.play();
-
-  },
-  gotoList: function (e) {
-    var questionTypeID = e.currentTarget.dataset.id;
-    wx.navigateTo({
-      url: './list?id=' + questionTypeID
-    });
-  },
-  //得到题型数据列表
-  getQuestionTypesList: function (callback) {
-    server.getData('GetQuestionTypes', function (data) {
-      var QuestionTypeList = data;
-
-      QuestionTypeList[QuestionTypeList.length - 1].List[QuestionTypeList[QuestionTypeList.length - 1].List.length - 1].NextID = QuestionTypeList[0].List[0].ID
-      for (var i = 0; i < QuestionTypeList.length; i++) {
-        if (i > 0)
-          QuestionTypeList[i - 1].List[QuestionTypeList[i - 1].List.length - 1].NextID = QuestionTypeList[i].List[0].ID
-        for (var j = 1; j < QuestionTypeList[i].List.length; j++) {
-          QuestionTypeList[i].List[j - 1].NextID = QuestionTypeList[i].List[j].ID;
-        }
-      }
-      //格式化或补充数据
-      for (var i = 0; i < QuestionTypeList.length; i++) {
-        for (var j = 0; j < QuestionTypeList[i].List.length; j++) {
-          var item = QuestionTypeList[i].List[j];
-          item.DifficultyName = common.getEnumerationName(item.Difficulty, app.globalData.Enumeration);
-        }
-      }
-
-      wx.setStorage({
-        key: "QuestionTypeList",
-        data: data
-      });
-      callback();
-    });
-  },
-  //得到枚举数据
-  getEnumerationData: function (callback) {
-    server.getData('GetEnumerationList', function (data) {
-      app.globalData.Enumeration = data;
-      wx.setStorage({
-        key: "Enumeration",
-        data: data
-      });
-      callback();
+    this.setData({
+      Containnerheight: server.getWindowHeight(),
     });
+    this.updateProgram();
   },
   updateProgram: function () {
     if (wx.canIUse("getUpdateManager")) {

pages/index/index.json

@@ -1,8 +1,8 @@
 {
-  "navigationBarBackgroundColor": "#fff",
-  "navigationBarTextStyle": "black",
-  "navigationBarTitleText": "数学计算题",
-  "backgroundColor": "#1E1E1E",
+  "navigationBarBackgroundColor": "#213A5B",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "",
+  "backgroundColor": "#213A5B",
   "backgroundTextStyle": "light",
   "enablePullDownRefresh": false
 }

pages/index/index.wxml

@@ -1,5 +1,14 @@
-<view class="container FlexColumn">
-  <block wx:for="{{QuestionCategory}}" wx:key="index">
-    <image src="{{FileUrl}}images/QuestionLibrary/{{item.ImageUrl}}?2" class="QuestionTypeImage" bindtap="gotoList" data-id="{{item.ID}}" />
-  </block>
+<view class="container FlexColumn" style="height:{{Containnerheight}}rpx;">
+  <view class="text1">数学计算题</view>
+  <view class="panel FlexRow">
+    <view class="text2">选题</view>
+    <view class="text2">+</view>
+    <view class="text2">打印</view>
+    <view class="text2">·</view>
+    <view class="text2">扫码</view>
+    <view class="text2">+</view>
+    <view class="text2">批改</view>
+  </view>
+
+  <image class="programstart_footer_illue" src="../../images/programstart_footer_illue.png" />
 </view>

pages/index/index.wxss

@@ -1,10 +1,26 @@
 .container {
-  background-color: #1E1E1E;
+  background-color: #213a5b;
   justify-content: flex-start;
-} 
+}
 
-.QuestionTypeImage{
+.programstart_footer_illue {
   width: 100%;
-  height:400rpx;
-  position: relative;
-}
+  height: 540rpx;
+  position: fixed;
+  bottom: 0;
+}
+
+.text1 {
+  margin-top: 142rpx;
+  color: #fff;
+  font-size: 48rpx;
+  text-shadow: 0 7rpx 0 #112331;
+}
+
+.panel {
+  margin-top: 20rpx;
+  color: #fff;
+  font-size: 24rpx;
+  width:281rpx;
+  justify-content: space-around;
+}

pages/main/answer.js

@@ -0,0 +1,37 @@
+import common from '../../utils/util';
+import server from '../../utils/main';
+
+const app = getApp()
+Page({
+  data: {
+    version: app.globalData.version,
+    FileUrl: app.globalData.fileUrl,
+    IsEdit:false,
+  },
+  onLoad: function () {
+    this.setData({
+      Containnerheight: server.getWindowHeight(),
+    });
+  },
+  btnEdit:function(){
+    var that=this;
+    that.data.IsEdit=!that.data.IsEdit;
+    that.setData({
+      IsEdit: that.data.IsEdit,
+    });
+  },
+  onShareAppMessage: function () {
+    return {
+      title: '',
+      path: 'pages/index/index',
+      success: function (res) {
+      },
+      fail: function (err) {
+        console.log(err);
+      },
+      complete: function (res) {
+        console.log(res);
+      },
+    }
+  },
+})

pages/main/answer.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarBackgroundColor": "#326FAE",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "答案资料室",
+  "backgroundColor": "#326FAE",
+  "backgroundTextStyle": "light",
+  "enablePullDownRefresh": false
+}

pages/main/answer.wxml

@@ -0,0 +1,109 @@
+<view class="container FlexColumn" style="min-height:{{Containnerheight}}rpx;">
+  <view class="line0"></view>
+  <view class="line1"></view>
+
+  <image class="answerroom_list_conveyer_headline_illus" src="../../images/answerroom_list_conveyer_headline_illus.png" />
+  <view class="panelTop FlexRow">
+    <view class="panelTop0 FlexColumn">
+      <view class="panelTop00 FlexRow" wx:if="{{IsEdit}}">
+        <image class="universalpic_select_on_white" src="../../images/universalpic_select_on_white.png" />
+        <view class="text">删除选中 0个</view>
+      </view>
+      <view class="line" wx:if="{{IsEdit}}"></view>
+    </view>
+    <view class="panelTop1 FlexRow" bindtap='btnEdit'>
+      <view class="btn" wx:if="{{IsEdit}}"></view>
+      <view class="btn2 btn" wx:if="{{!IsEdit}}"></view>
+      <view class="text2 text" wx:if="{{IsEdit}}">完成</view>
+      <view class="text2 text" wx:if="{{!IsEdit}}">编辑</view>
+    </view>
+  </view>
+
+  <view class="panel0 FlexColumn">
+    <view class="panel00 FlexRow">
+      <view class="panel0MainBG panel0Main">
+        <view class="line2"></view>
+        <view class="item FlexColumn">
+          <view class="itemLine0"></view>
+          <view class="itemChild FlexRow">
+            <view class="FlexRow">
+              <image wx:if="{{IsEdit}}" class="universalpic_select_on_gray" src="../../images/universalpic_select_on_gray.png" />
+              <image wx:if="{{!IsEdit}}" class="questioncard_icon" src="{{FileUrl}}questioncard_icon_grade0602_size01.png" />
+              <view class="title FlexColumn">
+                <view class="title1">
+                  2018年12月23日 23:14
+                </view>
+                <view class="title2 FlexRow">
+                  四则运算a+b+c
+                </view>
+              </view>
+            </view>
+            <view class="title3 FlexRow">
+              <view class="title30">#</view>
+              <view class="title31">48</view>
+              <image class="universalpic_new_red_size01" src="../../images/universalpic_new_red_size01.png" />
+
+            </view>
+          </view>
+          <view class="itemLine1"></view>
+        </view>
+
+        <view class="item FlexColumn">
+          <view class="itemLine00 itemLine0"></view>
+          <view class="itemChild0 itemChild FlexRow">
+            <view class="FlexRow">
+              <image wx:if="{{IsEdit}}" class="universalpic_select_on_gray" src="../../images/universalpic_select_on_gray.png" />
+              <image wx:if="{{!IsEdit}}" class="questioncard_icon" src="{{FileUrl}}questioncard_icon_grade0602_size01.png" />
+              <view class="title FlexColumn">
+                <view class="title1">
+                  2018年12月23日 23:14
+                </view>
+                <view class="title2 FlexRow">
+                  四则运算a+b+c
+                </view>
+              </view>
+            </view>
+            <view class="title3 FlexRow">
+              <view class="title30">#</view>
+              <view class="title31">13</view>
+
+            </view>
+          </view>
+          <view class="itemLine1"></view>
+        </view>
+
+        <view class="item FlexColumn">
+          <view class="itemLine0"></view>
+          <view class="itemChild"></view>
+          <view class="itemLine1"></view>
+        </view>
+      </view>
+    </view>
+    <image class="answerroom_list_conveyer_footer_illus" src="../../images/answerroom_list_conveyer_footer_illus.png" />
+
+    <view class="textFooter FlexRow">
+      <image class="universalpic_attention_blue_size01" src="../../images/universalpic_attention_blue_size01.png" />
+      <view class="textFooter1">删除小程序时，答案也会被删除。</view>
+    </view>
+
+    <view class="panel01 panel00 FlexRow">
+
+      <view class="panel000 FlexColumn">
+        <image class="answerroom_list_conveyer_part_left" src="../../images/answerroom_list_conveyer_part_left.png" />
+        <image class="answerroom_list_conveyer_part_left" src="../../images/answerroom_list_conveyer_part_left.png" />
+      </view>
+      <view class="panel001"></view>
+      <view class="line2"></view>
+      <view class="panel001"></view>
+      <view class="panel000 FlexColumn">
+        <image class="answerroom_list_conveyer_part_right" src="../../images/answerroom_list_conveyer_part_right.png" />
+        <image class="answerroom_list_conveyer_part_right" src="../../images/answerroom_list_conveyer_part_right.png" />
+      </view>
+    </view>
+
+    <view class="line21 line2"></view>
+  </view>
+
+
+
+</view>

pages/main/answer.wxss

@@ -0,0 +1,280 @@
+.container {
+  background-color: #213a53;
+  justify-content: flex-start;
+}
+
+.line0 {
+  width: 100%;
+  height: 112rpx;
+  background-color: #326fae;
+}
+
+.line1 {
+  width: 100%;
+  height: 146rpx;
+  background-color: #8c3d34;
+  z-index: 10;
+}
+
+.answerroom_list_conveyer_headline_illus {
+  width: 710rpx;
+  height: 170rpx;
+  position: absolute;
+  top: 20rpx;
+  z-index: 20;
+}
+
+
+.panelTop {
+  width: 710rpx;
+  position: absolute;
+  top: 80rpx;
+  z-index: 30;
+  justify-content: space-between;
+}
+.panelTop .panelTop0 {
+  width: 280rpx;
+  height: 90rpx;
+  margin-left: 50rpx;
+}
+.panelTop .panelTop1 {
+  margin-right: 69rpx;
+}
+.panelTop .panelTop00 {
+  width: 280rpx;
+  height: 80rpx;
+
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  background-color: #D79E59;
+}
+.panelTop .line {
+  width: 280rpx;
+  height: 10rpx;
+  background-color: #B98043;
+}
+
+.panelTop .text {
+  color: #fff;
+  font-size: 26rpx;
+  text-shadow: 3rpx 3rpx 3rpx #906A3C, 
+    3rpx -3rpx 3rpx #906A3C, 
+    -3rpx 3rpx 3rpx #906A3C, 
+    -3rpx -3rpx 3rpx #906A3C;
+}
+
+
+.panelTop .btn {
+  width: 16rpx;
+  height: 16rpx;
+  background-color: #9EE74F;
+  margin-right: 10rpx;
+  border-radius: 3rpx;
+  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.10);
+}
+
+.panelTop .btn {
+  background-color: #F0BE7B;
+}
+
+.panelTop .text2 {
+  text-shadow: 3rpx 3rpx 6rpx #C34738, 
+  3rpx -3rpx 6rpx #C34738, 
+  -3rpx 3rpx 6rpx #C34738, 
+  -3rpx -3rpx 6rpx #C34738;
+}
+
+.universalpic_select_on_white{
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 20rpx;
+}
+
+.universalpic_select_on_gray{
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 12rpx;
+  margin-left: 42rpx;
+}
+
+.panel0 {
+  width: 100%;
+  position: absolute;
+  top: 170rpx;
+  background-color: #213a53;
+}
+
+.panel0 .panel00 {
+  width: 100%;
+  z-index: 20;
+  align-items: flex-start;
+}
+
+.panel0 .panel01 {
+  width: 100%;
+  z-index: 20;
+  align-items: flex-start;
+  position: absolute;
+  top: 0;
+}
+
+.panel0 .panel000 {
+  width: 10rpx;
+  height: 1490rpx;
+  background-color: #929292;
+  z-index: 30;
+  justify-content: space-between;
+}
+
+.panel0 .panel001 {
+  width: 20rpx;
+  height: 1490rpx;
+  background-color: #4d4d4d;
+  z-index: 30;
+}
+
+.panel0 .panel0Main {
+  width: 610rpx;
+  height: 1320rpx;
+}
+
+.panel0 .panel0MainBG {
+  background-color: #6a6d6f;
+}
+
+.panel0 .item {
+  width: 100%;
+  height: 130rpx;
+  background-color: #797c7d;
+  justify-content: space-between;
+}
+
+.panel0 .itemLine0 {
+  width: 100%;
+  height: 10rpx;
+  background-color: rgba(0, 0, 0, 0.36);
+}
+
+.panel0 .itemLine00 {
+  width: 100%;
+  height: 10rpx;
+  background-color: rgba(0, 0, 0, 0.46);
+}
+
+.panel0 .itemLine1 {
+  width: 100%;
+  height: 10rpx;
+  background-color: #979595;
+}
+
+.panel0 .itemChild {
+  width: 100%;
+  height: 110rpx;
+  justify-content: space-between;
+}
+
+.panel0 .itemChild0 {
+  background-color: #5e6164;
+}
+
+.questioncard_icon {
+  width: 54rpx;
+  height: 60rpx;
+  margin-left: 30rpx;
+}
+
+.itemChild .title {
+  color: #fff;
+  margin-left: 30rpx;
+  align-items: flex-start;
+}
+
+.itemChild .title1 {
+  font-size: 20rpx;
+}
+
+.itemChild .title2 {
+  font-size: 30rpx;
+  color: #c9c9c9;
+}
+
+.itemChild .title3 {
+  width: 122rpx;
+  height: 70rpx;
+  background-color: #3e3e3e;
+  color: #fff;
+  border-top-left-radius: 4rpx;
+  border-bottom-left-radius: 4rpx;
+  position: relative;
+}
+
+.itemChild .title30 {
+  font-size: 20rpx;
+  font-family: 'Roboto-Bold';
+  position: absolute;
+  top: 10rpx;
+  left: 14rpx;
+}
+
+.itemChild .title31 {
+  font-size: 38rpx;
+  font-family: 'Roboto-Black';
+  margin-top: 7rpx;
+}
+
+.panel0 .line2 {
+  width: 610rpx;
+  height: 20rpx;
+  background-color: #6a6d6f;
+}
+
+.answerroom_list_conveyer_footer_illus {
+  width: 100%;
+  height: 320rpx;
+  position: relative;
+  z-index: 20;
+}
+
+.universalpic_attention_blue_size01 {
+  width: 20rpx;
+  height: 20rpx;
+  margin-right: 10rpx;
+}
+
+.answerroom_list_conveyer_part_left {
+  width: 18rpx;
+  height: 60rpx;
+  margin: 55rpx 0 50rpx -30rpx;
+}
+
+.answerroom_list_conveyer_part_right {
+  width: 18rpx;
+  height: 60rpx;
+  margin: 55rpx -28rpx 50rpx 0;
+}
+
+.panel0 .line21 {
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 30;
+  position: absolute;
+  top: 0;
+  width: 670rpx;
+}
+
+.universalpic_new_red_size01 {
+  width: 70rpx;
+  height: 30rpx;
+  position: absolute;
+  top: -15rpx;
+  left:40rpx;
+}
+
+.textFooter {
+  margin-top: 40rpx;
+  margin-bottom: 100rpx;
+}
+
+.textFooter1 {
+  color: #4f92ba;
+  font-size: 22rpx;
+}

pages/main/default.js

@@ -0,0 +1,32 @@
+import common from '../../utils/util';
+import server from '../../utils/main';
+
+const app = getApp()
+Page({
+  data: {
+    version: app.globalData.version,
+    FileUrl: app.globalData.fileUrl,
+  },
+  onLoad: function () {
+    this.setData({
+      Containnerheight: server.getWindowHeight(),
+      ProgramList: server.getProgramList(),
+    });
+
+
+  },
+  onShareAppMessage: function () {
+    return {
+      title: '',
+      path: 'pages/index/index',
+      success: function (res) {
+      },
+      fail: function (err) {
+        console.log(err);
+      },
+      complete: function (res) {
+        console.log(res);
+      },
+    }
+  },
+})

pages/main/default.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarBackgroundColor": "#B9DC5D",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "数学计算题",
+  "backgroundColor": "#B9DC5D",
+  "backgroundTextStyle": "light",
+  "enablePullDownRefresh": false
+}

pages/main/default.wxml

@@ -0,0 +1,106 @@
+<view class="container FlexColumn" style="min-height:{{Containnerheight}}rpx;">
+  <scroll-view class="scroll-view_H" scroll-x>
+    <image class="homepage_headline_illus" src="../../images/homepage_headline_illus.png" />
+  </scroll-view>
+
+  <view class="panel FlexColumn">
+    <view class="line1"></view>
+    <view class="line2"></view>
+    <view class="panel0 FlexRow">
+      <view class="panel00Left"></view>
+      <view class="panel00 FlexColumn">
+        <view class="panel000 FlexRow">
+          <view class="text">选题</view>
+          <view class="text">·</view>
+          <view class="text">打印</view>
+        </view>
+        <view class="panel001 FlexRow">
+          <view class="panel0010 FlexRow">
+            <image class="homepage_question_illus_grade01" src="../../images/homepage_question_illus_grade01.png" />
+            <image class="homepage_question_illus_grade01" src="../../images/homepage_question_illus_grade02.png" />
+            <image class="homepage_question_illus_grade01" src="../../images/homepage_question_illus_grade03.png" />
+            <image class="homepage_question_illus_grade01" src="../../images/homepage_question_illus_grade04.png" />
+          </view>
+        </view>
+        <image class="universalpic_line_zigzag_brown_down" src="../../images/universalpic_line_zigzag_brown_down.png" />
+        <image class="universalpic_line_zigzag_brown_up" src="../../images/universalpic_line_zigzag_brown_up.png" />
+        <view class="panel002 FlexRow">
+          <view class="panel0020 FlexRow">
+            <view class="panel00200 FlexColumn">
+              <view class="text0">批改</view>
+              <view class="line"></view>
+              <view class="panel002000 FlexRow">
+                <view class="text1">制题次数</view>
+                <view class="text2">232</view>
+              </view>
+              <view class="line2 line"></view>
+              <view class="panel002000 FlexRow">
+                <view class="text1">制题日期</view>
+                <view class="text">2018年1月13日</view>
+              </view>
+              <view class="line2 line"></view>
+              <view class="panel002000 FlexRow">
+                <view class="btn">
+                  <view class="btn1">
+                    登录
+                  </view>
+                </view>
+                <view class="btn2 btn">
+                  <view class="btn3 btn1">
+                    答案
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view class="panel00201 FlexRow">
+              <image class="universalpic_face_default_black_size01" src="../../images/universalpic_face_default_black_size01.png" />
+            </view>
+          </view>
+          <image class="homepage_clipboard_illus_clip" src="../../images/homepage_clipboard_illus_clip.png" />
+          <image class="homepage_clipboard_illus_ruler" src="../../images/homepage_clipboard_illus_ruler.png" />
+
+        </view>
+        <image class="universalpic_line_zigzag_brown_down" src="../../images/universalpic_line_zigzag_brown_down.png" />
+        <image class="universalpic_line_zigzag_brown_up" src="../../images/universalpic_line_zigzag_brown_up.png" />
+        <view class="panel003 circularBottom FlexColumn">
+          <view class="panel0030 FlexRow">
+            <view class="panel00300 FlexColumn">
+              <text class="text">©2018 唱意教育 - 数学计算题\n微信小程序 版本 1.0.0</text>
+              <view class="panel003000 FlexRow">
+                <view>帮助</view>
+                <view class="line"></view>
+                <view>反馈</view>
+                <view class="line"></view>
+                <view>合作</view>
+              </view>
+            </view>
+            <view class="btn4 btn">
+              <view class="btn5 btn1 FlexColumn">
+                <image class="universalpic_share_size01" src="../../images/universalpic_share_size01.png" />
+                <view>转发分享</view>
+              </view>
+            </view>
+          </view>
+
+          <view class="panel0031 FlexColumn">
+            <view class="panel00310 FlexColumn">
+              唱意教育其它练习产品
+            </view>
+            <view class="line"></view>
+            <block wx:for="{{ProgramList}}" wx:key="index">
+              <view class="panel00311 FlexRow">
+                <view class="panel003110 FlexRow">
+                  <image class="universalpic_product_kousuan_icon_size01" src="../../images/{{item.imageName}}.png" />
+                  <view class="text">{{item.Name}}</view>
+                </view>
+                <image class="universalpic_indicator_pink" src="../../images/universalpic_indicator_pink.png" />
+              </view>
+              <view class="line"></view>
+            </block>
+          </view>
+        </view>
+      </view>
+      <view class="panel00Right"></view>
+    </view>
+  </view>
+</view>

pages/main/default.wxss

@@ -0,0 +1,331 @@
+.container {
+  background-color: #583027;
+  justify-content: flex-start;
+}
+
+.scroll-view_H {
+  width: 100%;
+  height: 460rpx;
+}
+
+.homepage_headline_illus {
+  width: 1500rpx;
+  height: 460rpx;
+}
+
+.panel {
+  width: 100%;
+  background-color: #583027;
+  height: 2364rpx;
+  justify-content: flex-start;
+}
+
+.line1 {
+  width: 100%;
+  height: 10rpx;
+  background-color: rgba(0, 0, 0, 0.16);
+}
+
+.line2 {
+  width: 100%;
+  height: 90rpx;
+  background-color: #291112;
+  margin-top: 30rpx;
+}
+
+.panel0 {
+  width: 100%;
+  position: absolute;
+  top: 460rpx;
+  align-items: flex-start;
+}
+
+.panel00 {
+  width: 680rpx;
+  height: 2264rpx;
+  justify-content: flex-start;
+}
+
+.panel00Left {
+  width: 15rpx;
+  height: 90rpx;
+  background-color: #3d211b;
+  border-top-left-radius: 6rpx;
+  border-bottom-left-radius: 6rpx;
+}
+
+.panel00Right {
+  width: 15rpx;
+  height: 90rpx;
+  background-color: #3d211b;
+  border-top-right-radius: 6rpx;
+  border-bottom-right-radius: 6rpx;
+}
+
+.panel000 {
+  width: 100%;
+  height: 90rpx;
+  background-color: #4f2921;
+}
+
+.panel000 .text {
+  margin: 0 6rpx;
+  color: #e3e3e3;
+  font-size: 36rpx;
+  text-shadow: 8rpx 8rpx 6rpx #1e1e1e, -8rpx -8rpx 6rpx #1e1e1e;
+}
+
+.panel001 {
+  width: 100%;
+  height: 368rpx;
+  background-color: #723c30;
+}
+
+.panel0010 {
+  flex-wrap: wrap;
+}
+
+.homepage_question_illus_grade01 {
+  width: 290rpx;
+  height: 134rpx;
+  margin: 10rpx 15rpx 10rpx 15rpx;
+}
+
+.universalpic_line_zigzag_brown_down {
+  width: 100%;
+  height: 49rpx;
+}
+
+.universalpic_line_zigzag_brown_up {
+  width: 100%;
+  height: 79rpx;
+  margin-top: 10rpx;
+}
+
+.panel002 {
+  width: 100%;
+  height: 638rpx;
+  background-color: #723c30;
+  position: relative;
+}
+
+.panel0020 {
+  width: 560rpx;
+  height: 568rpx;
+  background-color: #aa5d49;
+  border-radius: 14rpx;
+  position: relative;
+}
+
+.homepage_clipboard_illus_clip {
+  width: 220rpx;
+  height: 116rpx;
+  position: absolute;
+  left: 230rpx;
+  top: 5rpx;
+}
+
+.homepage_clipboard_illus_ruler {
+  width: 218rpx;
+  height: 57rpx;
+  position: absolute;
+  right: 77rpx;
+  bottom: 14rpx;
+}
+
+.panel00200 {
+  margin-top: -14rpx;
+  width: 490rpx;
+  height: 478rpx;
+  background-color: #ffc76d;
+  border-radius: 14rpx;
+  box-shadow: 0px 3px 0px #77472a;
+  justify-content: flex-start;
+  font-size: 24rpx;
+  font-weight: 500;
+}
+
+.panel00200 .text0 {
+  font-size: 36rpx;
+  color: #fff;
+  margin-top: 70rpx;
+  text-shadow: -3rpx -3rpx 4rpx #bd682d,
+                 -3rpx 3rpx 4rpx #bd682d,
+                 3rpx -3rpx 4rpx #bd682d,
+                 3rpx 3rpx 4rpx #bd682d;
+}
+
+.panel00200 .line {
+  margin-top: 50rpx;
+  width: 430rpx;
+  height: 4rpx;
+  background-color: #638a79;
+  border-radius: 2rpx;
+}
+
+.panel00200 .line2 {
+  margin-top: 20rpx;
+}
+
+.panel002000 {
+  width: 410rpx;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.panel00200 .text2 {
+  font-size: 24rpx;
+  font-weight: 600;
+}
+
+.btn {
+  width: 208rpx;
+  height: 90rpx;
+  background-color: #035834;
+  border-radius: 8rpx;
+  position: relative;
+}
+
+.btn1 {
+  width: 100%;
+  height: 70rpx;
+  background-color: #03af69;
+  border-radius: 8rpx;
+  line-height: 70rpx;
+  text-align: center;
+  color: #fff;
+  font-size: 32rpx;
+}
+
+.btn2 {
+  background-color: #315982;
+  margin-left: 14rpx;
+}
+
+.btn3 {
+  background-color: #3b85d0;
+}
+
+.panel00201 {
+  width: 160rpx;
+  height: 160rpx;
+  background-color: #fff;
+  border-radius: 4rpx;
+  position: absolute;
+  left: 18rpx;
+  top: 30rpx;
+}
+
+.universalpic_face_default_black_size01 {
+  width: 140rpx;
+  height: 140rpx;
+  border-radius: 4rpx;
+}
+
+.panel003 {
+  width: 100%;
+  height: 888rpx;
+  background-color: #723c30;
+  box-shadow: 0px 10px 0px rgba(0, 0, 0, 0.10);
+  color: #edc1b4;
+  justify-content: flex-start;
+}
+
+.circularBottom {
+  border-bottom-left-radius: 20rpx;
+  border-bottom-right-radius: 20rpx;
+}
+
+.panel0030 {
+  width: 100%;
+  font-size: 20rpx;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 30rpx;
+}
+
+.panel00300 {
+  margin-left: 40rpx;
+  align-items: flex-start;
+}
+
+.panel003000 {
+  font-size: 24rpx;
+  width: 314rpx;
+  justify-content: space-between;
+  margin-top: 30rpx;
+}
+
+.panel003000 .line {
+  width: 5rpx;
+  height: 20rpx;
+  background-color: #583027;
+}
+
+.btn4 {
+  background-color: #583027;
+  margin-right: 80rpx;
+  width: 140rpx;
+  height: 154rpx;
+  border-radius: 20rpx;
+}
+
+.btn5 {
+  height: 140rpx;
+  background-color: #9d4d3c;
+  font-size: 22rpx;
+  color: #fff;
+  border-radius: 20rpx;
+}
+
+
+.universalpic_share_size01 {
+  width: 50rpx;
+  height: 50rpx;
+  margin-top: 24rpx;
+}
+
+.panel0031 {
+  margin-top: 35rpx;
+  width: 100%;
+  font-size:24rpx;
+  color:#EDC1B4;
+  align-items: flex-start;
+}
+
+.panel00310 {
+  margin-left: 40rpx;
+}
+
+.panel0031 .line{
+  margin-top: 30rpx;
+  width: 100%;
+  height:1rpx;
+  background-color: #985546;
+}
+
+.panel00311 {
+  margin-top: 30rpx;
+  width: 100%;
+  justify-content: space-between;
+}
+
+
+.panel003110 {
+  margin-left: 40rpx;
+  font-size:28rpx;
+}
+
+
+.universalpic_product_kousuan_icon_size01 {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  margin-right: 20rpx;
+}
+
+.universalpic_indicator_pink {
+  width: 16rpx;
+  height: 26rpx;
+  margin-right: 30rpx;
+}