样式集 - 自适应居中弹窗

效果图：

弹窗1代码

<!-- 答题正确弹窗 --><block v-if="answer_true_show"><view class="answer_true_bg"></view><view class="answer_true"><img class="true_bg_img" :src="qualifyingAnswerIng_true_bg" /><view class="answer_true_centent"><view class="tips">问题解析</view><view class="detail">错题分析错题分析错题分析错题分析 错题分析错题分析错题分析错题分析 错题分析错题分析错题分析</view><view class="answer_true_btn">结束游戏</view><view class="ttt">上滑跳转下一题</view></view></view></block>

css
<style lang="scss" scoped>

.answer_true_bg {position: absolute;width: 100vw;height: 100vh;z-index: 98;background: #000;}.answer_true {position: absolute;width: 80vw;top: 50%;left: 50%;transform: translate(-50%, -50%);align-items: center;display: -webkit-flex;z-index: 100;.true_bg_img {z-index: 100;position: absolute;width: 100%;}.answer_true_centent {// background-color: red;z-index: 100;position: absolute;width: 90%;left: 5%;text-align: center;.tips {margin-top: 320rpx;font-size: 28rpx;text-align: center;}.detail {// position: relative;// top: 100rpx;background-color: #fff;line-height: 44rpx;border-radius: 10rpx;padding: 10rpx 20rpx 30rpx 20rpx;margin: 10rpx 40rpx 20rpx 40rpx;font-size: 26rpx;color: #333;}.answer_true_btn {width: 164rpx;height: 58rpx;line-height: 58rpx;background: #102841;border-radius: 14rpx;margin: auto;margin-top: 40rpx;color: #fff;font-size: 30rpx;}.ttt {margin-top: 10rpx;font-size: 28rpx;}}}

弹窗2代码

<block v-if="answer_over_show"><view class="answer_over_bg"></view><view class="answer_over"><img class="over_bg_img" :src="qualifyingAnswerIng_over_bg" /><view class="answer_over_centent"><view class="over_tips tips1 p_r">您一共答题：<view class="num">212</view>题</view><view class="over_tips tips2 p_r">共答对问题：<view class="num">210</view>题</view><view class="over_tips tips3 p_r">共答错问题：<view class="num">2</view>题</view><view class="p_r over_btns"><view class="answer_over_btn1">结束游戏</view><view class="answer_over_btn2">返回首页</view></view><view class="tips4">本次排名提升了5位</view></view></view></block>

css

// 挑战结束.answer_over_bg {position: absolute;width: 100vw;height: 100vh;z-index: 98;background: #000;}.answer_over {position: absolute;width: 80vw;top: 50%;left: 50%;transform: translate(-50%, -50%);align-items: center;display: -webkit-flex;z-index: 100;.over_bg_img {z-index: 100;position: absolute;width: 100%;}.answer_over_centent {// background-color: red;z-index: 100;position: absolute;width: 90%;left: 5%;text-align: center;margin-top: 340rpx;.over_tips {font-size: 28rpx;width: 60%;margin-left: 20%;margin-bottom: 10rpx;color: #333;text-align: center;}.tips1 .num,.tips2 .num {color: #317a8c;font-size: 40rpx;font-weight: 500rpx;width: 120rpx;line-height: 30rpx;}.tips3 .num {color: red;font-size: 40rpx;font-weight: 500rpx;width: 120rpx;line-height: 30rpx;}.tips4 {// position: relative;// top: 100rpx;background-color: #fff;line-height: 34rpx;border-radius: 10rpx;padding: 10rpx 20rpx 10rpx 20rpx;margin: 30rpx 110rpx 20rpx 110rpx;font-size: 26rpx;color: #333;}.over_btns {width: 76%;margin-left: 12%;margin-top: 30rpx;.answer_over_btn1 {width: 164rpx;height: 58rpx;line-height: 58rpx;background: #102841;border-radius: 14rpx;margin: auto;color: #fff;font-size: 30rpx;}.answer_over_btn2 {width: 164rpx;height: 58rpx;line-height: 58rpx;background: #6b7823;border-radius: 14rpx;margin: auto;color: #fff;font-size: 30rpx;}}}}

样式集 - 自适应居中弹窗相关推荐

word精华样式篇之三使用样式集让所有文档风格统一
回顾:样式是样式是一组格式特征,例如字体名称.字号.颜色.段落对齐方式和间距. 一. 保存自己的专属样式我们将自己工作文档设置好了各级标题格式后,希望以后打开word就直接使用这种样式,在关闭当前文 ...
不固定个数的子元素自适应居中
今天工友提了一个需求,让固定宽度的子元素,在不确定宽度的容器内水平居中(自适应):UL 宽度不固定:LI 宽度固定,LI 是一个块.看起来还挺简单的.但大家为什么一直讨论不断.希奇,实现了一下.发现实 ...
css3绝对定位垂直居中,CSS3绝对定位自适应居中 - 米扑博客
网页前端开发中,经常会遇到让一个块状元素水平或垂直居中的情况你知道如何在自适应屏幕的情况下保持元素居中么? 元素居中这是前端开发中最常见的任务之一对于行内元素,我们可以对父元素使用 text-al ...
Word中样式与样式集
本文是对Word2010中样式与样式集的总结. 一.关于按钮1(下面有三个选项) "将所选内容保存为新快速样式":将所选文字的格式保存为一个快速样式,即先调整好文字格式再据此创建相 ...
html表格网页自适应居中,web前端：css自适应居中方法总结
下面来看一个最简单的小案例,在浏览器窗口居中一个小盒子: 就这样一个很简单的小案例,你能够想到多少种方法来实现呢?对块元素盒子的左右居中相信大家都不陌生,{margin:auto;}就能够实现,但是对 ...
如何用CDR创建样式与样式集
样式是一组定义对象属性的格式化属性,如轮廓或填充.例如,要定义轮廓样式,您可以指定轮廓宽度.颜色和线条类型等属性.要定义字符样式,您可以指定字体类型.字体样式和大小.文本颜色和背景色.字符位置.大写等 ...
样式集（八）弹窗，规则弹窗，半透明弹窗
效果图: 代码: <view class="popupBlock" v-if="showPopupBlock"><view class=&qu ...
样式集（14）填写信息弹窗
代码 <template><view class="mxBoom"><view class="mxBoomContent"> ...
easyExcel 导出文件时，设置单元格样式，自适应列宽
目录 1.自适应列宽实现类 2.单元格样式实现类 3.导出的时候,特殊数据类型,需要设置转换类,不然注解导出方式会报错注解使用方式日期转换类 4.web导出excel(将excel数据写入到res ...

样式集 - 自适应居中弹窗

样式集 - 自适应居中弹窗相关推荐

最新文章

热门文章