弹窗背景图设置，关闭按钮

最新推荐文章于 2024-03-22 18:54:48 发布

原创最新推荐文章于 2024-03-22 18:54:48 发布 · 669 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

这个博客展示了如何在Vue中创建一个弹窗组件，包括背景图片、关闭按钮以及内容展示。内容包含了标题、详细信息和关闭操作。样式设计注重了边框圆角、图片定位以及文字颜色和大小。此外，还提到了CSS类的选择和布局设置。

弹窗

<div
  v-show="BackImg"
  class="BackgroundImg"
>
  <img
    class="closeImg"
    src="../../../../assets/close.png"
    @click="()=>{ BackImg = BackImg?false:true }"
  >//右上角x号
    <div>
      <span class="texttitle">最近更新提醒</span>
    </div>
  <div class="TextTop">
    <div style="text-align: center;">
      <span class="title-text">{{ dataForm.title }}</span>
    </div>
    <div style="height: 220px; width: 620px; overflow-y: auto; overflow-x: hidden;margin: auto;">
      <span
        class="title-content"
        v-html="dataForm.content"
      />
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="BackImg = false"
      >关闭</el-button>
    </span>
  </div>
</div>

css

<style> 
.BackgroundImg{
   background-image: url('../../../../assets/backImg.png');
   background-size: 700px 540px;
   background-repeat:no-repeat;
   position:fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   width: 700px;
   height: 540px;
   z-index: 99999;
   border-bottom-right-radius: 2em 2em;
   border-bottom-left-radius:  2em 2em;
}
.closeImg{
  margin-top: 70px;
  margin-left: 655px;
}
.closeImg:hover{
  cursor:pointer
}
//弹窗名称（标题）
.texttitle{
  color: #fff;
  font-size: 26px !important;
  margin-left: 45px;
}
.TextTop{
  margin-top: 115px;
  // margin-right: 50px;
  // margin-left: 50px;
  // text-align: center;
}
//内容标题
.title-text {
  color: #000;
  /* color: #0B2278; */
  font-size: 16px !important;
  font-weight: bold;
  line-height: 22px;
}
//内容
.title-content {
  width: 40%;
  color: #000;
  /* color: #0B2278; */
  font-size: 40px !important;
  line-height: 30px;
}
.title-content {
  vertical-align: middle;
  border-style: none;
  width: 50%;
  height: 50%;
}
//关闭input位置
.dialog-footer{
  margin-left: 45%;
}
</style>