仿携程官网题外话：刚开始学前端的时候，有一天看到了携程官网。我希望有一天我可以模拟它。我一直在拖延，但我终于完成了！！（有一次我亲爱的同事删了传送门我不感谢他fk）谢谢叶大哥救了我。在-cli基础上构建的.build/config配置文件src为主要内容（assets包括公共js文件，css样式/components为公共组件/module为页面）dist为打包文件夹node_modules为依赖包和其他的都是默认配置文件的思路，说一下我拿到携程官网的时候是怎么反汇编的（如果写错了请指出指导）1.首先是静态页面.刚学前端的时候，看到了携程。敲门声。强行写了一点htmlcss。工作背后的原因是使用了vue，所以旧的推倒重写了。页面结构分为这几个部分：（如图）包括logo头部导航栏图标快捷入口广告滑动和搜索框各主题区底部的固定交互框有了页面结构后，是基本功。然后一点点搭建页面，（优化提取公共组件。）2.然后是页面数据，没想到是个好方法。建页面的时候，顺便在携程上抄一点。（我看到隔壁的仿页面帖子都是通过接口的，小弟还是有点菜）然后通过每个需要数据的页面mock.js来介绍这个...3.不说common页面样式。让我们放轻松。分享一些lessmixin的方法。//显示垂直集合#display_type{.dsp-middle{display:inline-block;垂直对齐：中间；}.dsp-top{显示：内联块；垂直对齐：顶部；}}//三角形（向下）.arrow_down(@size,@color:black){//@sizesize@colorcolormargin-left:5px;&:{内容之后:'';显示：内联块；边框顶部：@sizesolid@color；左边框：@size纯色透明；右边框：@size纯色透明；border-bottom:@sizesolidtransparent;最常见的两种mixins就是以上两种。一个是显示布局，一个是人工三角orz。如果要使用mixin，需要在css中使用@import方法才能使用。（用js的方式，坏了好久，不能坏）引入后直接在页面中使用#display_type>.dsp-middleoranother;.arrow_down(3px,#fff);4.响应式布局，因为我的风格是less写的。然后看看携程官网。一点点测试。一点点改进。没有什么好办法。部分代码如下。@mediascreenand(max-width:1200px){margin-right:20px;&:last-child{显示：无；}}5.Elevator这个电梯存在于主题区，所以我给每个主题div添加了不同的类名来获取当前div的滚动高度。然后在钩子函数mounted()中，获取每个主题的高度consts=document.getElementsByClassName('scroll-hook');for(letdomofs){letscoll_h=dom.offsetTop+dom.offsetParent.offsetTop;这。scroll_data.push(scoll_h);}电梯的本质是：根据当前的滚动高度，然后动态改变activelogo；点击相应的logo，页面会滚动到相应的区域;当页面滚动时，如果你停留在固定位置，写bie.1。电梯的HTML渲染（ps.lift.index是每个电梯的类名，lift_flag是区域的标识），然后在mounted()中为窗口注册一个滚动监听事件，然后获取当前滚动高度，然后进行判断
