【实训项目】精点考研-阿里云开发者社区

1.设计摘要

如果说高考是一次能够改变命运的考试，那么考研应该是另外一次。为什么那么多人都要考研呢？从中国教育在线官方公布是考研动机调查来看，大家扎堆考研的原因大概集中在这6个方面：本科就业压力大，提升竞争力、通过考研选择真正感兴趣的专业、为了获得学历、继续深造、随大流、有名校情结。根据官方统计数据显示，有36%的考研人是因为就业压力大，希望通过考研提高就业竞争力；超过21%的人是希望继续深造，提高学术研究能力；紧跟着的是17%的人，希望通过考研获得学历、学位证书。还有一部分人是希望通过考研来换一个自己喜欢的专业，这部分人也占了15%左右。就业的压力想必大家也都从目前的就业形势中，能够很直观的感受到。尤其是随着高等教育的普及，大学生已经非常普遍，用人单位现在招聘起步就是大专以上学历，所以很多人为了增加自己的竞争优势，就纷纷投入到了考研的队伍中来！另外大家不要忽略一个考研的中坚力量，那就是往届生。根据官方统计数据，2019年考研报考人数中，往届生的报考比例已经占到了45%，这么大的比例，对于想考研的应届生来说也是一个不可小视的力量。在这么大的竞争压力下，大多数考研人对公共科目比较了解，但对所报院校的专业课程考试及复试不是很了解，又苦于没有专业人士指导，对自己的研究生考试忧心忡忡。

2.设计的模式及产品目标

产品采用C2C运行模式，通过我们这个平台，用户可以挑选自己所报院校的专业指导人员，对自己进行专业考试和复试的指导，使用户更加了解自己所报考的院校，提高自己的考研成功率。对于相关院校的辅导人员(大多是已经考上该校的研究生)，可以在闲暇时候增加收入，补贴一下生活。

3.创新与优势

我们平台将用户与所报院校进行精准对接，使其获得所报院校的第一手资源，在考研路上事半功倍。

4.可行性分析

(1)对现有系统的分析

传统人工的方式来为考研服务存在着许多缺点，如效率低、保密性差等。另外时间一长，将产生大量的文件和数据，这对于查找、更新和维护都带来了不少的困难。

(2)对技术的可行性分析

此次系统开发使用html和javascript等技术，简单易学，又增强了可视化、数据库及Internet编程功能，很容易就可以进行系统开发。而对数据库的建立，可以采用mysql。该软件简单易懂，应用广泛，比较适合新手上路使用，而且建立的数据库较为安全。

(3)安全上的可行性

在建立数据库时可以通过对数据库的设计用户名和密码进行保密，以及在建立数据库以后可以对数据进行压缩等技术，保证数据的安全，使数据库具有安全保障。

(4)社会因素的分析

随着科学技术的不断提高，计算机科学日渐成熟，作为计算机应用的一部分，使用计算机对考研资源进行共享，具有着手工所无法比拟的优点。这些优点能够极大提高学生考研的效率，也是与世界接轨的重要条件。该软件的开发不会侵犯国家、集体和他人的利益。

5.需求分析

考研人群可以在我们平台注册详细信息，根据注册用户填写的报考学校专业，我们推荐相关的考研课程，同时他也可以更精确的搜索考研课程，以及复试的课程。可以查看相关课程的详情。购买课程后，就可以对该课程进行评价，进入老师的页面，进行评论留言（得到回复，解答疑问）。授课老师可以上传课程资料，供用户消费。也可以对学生的评论进行回复，解答疑问。

6.设计总体框架

7.详细功能设计

8.详细设计与实现

(1)首页--搜索发布分类物品界面及index设计

评论页面--发表自己评论查看所有评论

评论区--从数据库中查找

jQuery的应用，与后台连接

页面关闭函数和页面打开函数

登陆注册页面（可以和数据库相连，查询，异步）：

注册界面--查询数据库，发现重复，报错alert()

login中jQuery的应用（其他的不再赘述）

发现页面--发现趣味广告推广学习新学法

从发现页面跳转的页面：

订单页面--购买订单显示订单分类

页面关闭函数和页面打开函数

订单详情--显示课程详情进入品论区发表评论

从课程详情页面跳转的页面：

我的页面--登陆注册个人资料

登陆评论的入口

我的资料：

9.测试与运行

（1）页面跳转混乱，在打开和关闭frame-header和frame-body时出现匹配错乱问题。

（2）在第一次打开页面时出现错误，原因是引入静态文件的路径问题。

（3）JQuery文件引入问题，如果需要使用JQuery文件，必须在所有js文件之前引用。

（4）Ajax使用时出现错误，路径问题，需要每次更改IP地址或者是固定服务器的IP地址。

10.项目组成员分工

（1）成员组成

组长：组长1

组员：组员1 组员2 组员3 组员4 组员5

（2）成员分工

组员1：首页--搜索发布分类物品界面及index设计；评论页面-发表自己的评论；查看所有评论、后台开发，jQuery的应用和页面关闭函数

组员2：订单页面课程及订单详情页面我的页面；辅助写jQuery和页面跳转

组员3：我的页面--登陆注册个人资料

组员4：评论页面--发表自己评论查看所有评论；评论区--从数据库中查找

组员5：登陆注册页面（可以和数据库相连，查询，异步）

组长1：发现页面--发现趣味广告推广学习新学法

11.心得体会

组长1：课程设计是我们专业课程知识综合应用的实践训练，是我们迈向社会，从事职业工作前一个必不少的过程。实验过程中，也十分感谢实验指导老师陈中育老师的指点与教导。这次软件设计不仅是对这学期所学知识的一种综合检验，而且也是对自己动手能力的一种提高，增强了自己实践能力。

组员1：此次课程设计，使我全面的了解了基于手机系统app的开发全过程，对软件的开发有了整体的认知和理解，包括前端页面设计，内容链接；后端的数据库查询，人员密码验证等。最宝贵的是基于前后端的联系，来实现用户与数据库的交互，之前不是很清楚其中的运作原理，十分感谢指导老师的悉心指导，帮助我们熟悉环境，明白前后端设计的机理。这次的开发经验十分宝贵，对我之后的学习有很大的帮助与导向作用。

组员2：本次课设第一次接触基于安卓平台的APP的设计，不过这次因为考研的原因时间很紧，并没有全程跟着团队做，只是在其他组员的帮助下完成了我的页面和个人资料的设计，运用Web实验的基础完成了MVC模式下的登录与注册的功能。总的来说这次课设还是依靠组里的大佬完成的。

组员3：通过此次课程设计，我进一步掌握了对小程序开发的应用理解，同时，还将小程序开发的过程与以往网页开发等相关开发经历相互结合，互相学习，触类旁通，进一步提高我的综合开发能力，增加了个人编程经历，丰富了个人学习经验，全方位提高个人综合素质。

组员4：通过这次课程设计使我明白了自己知识还比较欠缺，只是学习书本知识还是远远不够的，自己不会的东西还有太多，心得体会学习需要自己长期的积累，在以后的学习、工作中都应该不断的学习，将课本的理论知识与生活中的实践知识相结合，不断提高自己文化知识和实践能力。

组员5：在这次的软件设计中不仅检验了我所学习的知识，也培养了我的实践能力，让我知道遇到一个问题，如何去寻找思路，如何去解决问题，最终完成整个事情。在设计过程中，与同学分工设计，和同学们相互探讨，相互学习，相互监督。学会了合作，学会了宽容，学会了理解，也学会了做人与处世。

12.核心代码

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
    <style>
     /* 头部样式 */
     #firstHeader {background-color: #87cefa;}
     .topbar {/*background: #87cefa;*/ height:50px; border-bottom: 1px solid #DDDFE3;}
     .topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
     .hr01, .hr02 {height: 28px;}
     .headerico {padding: 11px 15px 11px 15px;}
     .headericohover {background: #DADDE0;}
     .fr{float: right;}
     .fl{float: left;}
     /*第一头部*/
     #logo {padding: 11px 0 0 10px;height: 28px;}
     #citylist {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px; color: #fff;}
     .citylistarrow {vertical-align: top; width: 20px; padding-top: 15px;}
    .search {height: 34px;line-height: 34px; padding-left: 10px; border-radius: 30px;  margin-top: 8px; position: absolute; left: 20px; right: 60px;font-size: 14px;}
    .search img {vertical-align: top; width: 20px; padding-top: 7px;padding-right: 10px;}
    .firstSearch {left: 90px;right: 60px;background-color:#00bfff;color: #87cefa;}
     /* 第二头部 */
     #topbar_refresh {width: 40px;padding:5px 10px;}
     .whitebar {background-color: #fcfcfc;}
     #whitecity {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px;color: #87CEFA;}
    .secCitylistarrow {vertical-align: top; width: 15px; padding-top: 18px;padding-left: 5px;}
    .secSearch {left: 90px;right: 15px;background-color: #E8E8E8;color: #999;}
    /* 第三头部 */
    .swipepic {padding: 5px 15px 2px 15px;height: 23px;}
    .swipe div {font-size: 12px; text-align: center;color: #999;}
    .thrSearch {left: 15px;right: 60px;background-color: #E8E8E8;color: #999;}
     /* 头部切换样式 */
     .titlebar {display: none;}
     .activebar {display: block;}
     /* 底部切换按钮样式 */
     ul {display: -webkit-box; display: -webkit-flex; display: flex; }
     #footer {height: 61px; line-height: 60px; background-color: #FAFAFA;border-top: 1px solid #FAFAFA; }
     #footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1; height: 60px;}
     /* 选项卡样式 */
     .scrollbar {display: -webkit-box;display: -webkit-flex; text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
     .col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
     .indexbar {position: absolute;/*background: #0fc;*/width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
     .redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}
     /********************/
     /* 底部按钮原始样式 */
     /********************/
     .bbtn01 {background: url(./image/main_index_home_normal.png) no-repeat center 4px; }
     .bbtn02 {background: url(./image/main_index_tuan_normal.png) no-repeat center 4px; }
     .bbtn03 {background: url(./image/main_index_search_normal.png) no-repeat center 4px; }
     .bbtn04 {background: url(./image/main_index_my_normal.png) no-repeat center 4px; }
     .bottom_btn {width: 99%; height: 43px;padding-top: 18px;background-position-y: 4px; background-size: 30px;  font-size: 12px; color: #A5A5A5;}
     /* 底部按钮激活样式 */
     .activebtn0 {background: url(./image/main_index_home_pressed.png) no-repeat center 4px; }
     .activebtn1 {background: url(./image/main_index_tuan_pressed.png) no-repeat center 4px; }
     .activebtn2 {background: url(./image/main_index_search_pressed.png) no-repeat center 4px; }
     .activebtn3 {background: url(./image/main_index_my_pressed.png) no-repeat center 4px; }
     .activebtn {color:#87cefa; background-size: 30px; }
     .bottomhover {background-color: #46494B;}
     /* 本地刷新图标 */
     #localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}
    </style>
  </head>
  <body>
    <div id="wrap">
      <!-- 第一头部 -->
      <div id="firstHeader" class="titlebar activebar">
        <div class="topbar">
          <div class="citylist fl" id="citylist" tapmode="" onclick="openCitylist()">北京<img src="./image/title_home_arrow_down_normal.png" alt="" class="citylistarrow"></div>
          <div class="search firstSearch"  tapmode="" onclick="openSearch()">
              <img src="./image/ic_home_search.png" alt="">输入课程名
          </div>
          <img src="./image/send_msg.png" alt="" class="fr headerico hr01"  tapmode="" onclick="openNewWindow('message')">
          <!-- <img src="./image/topbar_search.png" alt="" class="fr headerico hr02"  tapmode="headericohover" onclick="openNewWindow('search')"> -->
        </div>
      </div>
      <!-- 第二头部 -->
      <div id="secHeader" class="titlebar">
        <div class="topbar whitebar">
          <div class="citylist fl" id="whitecity"  tapmode="" onclick="openCitylist()">北京<img src="./image/title_arrow_down_normal.png" alt="" class="secCitylistarrow"></div>
          <div class="search secSearch"  tapmode="" onclick="openSearch()">
              <img src="./image/navibar_search_icon_search.png" alt="">搜索订单...
          </div>
          <!-- <img src="./image/local_icon_refresh.png" alt="" class="fr headerico" id="topbar_refresh"   tapmode="headericohover" onclick="emptyopt()">
          <img src="./image/topbar_search.png" alt="" class="fr headerico hr02"  tapmode="headericohover" onclick="openNewWindow('search')"> -->
        </div>
      </div>
      <!-- 第三头部 -->
      <div id="thridHeader" class="titlebar">
        <div class="topbar whitebar">
          <div class="search thrSearch"  tapmode="" onclick="openSearch()">
              <img src="./image/navibar_search_icon_search.png" alt="">查找爱好
          </div>
          <div class="swipe fr" tapmode="headericohover" onclick="openScan()">
              <img src="./image/navibar_icon_qr.png" alt="" class="swipepic">
              <div>扫一扫</div>
          </div>
        </div>
      </div>
      <!-- 第四头部 -->
      <div id="fortheader" class="titlebar">
      </div>
      <div id="main">
      </div>
      <div id="footer">
        <ul>
          <li tapmode="activebtn0 activebtn" onclick="switchframe('first_frame', 0)">
            <a class="bottom_btn bbtn01 weixin activebtn activebtn0">首页</a>
          </li>
          <li tapmode="activebtn1 activebtn" onclick="switchframe('second_frame', 1)">
            <a class="bottom_btn bbtn02 communicate">订单</a>
          </li>
          <li tapmode="activebtn2 activebtn" onclick="switchframe('third_frame', 2)">
            <a class="bottom_btn bbtn03 discover">发现</a>
          </li>
          <li tapmode="activebtn3 activebtn" onclick="switchframe('forth_frame', 3)">
            <a class="bottom_btn bbtn04 home">我的</a>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="./script/api.js"></script>
  <script type="text/javascript">
   var firstHeader = $api.byId('firstHeader');
   var secHeader = $api.byId('secHeader');
   var thirdHeader = $api.byId('thridHeader');
   var fortheader = $api.byId('fortheader');
   var firstHeaderOffset;
   var main = $api.byId('main');
   var mainPos = $api.offset(main);
   var footer = $api.byId('footer');
   var footerPos = $api.offset(footer);
   var gFrameIndex;
   function emptyopt () {}
   function openNewWindow(type)
   {
     api.openWin({
       name: type,
       url: './html/'+type+'.html',
       pageParam: {},
       bounces: false,
       opaque: false
     });
   }
   function openScan()
   {
     // api.openWin({
     //   name: 'scan',
     //   url: './html/scan.html',
     //   bounces: false
     // });
     var obj = api.require('scanner');
      obj.open(function(ret,err) {
          api.alert({
              title: '扫描结果', 
              msg: ret.msg
          });
      });
   }
   function openSearch()
    {
      api.openWin({
      name: 'search',
      url: './html/search.html',
      bounces: false,
      delay:200
      });
    }
    function openCitylist() {
      api.openWin({
        name: 'citylist',
        url: './html/citylist_header.html',
        bounces: false,
        delay:200
      });
    }
   // 随意切换按钮
   function randomSwitchBtn(name, index)
   {
     var lis = $api.domAll('.bottom_btn');
     var i = 0, len = lis.length;
     var curLi = lis[index];
    for(i; i<len; i++){
       var thisLi = lis[i];
       if(thisLi === curLi){
           $api.addCls(thisLi,'activebtn');
           $api.addCls(thisLi,'activebtn'+index);
           continue;
       }else{
           if($api.hasCls(thisLi,'activebtn')){
               $api.removeCls(thisLi,'activebtn');
               $api.removeCls(thisLi,'activebtn'+i);
           }
       }
    }
        // 切换头部
        var lis = $api.domAll('.titlebar');
        var i = 0, len = lis.length;
        var curLi = lis[index];
        for(i; i<len; i++){
            var thisLi = lis[i];
            if(thisLi === curLi){
                $api.addCls(thisLi,'activebar');
                $api.addCls(thisLi,'activebar'+index);
                continue;
            }else{
                if($api.hasCls(thisLi,'activebar')){
                        $api.removeCls(thisLi,'activebar');
                        $api.removeCls(thisLi,'activebar'+i);
                    }
                }
            }
    }
    // 隐藏所有的一级frame
    function hideAllFrame()
    {
        api.setFrameAttr({
            name: 'first_frame',
            hidden:true
        });
        api.setFrameAttr({
            name: 'second_frame',
            hidden:true
        });
        api.setFrameAttr({
            name: 'third_frame',
            hidden:true
        });
        api.setFrameAttr({
            name: 'forth_frame',
            hidden:true
        });
    }
    // 自己修复ios显示frame的时候bug
    // ios自己主动隐藏后，再open就不显示了
    function showgroup(type)
    {
        api.setFrameGroupAttr({
            name: type + 'group',
            hidden:false
        });
    }
    // 展示指定的frame
    function showframe(type)
    {
        api.setFrameAttr({
            name: type,
            hidden:false
        });
    }
    // 打开第一个、第三个frame
    function openframeinstance( frame, marginTop, isBounce)
    {
        api.openFrame ({
            name: frame,
            url: './html/' + frame +'/' + frame + '_body.html',
            rect:{
                x:0,
                y:marginTop,
                w:'auto',
                h:api.frameHeight - marginTop - footerPos.h
            },
            pageParam: {name: 'test'},
            // bounces: isBounce,
            bounces: false,
            vScrollBarEnabled:false,
            hScrollBarEnabled:false,
            delay:200
        });
    }
   // 移动滑动块
   function sliderbarCallback(id, num) {
     // 得到背景元素的宽度
     // var width=parseInt(window.getComputedStyle($api.byId('matchwidth'),null).width);
     var width = parseInt(api.frameWidth / 2);
     // api.alert({msg:width});
     if(num!=0){
       num=width;
     }
     // 移动背景元素的宽度  在index.html不能获得 forth_frame.html上面的dom，虽然是在同一个手机屏幕上
     $api.css($api.byId(id),"-webkit-transform:translate(" + num + "px,0)");
   }
    // ===================================
    // 响应底部按钮的切换frame
    // ===================================
    function switchframe(type, _index)
    {
        if ( _index === gFrameIndex ) {
          return 0;
        } else {
          gFrameIndex = _index;
        }
        switch(type)
        {
            case 'first_frame':
                randomSwitchBtn('first_frame', 0);
                hideAllFrame();
                openframeinstance('first_frame', firstHeaderOffset.h, true);
                // showframe('first_frame');
            break;
            case 'second_frame':
                randomSwitchBtn('second_frame', 1);
                hideAllFrame();
                openframeinstance('second_frame', firstHeaderOffset.h, true);
                // showgroup('hot');
            break;
            case 'third_frame':
                randomSwitchBtn('third_frame', 2);
                hideAllFrame();
                openframeinstance('third_frame', firstHeaderOffset.h, false);
                // showframe('third_frame');
            break;
            case 'forth_frame':
                randomSwitchBtn('forth_frame', 3);
                hideAllFrame();
                openframeinstance('forth_frame', 0, false);
                // showgroup('forth_frame');
            break;
            default:
            break;
        }
    }
    // 完成首页初始化
    apiready = function(){
        // 设置ios7的标题栏字体变亮，全局用一个就行了
        api.setStatusBarStyle({
          style: 'dark'
        });
        firstHeader = $api.byId('firstHeader');
        secHeader = $api.byId('secHeader');
        thirdHeader = $api.byId('thridHeader');
        fortheader = $api.byId('fortheader');
        $api.fixIos7Bar(firstHeader);
        $api.fixIos7Bar(secHeader); 
        $api.fixIos7Bar(thirdHeader);
        $api.fixIos7Bar(fortheader); 
        firstHeaderOffset = $api.offset(firstHeader);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);
        var footer = $api.byId('footer');
        var footerPos = $api.offset(footer);
        gFrameIndex = 0;
        // 第一次进入打开 first_frame body
        api.openFrame ({
            name: 'first_frame',
            url: './html/first_frame/first_frame_body.html',
            rect:{
            x:0,
            y:firstHeaderOffset.h,
            w:'auto',
            h:api.frameHeight-firstHeaderOffset.h -footerPos.h
            },
            bounces: false,
            opaque: false
            // vScrollBarEnabled:false,
            // hScrollBarEnabled:false
        });
    };
  </script>
</html>
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
     /* 头部样式 */
     .topbar {background: #87cefa; height:50px; border-bottom: 1px solid #DDDFE3;}
     .topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
     .hr01, .hr02 {height: 28px;}
     .headerico {padding: 11px 15px 11px 15px;}
     .headericohover {background: #DADDE0;}
     .fr{float: right;}
     .fl{float: left;}
     /*第一头部*/
     #logo {padding: 11px 0 0 10px;height: 28px;}
     #citylist {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px; color: #fff;}
     .citylistarrow {vertical-align: top; width: 20px; padding-top: 15px;}
    .search {height: 34px;line-height: 34px; padding-left: 10px; border-radius: 30px;  margin-top: 8px; position: absolute; left: 20px; right: 60px;font-size: 14px;}
    .search img:first-child {vertical-align: top; width: 20px; padding-top: 7px;padding-right: 10px;}
    .search img:last-child {vertical-align: top; width: 27px; padding-top: 4px;}
    .firstSearch {left: 90px;right: 60px;background-color: #FA6604;color: #FDC29B;}
     /* 第二头部 */
     #topbar_refresh {width: 40px;padding:5px 10px;}
     .whitebar {background-color: #fcfcfc;}
     #whitecity {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px;color: #87cefa;}
    .secCitylistarrow {vertical-align: top; width: 15px; padding-top: 18px;padding-left: 5px;}
    .secSearch {left: 90px;right: 15px;background-color: #E8E8E8;color: #999;}
    /* 第三头部 */
    .swipepic {padding: 5px 15px 2px 15px;height: 23px;}
    .swipe div {font-size: 4px; text-align: center;color: #999;}
    .thrSearch {left: 50px;right: 60px;background-color: #E8E8E8;color: #999;}
     /* 头部切换样式 */
     .activebar {display: block;}
     /* 底部切换按钮样式 */
     ul {display: -webkit-box; display: -webkit-flex; display: flex; }
     #footer {height: 61px; line-height: 60px; background-color: #FAFAFA;border-top: 1px solid #FAFAFA; }
     #footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1; height: 60px;}
     /* 选项卡样式 */
     .scrollbar {display: -webkit-box;display: -webkit-flex; text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
     .col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
     .indexbar {position: absolute;/*background: #0fc;*/width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
     .redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}
     /* 本地刷新图标 */
     #localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}
     #field1::-webkit-input-placeholder { color:#666; }
     #field1 {height: 30px; /*line-height: 30px;*/ width: 70%;}
     .thridHeader .search input::-webkit-input-placeholder {line-height: 30px; }
     .swipe {line-height: 50px;margin-right: 10px;color: #87cefa;}
     .back {float: left; }
     .back img {height: 30px;margin-top: 10px;margin-left: 10px;}
    </style>
  </head>
  <body>
    <div id="wrap">
      <!-- 第三头部 -->
      <div id="thridHeader" class="titlebar">
        <div class="topbar whitebar">
          <div class="back"  tapmode="" onclick="goback()"><img src="../image/ic_back_u.png" alt=""></div>
          <div class="search thrSearch">
              <img src="../image/navibar_search_icon_search.png" alt="">
              <input type="text" class="" id="field1" placeholder="请输入搜索内容">
              <img src="../image/icon_mic_normal.png" alt="" tapmode="" onclick="voiceSearch()">
          </div>
          <div class="swipe fr">
              搜索
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
   function goback () {
      api.closeWin({name:'search'});
    }
    // 完成首页初始化
    apiready = function(){
      var thridHeader = $api.byId('thridHeader');
      $api.fixIos7Bar(thridHeader);
      var thridHeader = $api.offset(thridHeader);
      // var type = api.pageParam.name;
      api.openFrame ({
            name: 'search_body',
            url: './search_body.html',
            rect:{
                x:0,
                y:thridHeader.h,
                w:'auto',
                h:'auto'
            },
            bounces: false,
            delay:200
        });
    };
    function voiceSearch () {
      var obj = api.require('speechRecognizer');
      api.toast({
        msg : "语音识别开始，请说话",
        duration : 1000,
        location : "middle"
      });
      obj.record({
      },function(ret,err){
          if(ret.status){
              // ret.wordStr;
              api.alert({
                title : "识别结果",
                msg : ret.wordStr
              })
              obj.stopRecord();
          }
      });
    }
  </script>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>全部分类</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
  <style>
    html, body {width: 100%;min-height: 100%;background: #f0f0f0;}
    .h80 {height: 80px;}
    .h40 {height: 40px;}
    .h20 {height: 20px;}
      .h10 {height: 10px;background: #f0f0f0;}
    .h1 {height: 1px;margin-left: 15px;background: #f0f0f0;}
    .fr {float: right;}
    .fl {float: left;}
    .hightitem {background-color: #fff;}
    .inwrap {margin: 0 10px;}
    /* 2X2样式 */
    .row {display: -webkit-box;display: -webkit-flex;}
    .col {-webkit-box-flex:1; -webkit-flex:1; flex:1;position: relative;}
    .col img {position: absolute; right: 0; width: 80px; top: 0;}
    .col .matrixcell {display: table-cell;vertical-align: middle; padding-left: 10px;}
    .col .matrixcell .title {margin-bottom: 10px;}
    .matrix {display: table;height: inherit;}
    /* 1. 2X2 */
    .flipcard {height: 30px; line-height: 30px; text-align: center; margin: 5px 5px 3px 5px; color: #000; background-color: #fff; font-size: 14px;}
    .darktitle {height: 40px;line-height: 40px;margin-left: 15px;font-size: 14px;color: #666;}
    /* 2. 三列 */
    .scratch02 .word {margin-top: 10px;margin-left: 10px;}
    .scratch02 .word .title{font-size: 18px;}
    .scratch02 .word .info{font-size: 12px;color: #666;}
    .scratch02 img {position: relative;width: 60px; height: 50px;}
    .showposter {text-align: center;margin-top: 5px;padding-bottom: 10px;}
    /* 列表 */
    .classify {height: 60px;line-height: 60px;background-color: #fff;position: relative;border-bottom: 1px solid #e0e0e0;}
    .classify .sublogo {width: 30px;margin-top: 15px;margin-left: 15px;float: left;}
    .classify .arrow {position: absolute;vertical-align: top;right: 15px;top:20px;height: 20px;}
    .classify .info {line-height: 20px; float: left; height: 60px;margin-left: 10px;}
    .classify .info .title {font-size: 15px; color: #000; margin-top: 10px;}
    .classify .info .subtitle {font-size: 12px; color: #666; margin-top: 5px;}
    .subclass {display: none;}
    .subclass .flipcard {margin:0;}
    .brb {border-right: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;}
    .bb {border-bottom: 1px solid #e0e0e0;}
    .presshover {background-color: #FAFAFA;}
  </style>
</head>
<body>
  <!-- 1 2X2 -->
  <div class="darktitle">热门搜索</div>
  <div class="row inwrap">
    <div class="col flipcard" tapmode="presshover" onclick="openDetail()">铁板烧</div>
    <div class="col flipcard" tapmode="presshover" onclick="openDetail()">麻辣烫</div>
    <div class="col flipcard" tapmode="presshover" onclick="openDetail()">羊蝎子</div>
  </div>
  <div class="row inwrap">
    <div class="col flipcard" tapmode="presshover" onclick="openDetail()">亚运</div>
    <div class="col flipcard" tapmode="presshover" onclick="openDetail()">望京</div>
    <div class="col flipcard" tapmode="presshover" onclick="openDetail()">国贸</div>
  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script>
function openDetail()
{
  api.openWin({
    name: 'tuandetail',
    url: './tuandetail_header.html',
    // delay:200
    bounces: false
  });
}
</script>
</html>

13.答辩PPT展示

喜欢的点赞收藏加关注私信作者沟通交流

【实训项目】精点考研

1.设计摘要

2.设计的模式及产品目标

3.创新与优势

4.可行性分析

5.需求分析

6.设计总体框架

7.详细功能设计

8.详细设计与实现

9.测试与运行

10.项目组成员分工

11.心得体会

12.核心代码

13.答辩PPT展示

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【实训项目】精点考研

1.设计摘要

2.设计的模式及产品目标

3.创新与优势

4.可行性分析

5.需求分析

6.设计总体框架

7.详细功能设计

8.详细设计与实现

9.测试与运行

10.项目组成员分工

11.心得体会

12.核心代码

13.答辩PPT展示

热门文章

最新文章

相关课程

相关电子书

相关实验场景