浏览器打开的网页，页面做手机端自适应以及引入vue和ant-design
html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ssss</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> //手机端适配<link href="/npm/ant-design-vue@1.4.10/dist/antd.min.css" rel="stylesheet" type="text/css" /> // 在html文件中引入ant-design<script src="/vue/2.6.10/vue.min.js"></script> //在html文件中引入vue<script src="/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script><script src="/downloads/moment.min.js"></script><link rel="stylesheet" href="../css/howToHaveClass.css"> //引入样式</head><body><divclass="table-page-btn-list special-column-edit-container" id="app"><div class="title" :style="back"><span class="arrow" ><img src="../image/leftArrow.png"></span></div><ul class="content"><li class="step" v-for="(item,index) in steps" :key="index"><div class="steps"><span class="tip" v-text="item.step"></span></div><p class="desc" v-text="item.desc"></p><div class="pic"><img :src="item.url"></div></li></ul></div><script>new Vue({el:"#app",data:{back: {backgroundImage: 'url(../image/class-background.png)',backgroundRepeat: 'no-repeat',backgroundSize: '100% 100%'},steps: [{step: '第一步',desc: '点击进入“最近”界面',url: '../image/step-one.png'},{step: '第二步',desc: '在最近选择自己要上的课程',url: '../image/step-two.png'},{step: '第三步',desc: '点击“进入教室” 开始上课',url: '../image/step-three.png'},{step: '第四步',desc: '如果需要组队学习点击组队按钮邀请好友',url: '../image/step-three.png'}]},created() {},methods:{}})</script></body>
css
.special-column-edit-container{width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto;padding: 1rem;box-sizing: border-box;}.title{width: 100%;height: 11.8rem;margin-top: 1rem;}.title .arrow{width:0.63rem ;height: 1.13rem;display: inline-block;margin-top: 2rem;margin-left:1rem ;position: relative;}.title .arrow img{max-width: 100%;max-height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}.content{width: 100%;display: flex;display:-moz-box;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;flex-flow: wrap row;list-style: none;padding: 0;}.step{width: 9.6rem;height: 22.6rem;background: #fff;padding-right: 0.5rem;margin-top: 2rem;flex-grow:1;}.step .steps{width: 3.5rem;text-align: center;height: 0.5rem;border-radius: 0.25rem;background: rgba(255,204,82);font-size: 0.94rem;color: #000;position: relative;top: 1rem;}.step .steps .tip{display: inline-block;position: relative;bottom: 0.8rem;}.desc{margin-top: 1.5rem;width: 100%;height: 4.5rem;font-size: 0.75rem;color: rgba(102, 102, 102, 1);}.pic{width: 100%;height: 16rem;position: relative;margin-top: 0.5rem;}.pic img{max-width: 100%;max-height: 100%;}
