引导页如何在pc端实现

先上效果图
主要根据页面元素的位置，绝对定位实现

这里是结构代码

<div class="mask"><!--第一步--><div class="first"><!----><div class="firstModel" :style="{left: left + 'px', top: top + 'px', right: right + 'px'}"><div class="for"><div class="fixed" :style="{width: width + 'px'}" v-if="index === 2"><span class="con">{{ formName }}</span></div><div class="fixed3" v-if="index === 3"><span class="leader">{{ formName }}</span></div><img src="@/assets/1.svg" alt="" v-if="index === 1"></div><div class="line"><img src="@/assets/4copy.svg" alt="" v-if="index === 1 || index === 2"><img src="@/assets/5.svg" alt="" v-if="index === 3" style="position: absolute;left:362px;"></div><div class="left"><img src="@/assets/3copy.svg" alt=""></div><div class="right"><div class="title">{{titel}}</div><div class="shall" v-if="index === 1">审批页面全新改版喽！</div><div class="next" @click="nextFooter()" v-if="index === 1 || index === 2">下一步</div><div class="close" @click="btnClose()" v-if="index === 1 || index === 2">关闭</div><div class="close2" @click="btnClose()" v-if="index === 3">关闭</div></div></div></div></div>

这里是样式

.text__regular_con {position: absolute;font-size: 14px;color: #3C8CFF;cursor: pointer;margin-left: 8px;}.text__regular_mai {position: absolute;font-size: 14px;color: #3C8CFF;cursor: pointer;margin-left: 8px;}.money {width: 300px;height: 14px;font-size: 16px;font-family: PingFangSC-Medium;font-weight: 500;font-weight: bold;color: rgba(51, 51, 51, 1);line-height: 14px;}.money_wan {color: orangered;}.text-link {position: absolute;font-size: 14px;color: #3C8CFF;cursor: pointer;margin-left: 8px;}/*#guide_wrap {*//*position: absolute;*//*width: 100%;*//*height: 100%;*//*overflow: hidden;*//*background: #fff;*//*}*/.mask {height: 100%;width: 100%;background: rgba(0, 0, 0, 0);position: absolute;left: 0;top: 0;z-index: 2222;.first {height: 100%;width: 100%;background: rgba(51, 51, 51, .35);left: 0;top: 0;z-index: 3333;.firstModel {position: absolute;top: 40%;left: 40%;z-index: 4444;width: 393px;height: 151px;background: rgba(255, 255, 255, 1);box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);border-radius: 4px;.for {position: absolute;right: 412px;top: 11px;.fixed {width: 43px;height: 23px;border-radius: 18px;overflow: hidden;background: #fff;position: relative;z-index: 999999;font-size: 14px;top: 10px;color: #3C8CFF;line-height: 23px;.con {margin-left: 8px;}img {display: block;width: 100%;height: 100%;z-index: 9999999;}}.fixed2 {width: 160px;height: 23px;border-radius: 18px;overflow: hidden;background: #fff;position: absolute;left: 455px;top: 44px;z-index: 999999;font-size: 14px;color: #3C8CFF;line-height: 23px;.con {margin-left: 8px;}}.fixed3 {width: 210px;height: 23px;border-radius: 18px;overflow: hidden;background: #fff;position: absolute;left: 430px;top: 44px;z-index: 999999;font-size: 14px;color: #3C8CFF;line-height: 23px;.leader {margin-left: 8px;}}}.line {position: absolute;right: 380px;top: 24px;}.left {float: left;margin-top: 25px;margin-left: 27px;}.right {float: right;.title {margin-top: 24px;width: 250px;height: 20px;font-size: 14px;font-family: PingFangSC-Medium;font-weight: 500;color: rgba(51, 51, 51, 1);line-height: 20px;}.shall {width: 250px;margin-top: 10px;height: 20px;font-size: 14px;font-family: PingFangSC-Regular;font-weight: 400;color: rgba(153, 153, 153, 1);line-height: 20px;}.close {cursor: pointer;float: right;position: absolute;top: 107px;right: 106px;width: 28px;height: 20px;font-size: 14px;font-family: PingFangSC-Regular;font-weight: 400;color: rgba(190, 190, 190, 1);line-height: 20px;}.close2 {cursor: pointer;float: right;position: absolute;top: 107px;right: 30px;width: 28px;height: 20px;font-size: 14px;font-family: PingFangSC-Regular;font-weight: 400;color: rgba(190, 190, 190, 1);line-height: 20px;}.next {position: absolute;cursor: pointer;float: right;top: 107px;right: 30px;width: 42px;height: 20px;font-size: 14px;font-family: PingFangSC-Medium;font-weight: 500;color: rgba(60, 140, 255, 1);line-height: 20px;}}}}}

代码拷贝过去就能看效果啦！
有什么不明白的可以给我留言哦！

个人vuepress搭建博客 https://wojiaozhangyonghao.github.io/myblog/

加群教你用vue + vuepress 搭建自己的博客

加入技术交流群
扫描二维码

引导页如何在pc端实现相关推荐

如何在PC端应用中运行小程序？
小程序逐渐打通所有应用场景,打破移动端和PC端的边界,解决了频繁在桌面设备和移动设备间跳转带来的「割裂感」,使用户在办公.学习.娱乐时带来极大便利.在未来,小程序将成为万物互联的连接器,打破物理边界. ...
如何在PC端快速下载B站视频，不是唧唧Down，学不会来打我！！！
如何在PC端快速下载B站视频,亲测可用学不会来打我!!! 哔哩哔哩如今已经从开始小众网站,慢慢进入了越来越多的人的视野和生活中.现在除了看动漫,我们还可以在上面看纪录片.电影.连续剧.科普.以及各种 ...
办公室海王小姐姐悄悄问我如何在PC端登录多个微信小号？
事情是这样的五一假期第一天值班隔壁有点喜欢的小姐姐突然跑过来跟我聊天 "微信账号切换来切换去特别麻烦" "怎么能同时打开多个呢?" 我心想,你有多少账号呀 ...
微信公众h5页面如何在pc端调试
方法一:使用微信开发者工具方法二: 1.正常访问会提示请在微信上打开 2.我们可以用一些抓包工具(Charles等),抓微信端(移动端微信/pc端微信都可以)访问该页面时携带的cookie信息 3. ...
关于如何在pc端使用github
http://www.bcwhy.com/thread-17636-1-1.html 转载于:https://www.cnblogs.com/glgl2424/archive/2013/03/13/2 ...
android开启前台服务_如何在PC端一次性开启Tasker的所有权限和服务
Tasker需要开启很多服务和获取很多权限通过下面的命令可以详细获取Tasker相关的权限和服务 adb shell dumpsys package net.dinglisch.android.ta ...
如何在PC端登录多个微信号？怎么操作免费多开电脑版微信？
复制微信快捷方式属性里面的"目标" "D:\Program Files\wechat\WeChat.exe" 在桌面右击新建一个文本文档,重命名"多开 ...
html手机pc不同页面,PC端和手机端如何同时生成静态页
静态页是和图片类似的静态资源,访问静态资源不会经过程序处理,不会根据浏览器返回不同页面.要同时支持PC端和手机端浏览器,且要生成静态页时,最好使用bootstrap之类的技术,实现自适应页面设计. 如 ...
React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
计算机中xp系统中qq文件,PC端QQ中的腾讯文档怎么使用
PC端QQ中的腾讯文档怎么使用腾讯视频/爱奇艺/优酷/外卖充值4折起今天给大家介绍一下PC端QQ中的腾讯文档怎么使用的具体操作步骤. 1. 首先打开电脑上的QQ软件,登录进入主面板后,点击底部的 ...

引导页如何在pc端实现

引导页如何在pc端实现

引导页如何在pc端实现相关推荐

最新文章

热门文章