欢迎您的到来!     
注册用户 [请登录]      新用户 [免费注册]     
网站首页 电子教程 视频教程 在线题库 毕业设计作品 疑难解答 毕设文档
分类
毕业设计
毕设相关资料  
移动开发
WEBAPP   微信小程序  
数据库
SQL   MySQL  
后端开发
ASP   PHP   JSP   NET   Python  
前端JS
JavaScript   jQuery   Vue.js   React.JS   AngularJS  
前端界面
HTML   CSS   Bootstrap  
毕业设计
小程序毕设   Java毕设   PHP毕设  
 文章详情:微信小程序在线教育、视频点播在线视频学习系统 毕业设计(1)首页

【套餐】小程序在线教育、视频点播系统 毕业设计

源代码下载地址:https://ke.qq.com/course/package/28464?tuin=2b10d56

有需要的请添加QQ 45157718(微信同号) 咨询

image.pngimage.png


wxml代码

<view>
    <!--广告图片 mode="widthFix" 设定高度随宽度自动变化-->
    <image class="ad01" src="/img/1.png" mode="widthFix"></image>
</view>
<view class="chaxun">
    <input  class="chaxun_zuo" type="text" name="cx_neirong" value="{{cx_neirong}}" placeholder="请输入关键字"></input>
    <button  class="chaxun_you" type="mini" form-type="submit" >查询</button>
</view>
<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">最新资讯</view>
    <navigator class="qukuai_you" url="/pages/xinxi/list?cs_lxid=241&mc=资讯中心">所有>></navigator>
</view>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 八月份上架新试题目录通知</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 用户微信直接登录功能开通</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator url='/' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>06-19 关于违规会员处理的通知</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
</navigator>
<navigator class="fenlei"  url="/pages/shu/fenlei" open-type="switchTab">视 频 分 类</navigator>
<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">最新更新课程</view>
    <view class="qukuai_you">所有课程</view>
</view>
<view class="zuixin">
    <view  class="zuixin_kecheng">
        <navigator class="zuixin_kecheng_fengmian" url="/pages/shipin/xiangqing">
            <image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="http://www.hzyaoyi.cn/ke/01-HTML%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A.png"></image>
        </navigator>
        <view class="zuixin_kecheng_biaoti">HTML入门到精通</view>
        <view class="zuixin_kecheng_xinxi">
            <view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view>
            <view class="zuixin_kecheng_xinxi_you">免费</view>
        </view>
    </view>
    <view  class="zuixin_kecheng">
        <navigator class="zuixin_kecheng_fengmian" url="/pages/shipin/xiangqing">
            <image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="http://www.hzyaoyi.cn/ke/02-CSS%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A%E5%AE%9E%E6%88%98.png"></image>
        </navigator>
        <view class="zuixin_kecheng_biaoti">HTML入门到精通</view>
        <view class="zuixin_kecheng_xinxi">
            <view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view>
            <view class="zuixin_kecheng_xinxi_you">免费</view>
        </view>
    </view>
    <view  class="zuixin_kecheng">
        <navigator class="zuixin_kecheng_fengmian" url="/pages/shipin/xiangqing">
            <image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="http://www.hzyaoyi.cn/ke/12-JavaScript%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A.png"></image>
        </navigator>
        <view class="zuixin_kecheng_biaoti">HTML入门到精通</view>
        <view class="zuixin_kecheng_xinxi">
            <view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view>
            <view class="zuixin_kecheng_xinxi_you">免费</view>
        </view>
    </view>        
    <view  class="zuixin_kecheng">
        <navigator class="zuixin_kecheng_fengmian" url="/pages/shipin/xiangqing">
            <image class="zuixin_kecheng_fengmian_img" mode="widthFix" src="http://www.hzyaoyi.cn/ke/05-Flex%20Box%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E4%B8%93%E9%A2%98(%E7%BD%91%E9%A1%B5%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BE%AE%E4%BF%A1%E7%AD%89).png"></image>
        </navigator>
        <view class="zuixin_kecheng_biaoti">HTML入门到精通</view>
        <view class="zuixin_kecheng_xinxi">
            <view class="zuixin_kecheng_xinxi_zuo">3651 人报名</view>
            <view class="zuixin_kecheng_xinxi_you">免费</view>
        </view>
    </view>        
</view>



wxss代码

/* 广告图片*/
.ad01{ 
    width: 100%; /* 宽度100%*/
}
.qukuai{display: flex;align-items:center;background-color: #f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;}
.qukuai_you{font-size: 14px; color: gray;padding-right: 10px;}
.xinxi {
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
    color: gray;
  }
  .xinxi-icon {
    width: 19px;
    height: 19px;
  }
  
  .xinxi-text {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .xinxi-arrow {
    width: 13px;
    height: 13px;
  }
.chaxun{
    background-color:#f2f2f2;
    display: flex;
    margin: 10px;
    align-items: center;
}
.chaxun_zuo{
    padding-left: 15px;
    flex-grow: 1;
}
.chaxun_you{
    border-radius: 0px;
    background-color: orange;
    color: white;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.fenlei{ background-color: orangered;text-align: center;padding: 7px; color: white; margin: 5px; border-radius: 5px;}
.zuixin{ padding: 2px;display: flex; flex-wrap: wrap;}
.zuixin_kecheng{
    width: 48%;
    margin: 3px;
    padding: 3px;
    box-sizing: border-box;
    border:1px solid #f2f2f2;
    box-shadow: 1px 1px 2px gainsboro;
    color: gray;
}
.zuixin_kecheng_fengmian{
    width: 100%;
}
.zuixin_kecheng_fengmian_img{
    width: 100%;
}
.zuixin_kecheng_biaoti{
    font-size: 14px; 
}
.zuixin_kecheng_xinxi{
    display: flex;
    align-items: center;
}
.zuixin_kecheng_xinxi_zuo{
    font-size: 12px;
    flex-grow: 1;
}
.zuixin_kecheng_xinxi_you{
    color: red;
    font-size: 14px;
}



有需要的请添加QQ 45157718(微信同号) 咨询


上一篇: 微信小程序在线考试系统 刷题小程序 毕业设计(10) 用户信息 下一篇: 微信小程序电影、在线教育、视频点播在线视频学习系统 毕业设计(2)视频分类


第一步:学习免费电子文档;   第二步:在线测试考试;   第三步:选择收费视频学习;   第四步:学习技术文章和疑难解答.
友情链接: 微信小程序中文网  |   计算机毕业设计作品网  |   洪荒毕业设计网  |   小白教程网  |   毕业设计资料网  |  
浙ICP备18013434号-3 Copyright ©2020 小白教程网 www.2d5.net (QQ交流群:147415688). Technical support/技术支持:杭州摇亿网络科技