微信小程序自定义弹窗样式====提示文字带下划线

最新推荐文章于 2024-08-15 23:28:06 发布

雪酒呀

最新推荐文章于 2024-08-15 23:28:06 发布

阅读量948

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： html css 小程序

本文链接：https://blog.youkuaiyun.com/Willow_Spring/article/details/119754814

微信小程序专栏收录该内容

32 篇文章

订阅专栏

有需求要弹窗有下划线。。。没找到方法，自己画一个
在这里插入图片描述

在这里插入图片描述
wxml

<view class="showErrorToastAafter"></view>
<view class="showErrorToast">
	<view class="top">
		<view class="title">提示</view>
		<view class="content">
			<view class="raw1">您的积分不足,<text>请完善信息</text></view>赚取积分后再参与活动哦
		</view>
	</view>
	<view class="showErrorToastLine"></view>
	<view class="bottom" hover-class="hoverclass">确定</view>
</view>

wxss

/* 活动新增，积分不足完善信息 */
.showErrorToast{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: absolute;
  border: 1px solid #000;
  width: 600rpx;
  height: 340rpx;
  border-radius: 30rpx;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
  background: #fff;
  z-index: 1;
  transform: translate(-50%,-70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  
}
.showErrorToast .top{
  flex: 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.showErrorToast .title{
font-size: 31rpx
;
font-weight: bolder;
}

.showErrorToast .content{
  color: rgb(127, 127, 127);
  font-size: 31rpx;
  margin-top: 30rpx;
}
.showErrorToast .raw1 text{
  display: inline-block;
  border-bottom: 1px solid rgb(127, 127, 127);
}
.hoverclass{
  background: #ececec;
}
.showErrorToast .bottom{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  height: 90rpx;
  font-weight: bolder;
  color: #666;  
  font-size: 33rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.showErrorToastLine{
  height: 0.5rpx;
  width: 100%;
  background: rgb(241, 238, 238);
}
.showErrorToastAafter{
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.596);
  width: 100vw;
  height: 100vh;
}