Skip to content

GitLab

Commit 9b3f887d authored by zhaoxingyu's avatar zhaoxingyu
Browse files

remake homepage

parent bb0694d1
dev campus-com classroom2022 thtf-logo
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 104 additions and 649 deletions
+104 -649
css/homePage.css
View file @ 9b3f887d
......@@ -52,17 +52,17 @@ ul {
[v-cloak] {
display: none;
}
#app{
background: no-repeat url("../img/homepage/background.png");
/* #app{
width:100%;
height:100%;
background-size:100% 100%;
position:relative;
}
position: absolute;;
} */
.header {
background-color: rgba(1, 85, 131, 0.9);
width: 100%;
height:125px;
height:200px;
}
.banxin {
......@@ -283,614 +283,78 @@ ul {
/*color: rgba(191,244,255,1) !important;*/
/*}*/
.body{
background: no-repeat url("../img/homepage/homepage_background.png");
width: 100%;
height: 790px;
}
.body .main{
margin-left: 5%;
margin-right:5%;
height: 750px;
border:2px solid rgba(0,105,196,1);
}
.body .left{
float: left;
width:60%;
height:670px;
border:2px solid rgba(0,105,196,1);
margin-left: 40px;
margin-top: 40px;
}
.body .right{
float: left;
width: 32%;
height:670px;
border:2px solid rgba(0,105,196,1);
margin-left: 40px;
margin-top: 40px;
}
.body .left .inner{
text-align: center;
height: 30%;
float: left;
width: 33.33%;
height: 873px;
background-size: 100% 100%;
padding: 5%;
box-sizing: border-box;
}
.body .right .inner{
text-align: center;
height: 30%;
float: left;
width: 50%;
box-sizing: border-box;
}
.body .right .inner-bottom{
text-align: center;
height: 10%;
float: left;
width: 100%;
box-sizing: border-box;
font-size: 25px;
}
.body .inner img:hover{
transform: scale(1.2);
}
.body img{
width: 150px;
height: 150px;
margin-top: 30px;
}
.body .title{
font-size:17px;
font-family:MicrosoftYaHei;
font-weight:500;
color:rgba(8,240,255,1);
line-height:55px;
}
.lunboDiv {
width: 100%;
}
.content {
overflow: hidden;
}
.content .conTop {
margin-top: 20px;
padding-bottom: 45px;
}
.notice {
width: 480px;
}
.banxin .headtitle {
height: 56px;
font-size: 30px;
line-height: 56px;
width: 480px;
}
.banxin .icon {
width: 80px;
height: 4px;
background-color: #348BF8;
display: block;
}
.image-news {
margin-left: 40px;
width: 660px;
}
.image-news .item {
width: 320px;
height: 345px;
border: 1px solid rgba(206, 212, 224, 1);
margin-left: 20px;
box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(206, 212, 224, 0.5);
cursor: pointer;
}
.image-news .item:hover {
border: 1px solid #348BF8;
}
.image-news .item:hover .title>div {
color: #348BF8;
}
.image-news .item:first-child {
margin: 0;
}
.image-news .item .title {
height: 28px;
line-height: 28px;
margin-top: 16px;
}
.image-news .item .yellow-icon {
height: 28px;
width: 8px;
background-color: #F5AF38;
display: block;
float: left;
margin-right: 10px;
}
.image-news .item .title>div {
width: 300px;
color: #666;
font-size: 18px;
}
.image-news .item .desc {
height: 48px;
line-height: 24px;
overflow: hidden;
padding: 0 16px;
color: #999;
}
.app-list {
background-color: #f5f7fe;
padding: 40px 0 60px;
}
.app-list .headtitle,
.school-info .headtitle,
.useGuide .headtitle {
height: 56px;
font-size: 30px;
line-height: 56px;
margin: auto;
text-align: center;
}
.app-list .icon,
.school-info .icon,
.useGuide .icon {
width: 80px;
height: 4px;
background-color: #348BF8;
display: block;
margin: auto;
}
.app-list .desc,
.school-info .desc {
text-align: center;
margin-top: 10px;
color: #999;
}
.app-list .content {
width: 1180px;
margin: 50px auto 0;
}
.app-list .content .item {
margin-left: 20px;
height: 360px;
width: 280px;
box-sizing: border-box;
float: left;
border: 1px solid rgba(206, 212, 224, 1);
background-color: #fff;
cursor: pointer;
box-shadow: 0px 2px 8px 0px rgba(206, 212, 224, 0.5);
}
.app-list .content .item:first-child {
margin: 0;
}
.app-list .content .item:hover {
border: 1px solid #348BF8;
}
.app-list .content .item:hover .name {
color: #348BF8;
}
.app-list .item .app-img {
width: 96px;
height: 96px;
margin: 30px auto 0;
display: block;
}
.app-list .item .name {
width: 224px;
margin: 38px auto 0;
text-align: center;
height: 28px;
font-size: 20px;
font-weight: 500;
color: #666;
line-height: 28px;
}
.app-list .item .vendor {
height: 22px;
line-height: 22px;
width: 224px;
text-align: center;
color: #999;
margin: 10px auto 0;
font-size: 16px;
}
.app-list .item .intro {
color: #999;
height: 22px;
line-height: 22px;
font-size: 16px;
width: 224px;
margin: 20px auto 0;
text-align: center;
}
.app-list .item .star {
text-align: center;
margin-top: 10px;
}
.app-list .item .fa-star {
color: #FFBD03;
margin-left: 5px;
}
.app-list .item .link {
text-align: center;
color: #348BF8;
text-decoration: underline;
font-size: 16px;
margin-top: 28px;
}
.banner {
width: 1920px;
.carousel-inner .item>img {
margin: 0 auto;
display: block;
}
.school-info {
padding-top: 50px;
}
.school-info #chart {
margin: auto;
}
.school-info #chart>div {
cursor: default !important;
}
.tltleDiv {
height: 60px;
background-color: #F0F8FF;
position: relative;
margin-bottom: 21px;
}
.tltleDiv .newNoticeTitleImg {
position: absolute;
left: 0;
bottom: 0;
}
.tltleDiv .seeMoreButtonImg {
position: absolute;
.cursorPointer {
cursor: pointer;
right: 0;
top: 12px;
}
.content .conTop .conContent {
margin-top: 21px;
width: 480px;
}
.content .conTop .conContent .rightContent {
margin-top: 20px;
padding: 22px 20px 20px;
height: 345px;
width: 480px;
border: 1px solid rgba(206, 212, 224, 1);
.main{
width: 75%;
height: 90%;
margin: 0 auto;
box-sizing: border-box;
}
.content .conTop .conContent .rightContent .title {
width: 310px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
font-size: 18px;
color: #333;
}
.content .conTop .conContent .rightContent .long-title {
width: 440px;
display: block;
}
.content .conTop .conContent .rightContent>.title:hover {
color: #348BF8;
font-weight: 600;
}
.content .conTop .conContent .rightContent .content {
font-size: 14px;
line-height: 22px;
height: 66px;
overflow: hidden;
color: #999;
}
.content .conTop .conContent .rightContent ul li .title {
font-size: 18px;
color: #333
}
.content .conTop .conContent .rightContent ul li>div {
cursor: pointer;
line-height: 40px;
height: 40px;
}
.content .conTop .conContent .rightContent ul li:hover .title {
color: #348BF8;
font-weight: 600;
}
.content .conTop .conContent .rightContent ul li .date {
font-size: 16px;
color: #BBBBBB;
}
.content .conBottm {
padding-bottom: 20px;
}
.content .conBottm .content ul {
.main .row{
height: 31%;
width: 100%;
}
.content .conBottm .content li {
float: left;
width: 12.5%;
text-align: center;
cursor: pointer;
padding-bottom: 10px;
}
.content .conBottm .content li:hover {
background: rgba(52, 139, 248, 0.1);
color: #348BF8;
}
.content .conBottm .content li .box {
width: 128px;
height: 128px;
margin: 10px auto 20px;
margin-bottom:1%;
margin-left: 0;
position: relative;
}
.content .conBottm .content li img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 128px;
max-height: 128px;
display: block;
margin: auto;
}
.content .conBottm .content .app-name {
max-width: 212px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resource {
background-color: #F2F2F3;
overflow: hidden;
padding: 30px 0;
}
.resource .banxin {
width: 1136px;
margin: 0 auto;
}
.resource .title {
height: 60px;
background-color: #348BF8;
line-height: 60px;
border-radius: 15px 15px 0 0;
}
.resource .title span {
color: #fff;
font-size: 22px;
margin-left: 48px;
}
.resource .list {
background-color: #fff;
padding: 10px 20px 20px;
border-radius: 0 0 15px 15px;
border: 1px solid #D8D8D8;
}
.resource .list>.item {
margin-top: 20px;
}
.resource .list ul {
line-height: 40px;
width: 960px;
.main .row .col1{
float: left;
height: 100%;
width: 23.1%;
margin-right: 0.8%;
}
.resource .list ul li {
.main .row .col2{
float: left;
height: 40px;
line-height: 40px;
margin: 0 20px;
text-align: center;
}
.resource .list ul li.subject:hover {
color: #348BF8;
cursor: pointer;
}
.listActive {
color: #348BF8;
/* margin-bottom: 5px; */
transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
/* IE 9 */
-webkit-transform: translate(0, -10px);
/* Safari and Chrome */
-o-transform: translate(0, -10px);
/* Opera */
-moz-transform: translate(0, -10px);
}
.resource .list ul .first {
width: 134px;
height: 40px;
background-color: #F5AF38;
border-radius: 25px;
color: #fff;
height: 100%;
width: 16.5%;
margin-right: 0.8%;
}
.resource .list .head {
width: 134px;
height: 40px;
line-height: 40px;
background-color: #F5AF38;
border-radius: 25px;
text-align: center;
.main .row .col3{
float: left;
color: #fff;
}
/* 使用指南 */
.useGuide {
overflow: hidden;
padding: 50px 0 120px;
background-color: #f5f7fe;
height: 100%;
width: 19.8%;
margin-right: 0.8%;
}
.useGuide .imgList {
width: 1200px;
margin: 40px auto 0;
}
.useGuide .imgList ul li {
.main .row .col4{
float: left;
width: 25%;
text-align: center;
position: relative;
}
.useGuide .imgList ul li img,
.useGuide .imgList ul li div {
cursor: pointer;
}
.useGuide .imgList ul li img:hover+div,
.useGuide .imgList ul li div:hover {
background-color: #F5AF38;
}
.useGuide .imgList ul li .useGuideImgText {
position: absolute;
bottom: 0;
left: 17px;
height: 35px;
line-height: 35px;
width: 265px;
text-align: center;
z-index: 100;
color: #fff;
}
.activeImgText {
background-color: #F5AF38;
height: 100%;
width: 21%;
margin-right: 0.8%;
}
.noActiveImgText {
background-color: #333;
opacity: 50%;
.main .row .col5{
float: left;
height: 100%;
width: 14.8%;
margin-right: 0.8%;
}
.footer {
height: 200px;
width: 100%;
.main .row .cols div{
color: white;
font-size: 20px;
text-align: center;
background-color: #2A3337;
color: #696B6C;
font-size: 14px;
overflow: hidden;
}
.footer span {
height: 32px;
display: block;
}
.footer .firstSpan {
margin-top: 67px;
}
.footer .secondSpan {
margin-top:
}
/* 轮播图的一些设置 */
.carousel-control {
width: 67px;
height: 67px;
transform: translateY(-50%);
top: 50%;
margin-top: 0;
border: 0;
border-radius: 50%;
background: none;
}
.carousel-indicators {
right: 50%;
top: 100%;
transform: translateY(-30px);
}
.carousel-indicators li {
margin-left: 20px;
}
.ml-27 {
margin-left: 27px;
position: relative;
top: 30%;
}
.carousel-inner .item>img {
.main .row .cols img{
height: 44%;
margin: 0 auto;
}
.cursorPointer {
cursor: pointer;
display: block;
border-style: none;
position: relative;
top: 15%;
}
\ No newline at end of file
homePage/index.html
View file @ 9b3f887d
......@@ -54,73 +54,64 @@
</div>
</div>
<div class="body">
<div class=main>
<div class="left">
<div class="inner" @click="toSystem()">
<img src="../img/homepage/multi_media.png">
<div class="title">多媒体控制系统</div>
</div>
<div class="inner">
<img src="../img/homepage/cloud_system.png">
<div class="title">云录播系统</div>
</div>
<div class="inner">
<img src="../img/homepage/auto_system.png">
<div class="title">全自动录播系统</div>
</div>
<div class="inner">
<img src="../img/homepage/online_watch.png">
<div class="title">在线巡课</div>
</div>
<div class="inner">
<img src="../img/homepage/streaming.png">
<div class="title">直播课堂</div>
</div>
<div class="inner">
<img src="../img/homepage/interact_course.png">
<div class="title">交互课堂</div>
</div>
<div class="inner">
<img src="../img/homepage/online_coursing.png">
<div class="title">在线晒课</div>
</div>
<div class="inner">
</div>
<div class="inner">
<div class="main">
<div class="row">
<div class="col1 cols" style="background-color: rgba(107, 178, 70, 0.8)">
<img src="../img/homepage/icon1.png">
<div>多媒体控制系统</div>
</div>
<div class="col1 cols" style="background-color: rgba(107, 178, 70, 0.8)">
<img src="../img/homepage/icon2.png">
<div>多媒体运维系统</div></div>
<div class="col2 cols" style="background-color:rgba(191, 63, 23, 0.8)">
<img src="../img/homepage/icon3.png">
<div>常态化录播</div></div>
<div class="col2 cols" style="background-color:rgba(29, 86, 129, 0.8)">
<img src="../img/homepage/icon4.png">
<div>远程导播系统</div></div>
<div class="col2 cols" style="background-color:rgba(29, 86, 129, 0.8)">
<img src="../img/homepage/icon5.png">
<div>资源管理</div></div>
</div>
<div class="right container">
<div class="inner">
<img src="../img/homepage/teaching_assessment.png">
<div class="title">教学实时评估</div>
</div>
<div class="inner">
<img src="../img/homepage/teach_replay.png">
<div class="title">教学回看评估</div>
</div>
<div class="inner">
<img src="../img/homepage/teach_statistic.png">
<div class="title">教学实时统计</div>
</div>
<div class="inner">
<img src="../img/homepage/teach_analysis.png">
<div class="title">教学行为分析</div>
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner-bottom title">
教学质量观摩与评价
</div>
<div class="row">
<div class="col2 cols" style="background-color:rgba(29, 86, 129, 0.8)">
<img src="../img/homepage/icon6.png">
<div>媒体发布系统</div></div>
<div class="col2 cols" style="background-color:rgba(29, 86, 129, 0.8)">
<img src="../img/homepage/icon7.png">
<div>电子课表</div></div>
<div class="col1 cols" style="background-color:rgba(247, 171, 4, 0.8)">
<img src="../img/homepage/icon8.png">
<div>网络巡视</div></div>
<div class="col3 cols" style="background-color:rgba(191, 63, 23, 0.8)">
<img src="../img/homepage/icon9.png">
<div>远程互动系统</div></div>
<div class="col3 cols" style="background-color:rgba(29, 86, 129, 0.8)">
<img src="../img/homepage/icon10.png">
<div>教学督导和评课</div></div>
</div>
<div class="row">
<div class="col4 cols" style="background-color:rgba(29, 86, 129, 0.8)">
<img src="../img/homepage/icon11.png">
<div>智慧环境控制系统</div></div>
<div class="col5 cols" style="background-color:rgba(247, 171, 4, 0.8)">
<img src="../img/homepage/icon12.png">
<div>学情分析</div></div>
<div class="col5 cols" style="background-color:rgba(191, 63, 23, 0.8)">
<img src="../img/homepage/icon13.png">
<div>智慧班牌</div></div>
<div class="col5 cols" style="background-color:rgba(247, 171, 4, 0.8)">
<img src="../img/homepage/icon14.png">
<div>人脸考勤</div></div>
<div class="col5 cols" style="background-color:rgba(247, 171, 4, 0.8)">
<img src="../img/homepage/icon15.png">
<div>在线晒课</div></div>
<div class="col5 cols" style="background-color:rgba(191, 63, 23, 0.8)">
<img src="../img/homepage/icon16.png">
<div>系统管理</div></div>
</div>
</div>
</div>
<!-- 底部 -->
<!--<div class="footer">-->
<!--<span class="firstSpan">Copyright©️ tongfangpc.com.All right reserved 技术运营支持：同方计算机有限公司 </span>-->
<!--<span class="secondSpan">客户服务热线：400-000-111 京ICP备1800000号</span>-->
<!--</div>-->
</div>
</body>
......
img/Rectangle 2 Copy.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 2 Copy.png

175 Bytes

img/Rectangle 2 Copy1.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 2 Copy1.png

175 Bytes

img/Rectangle 2 Copy1@2x.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 2 Copy1@2x.png

340 Bytes

img/Rectangle 2 Copy2.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 2 Copy2.png

175 Bytes

img/Rectangle 2 Copy2@2x.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 2 Copy2@2x.png

340 Bytes

img/Rectangle 2 Copy@2x.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 2 Copy@2x.png

340 Bytes

img/Rectangle 2.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 2.png

176 Bytes

img/Rectangle 21.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 21.png

589 Bytes

img/Rectangle 21@2x.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 21@2x.png

1.36 KB

img/Rectangle 22.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 22.png

176 Bytes

img/Rectangle 22@2x.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 22@2x.png

324 Bytes

img/Rectangle 2@2x.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 2@2x.png

324 Bytes

img/Rectangle 9.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 9.png

581 Bytes

img/Rectangle 9@2x.png deleted 100755 → 0
View file @ bb0694d1
img/Rectangle 9@2x.png

1.36 KB

img/homepage/background.png deleted 100644 → 0
View file @ bb0694d1
img/homepage/background.png

1.56 MB

img/homepage/homepage_background.png 0 → 100644
View file @ 9b3f887d
This image diff could not be displayed because it is too large. You can view the blob instead.
img/homepage/icon1.png 0 → 100644
View file @ 9b3f887d
img/homepage/icon1.png

9.31 KB

img/homepage/icon10.png 0 → 100644
View file @ 9b3f887d
img/homepage/icon10.png

3.88 KB

Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment