目 录
1 概述 4
2 需求分析 4
3 高校智慧学习平台WEB界面设计 4
2.1 功能描述 5
2.2 功能结构图 5
2.3界面设计 7
1 概述
高校智慧学习平台主要是为在校学生提供一个开源的专业技术课程的学些平台，该平台主要包括以下模块：
1、注册页面：为新用户提供注册的入口；
2、导航条：主要包括主页、慕课网、图书等子项目；
3、轮播图：展示教学产品和职前规划等内容；
4、阶段成长：主要跟踪学习的过程；
5、资源课程的介绍；
6、联系方式和合作伙伴；
7、注销等功能。
2 需求分析
web界面设计：
首页
登录页
登录页表单验证
主要应用技术：
Html,css.js.Bootstrap等等
3 高校智慧学习平台WEB界面设计
从系统的功能来看，中国高校智能智慧学习平台，主要包含如下功能：该项目主要包括页面设计、页面美化、页面导航等功能.
用户主界面设计：
主界面从整体上分为六大模块，竖直排列从导航条到footer。其中导航条主要包含LOGO，导航栏，下载链接，登录注册链接等；轮播图主要为与内容相关的轮播图片；索引主要为跟踪学习过程的链；课程部分主要为精品课程推荐；拼图部分为与内容相关的图片，文字以及链接；footer主要为合作伙伴以及联系方式。
各模块内部采用图片，文字，链接，按钮等组件合理使用，构成用户主界面。
用户登录界面设计：
主要为form表单（包括select,text,chexbox,password）与图片文字的合理结合使用，构成用户的登录界面，整体上采用flex布局的方式，将组件合理的布置于界面上。
2.1 功能描述
主界面功能描述：
能够合理运用html,css,js,bootstracp对界面合理布局，使界面美观，各组件布置合理。
导航条部分，要求布局合理，合理使用字体图标，点击登陆时，进入用户登录界面。
轮播图部分，要求实现轮播图。
索引部分，课程部分部分，要求布局合理。
拼图部分，要求布局合理，正确使用字体图标以及链接，图片大小适中。
footer部分，要求布局合理，实现联系方式链接的图标显示。
登录界面功能描述：
首先要求合理布局，使界面看起来美观。
要求对于用户的账号密码输入：
1）能够判断用户手机号是否为空
2）能够判断用户手机号输入是否合法（满足位数要求，满足各位置的数字要求）
3）能够判断用户密码输入是否为空
当用户输入完毕，本文转载自http://www.biyezuopin.vip/onews.asp?id=15215点击登陆进行提交后，能够对于输入进行相应的判断，若手机号输入为空，则提示用户名为空，若手机号输入不合法，提示用户名不合法，若密码为空，则提示密码输入为空。
<template>
<div id="app">
<div class="nav-top">
<nav_top></nav_top>
</div>
<div class="body">
<carousel></carousel>
<indexes></indexes>
<classes></classes>
<puzzles></puzzles>
</div>
<content_footer></content_footer>
</div>
</template>
<script>
import nav_top from './navbar.vue';
import content_footer from './content_footer.vue';
import carousel from './carousel.vue';
import indexes from './indexes.vue'
import classes from './classes.vue';
import puzzles from './puzzles.vue';
export default
{
data: function ()
{
return {
};
},
components:
{
nav_top: nav_top,
content_footer: content_footer,
carousel: carousel,
indexes: indexes,
classes: classes,
puzzles: puzzles,
},
computed:
{
},
methods:
{
},
mounted: function()
{
}
}
</script>
<style scoped>
#app
{
width: 100%;
min-height: 100%;
display: flex;
/*主轴的方向*/
flex-direction: column;
/*如果一条轴线排不下，如何换行*/
flex-wrap: nowrap;
/*flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap*/
flex-flow: column nowrap;
/*项目在主轴上的对齐方式*/
justify-content: space-between;
/*定义项目在交叉轴上如何对齐*/
align-items: stretch;
/*定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
align-content: stretch;
/*float: none;*/
/*clear: none;*/
/*vertical-align: inherit;*/
}
.nav-top
{
width: 100%;
/*定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
order: 0;
/*定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。*/
flex-grow: 0;
/*项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
flex-shrink: 0;
/*定义了在分配多余空间之前，项目占据的主轴空间*/
flex-basis: auto;
/*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto*/
flex: 0 0 auto;
/*属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性*/
align-self: flex-start;
background-color: black;
color: white;
}
.body
{
flex-grow: 1;
/*display: flex;*/
}
.nav-side
{
flex-grow: 0;
background-color: cornflowerblue;
max-width: 200px;
}
.content-main
{
flex-grow: 1;
background-color: darkgrey;
}
footer
{
flex-grow: 0;
}
</style>
<style>
html,
body
{
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
