课程主页demo测试

其他 2018-06-30 09:21:28 阅读次数: 0 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>course010</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/gb.css">
    <style>
        .container{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            box-sizing: border-box;
            padding: 0 15px;
            overflow: scroll;
        }
        .container .teacher-intro{
            width: 100%;
            margin-bottom: 15px;
            border: 1px solid #E9E9E9;border-radius: 4px;box-shadow: 0px 0px 5px #929292;}
        .container .teacher-title p{
            padding-left: 16px;
            height:60px;
            font-size: 18px;
            line-height: 60px;
            font-weight: 700;
        }
        .teacher-title{
            position: relative;
        }
        .container .teacher-title .item{
            position: absolute;
            top: 18px;
            left: -1px;
            width: 5px;
            height: 25px;
            background: #E9CE98;
        }
        .container .teacher-title::after{
            content: "";
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            border-bottom: 1px solid #EFEFEF;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
        .teacher-intro .teacher-info{padding: 10px 0 0 4.2%;}
        .teacher-intro .teacher-info .avatar{height:60px;display: flex;margin-top: 9px;}
        .teacher-intro .avatar .head-img{height:60px;width: 60px;border-radius: 50%;
            background-image: url("img/card_head.png");background-size: 60px;}
        .teacher-intro .avatar .uname{margin-left: 14px;
            padding-top: 6px;}
        .teacher-intro .avatar .uname p{
            line-height: 20px;
            font-weight:700;
        }
        .teacher-info .item-container{
            padding-top: 21px;
        }
        .teacher-info .item-container .item-list{
            height: 14px;
            line-height: 14px;
            margin-bottom: 27px;
        }
        .teacher-info .item-container .circle{
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 14px;
            border-radius: 50%;
            background: #E9CE98;
        }
        .teacher-intro .teacher-suggest{
            padding: 0 0 18px 16px;
        }
        .teacher-info .item-container .item-list-suggest{
            position: relative;
            width: 100%;
            margin-bottom: 24px;
        }
        .pos-circle{
            position: absolute;
            top: 5px;
        }
        .item-list-suggest .font-con{
            width: 85%;
            margin-left: 5%;
        }
        .course-con .course-title{
            position: relative;
            height: 31px;
            font-size: 16px;
            background: #E9CE98;
            font-weight: bold;
            padding-left: 40px;
            line-height:31px;
        }
        .course-con .course-title img{
            position: absolute;
            left: 5px;
            top: 6px;
            width: 26px;
            height: 22px;
        }
        .course-con .answer{
            box-sizing: border-box;
            height: 32px;
            line-height: 32px;
            padding:0 0 0 40px;
            background: #FEFAF0;
        }
        .course-con .course-item{
            position: relative;
            margin-top: 10px;
            padding-left: 40px;
            height: 30px;
        }
        .course-con .course-item .pos-circle{
            position: absolute;
            left: 16px;
            top: 5px;
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 14px;
            border-radius: 50%;
            background: #E9CE98;
        }
        .obtain-container{
            padding: 9px 0 3px 0;

        }
        .obtain-container .obtain-item{
            margin: 0 auto;
            box-sizing: border-box;
            height: 112px;
            width: 95%;
            line-height: 25px;
            padding: 33px 0 0 9px;
            background: pink;
            border-radius: 5px;
            margin-bottom: 6px;
            background-size:cover;
            background-position: bottom center;
            background-repeat:no-repeat ;
        }
        .people-container{
            padding: 0 0 0 16px;
        }
        .people-container .people-item{display: flex;
            margin-top: 24px;position: relative;}
        .people-container .pl img{
            width: 53px;
            height: 53px;
            margin-right: 20px;
            border-radius: 50%
        }
        .people-container .people-item .pr{
            width: 72%;
        }
        .people-container .pr .name .uname{
            font-size: 18px;
            font-weight: bold;
        }
        .people-container .pr .name .uname-center{
            font-size: 18px;
            font-weight: bold;
            line-height: 53px;
        }
        .people-container .pr .name .university{margin-top: 8px; font-weight: bold;}
        .people-container .pr .details{margin-top: 16px;
            padding-bottom: 30px;
        }
        .people-container .people-item ::after{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 78%;
            content: "";
            border-bottom: 1px solid #F0F0F0;
        }
        .people-container .people-item:last-child ::after{display: none}
    </style>
    <script src="js/data.js"></script>
    <script src="js/dom.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div class="container" id="app">
    <!--讲师介绍-->
    <div class="teacher-intro">
        <div class="teacher-title">
            <p>讲师介绍</p>
            <div class="item"></div>
        </div>
        <div class="teacher-info teacher-suggest" >
            <div class="avatar">
                <div class="head-img"></div>
                <div class="uname">
                    <p>{{data.teacher_intro.name}}</p>
                    <p>{{data.teacher_intro.position}}</p>
                </div>
            </div>
            <div class="item-container" >
                <div class=" item-list-suggest" v-for="list in data.teacher_intro.person_list">
                    <span class="circle pos-circle"></span>
                    <div class="font-con">{{list}}</div>
                </div>
            </div>
        </div>
    </div>
    <!--推荐语-->
    <div class="teacher-intro">
        <div class="teacher-title">
            <p>推荐语</p>
            <div class="item"></div>
        </div>
        <div class="teacher-info teacher-suggest">
            <div class="item-container">
                <div class=" item-list-suggest" v-for="item in data.recommend_list">
                    <span class="circle pos-circle"></span>
                    <div class="font-con">{{item}}</div>
                </div>
            </div>
        </div>
    </div>
    <!--课程大纲-->
    <div class="course-outline teacher-intro" >
        <div class="teacher-title">
            <p>课程大纲</p>
            <div class="item"></div>
        </div>
        <div class="course-con" v-for="item in data.outline">
            <div class="course-title">
                {{item.course_title}}
                <img :src="item.url" alt="">
            </div>
            <div class="answer">{{item.answer}}</div>
            <div class="course-item" v-for="courseItem in item.list">
                <span class="pos-circle"></span>
                <div class="font-con">{{courseItem}}</div>
            </div>
        </div>

    </div>
    <!--适用人群-->
    <div class="teacher-intro">
        <div class="teacher-title">
            <p>适用人群</p>
            <div class="item"></div>
        </div>
        <div class="teacher-info teacher-suggest">
            <div class="item-container">
                <div class=" item-list-suggest" v-for="item in data.fit_list">
                    <span class="circle pos-circle"></span>
                    <div class="font-con">{{item}}</div>
                </div>
            </div>
        </div>
    </div>
    <!--你将获得-->
    <div class="teacher-intro">
        <div class="teacher-title">
            <p>你将获得</p>
            <div class="item"></div>
        </div>
        <div class="obtain-container" v-for="item in data.obtain_list">
            <div class="obtain-item" :style="{backgroundImage: 'url(' + item.url + ')'}">
                {{item.text}}
            </div>
        </div>
    </div>
    <!--人气反馈-->
    <div class="teacher-intro">
        <div class="teacher-title">
            <p>人气反馈</p>
            <div class="item"></div>
        </div>
        <div class="people-container">
            <div class="people-item" v-for="item in data.comment_list">
                <div class="pl">
                    <img src="img/default.png" alt="" v-if="item.url==='' ">
                    <img :src="item.url" alt="" v-else>

                </div>
                <div class="pr">
                    <div class="name">
                        <div class="uname uname-center">{{item.name}}</div>
                    </div>
                    <div class="details">{{item.text}}</div>

                </div>

            </div>

        </div>
    </div>
    <!--服务说明-->
    <div class="teacher-intro">
        <div class="teacher-title">
            <p>服务说明</p>
            <div class="item"></div>
        </div>
        <div class="teacher-info teacher-suggest">
            <div class="item-container">
                <div class=" item-list-suggest" v-for="item in data.explain_list">
                    <span class="circle pos-circle"></span>
                    <div class="font-con">{{item}}</div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>

  var app = new Vue({
    el: '#app',
    data(){
      return {
        data:{
          teacher_intro:{
            name:"邵一鸣",
            position:"简快身心积极疗法授课导师",
            person_list: ["NLP专业执行师&执行师导师","国际培训与教学技术学院高级讲师","国家二级心理咨询师"],
          },


          recommend_list:["现如今，我们的工作和生活节奏越来越快。","双重压力让我们疲惫不堪，难以轻安喜乐。","如何管理我们的情绪，平衡生活与工作呢？","EFT八点法教你找准角色定位，学会管理情绪！"],
          outline:[
            {
              course_title:"真正地认知情绪",
              url:"img/[email protected]",
              answer:"教你如何正确认知情绪",
              list:["你快乐吗","你是“高情商”吗","负面情绪背后的意义是什么"]
            },
            {
              course_title:"有效地管理情绪",
              url:"img/[email protected]",
              answer:"情绪管理的制胜法则",
              list:["情绪管理“管”什么","爷爷和保安争吵，劝不住","如何达到知行合一"]
            },
            {
              course_title:"理性情绪处理法",
              url:"img/[email protected]",
              answer:"教你理性分清人生“三件事”",
              list:["我们的情绪程序是怎样运作的","如何挣脱心灵的枷锁","人生“三件事”你能分清吗"]
            },
            {
              course_title:"感性情感处理法",
              url:"img/[email protected]",
              answer:"教你有效的情绪释放术",
              list:["没有体验的道理都是谎言","给情绪做个体检吧","改变情绪的EFT八点法"]
            },
            {
              course_title:"工作与生活的平衡",
              url:"img/[email protected]",
              answer:"正确角色定位，搞定生活和工作",
              list:["不同角色不同的价值","工作OR生活，你的角色对吗","自我价值，快乐的源泉"]
            },
            {
              course_title:" 提升自我情绪能力",
              url:"img/[email protected]",
              answer:"情绪处理的治标治本之法",
              list:["提升自己的感官能力","提升自己的思维能力","目标与情绪之间的秘密"]
            }
          ],
          fit_list:["想要管理情绪，完善人际关系的人士","渴望工作与生活可以达成平衡的人士","想要获得快乐，实现自我价值的人士"],
          obtain_list:[
            {
              url:"img/card_01.png",
              text:"感知自己的情绪，找准角色定位"
            },
            {
              url:"img/card_02.png",
              text:"识别他人的情绪，完善人际关系"
            },
            {
              url:"img/card_03.png",
              text:"教你从根源上提升思维能力与情绪模式"
            },
            {
              url:"img/card_04.png",
              text:"与世界和谐相处，做自己信念的主人"
            }
          ],
          comment_list:[
            {
              url:"",
              name:"书课用户",
              text:"时刻知道自己的情绪，做自己的主人。"
            },
            {
              url:"img/default_photo.png",
              name:"当当书友",
              text:"一个人情绪失常，激动异常势必会影响他在其他方面得成就，管理好自己得情绪是成事的第一步，值得学习。"
            }

          ],
          explain_list:["《管理你的情绪》为『一書一課』精品录制课程，共包含6节音视频全集，每节课配有对应课时的精华解读，兑换/购买成功即可学习。",
            "本课程为虚拟内容服务，一经兑换/购买无法退订、转让，敬请理解。",
            "兑换后在会期内可反复收听/收看学习；用金币购买则可永久反复学习。",
            "版权归『一書一課』所有，严禁翻录成任何形式，严禁在任何第三方平台进行传播，违者将追究其法律责任。"]
        }
      }
    },

  })
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_41829196/article/details/80833375
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022