yifeng_integration/src/views/next/dialog-module/hsyf-right/ywqsModal.vue

<template>
  <div class="modal" v-show="ywqsShow">
    <section>
      <div class="dialog_header">
        <div class="close-icon" @click="closeDialog">
          <img src="@/assets/images/common/dialog-colse.png" alt="" />
        </div>
        <div class="title-container">
          <div class="title">{{ dialogTitle }}</div>
        </div>
      </div>
      <div class="dialog_body">
        <div class="content">
          <div class="main">
            <div class="wrap">
              <div class="content">
                <div
                  class="content-item"
                  v-for="item in dataList"
                  :key="item.name"
                >
                  <div class="content-item-name">{{ item.name }}</div>
                  <div class="content-item-desc">
                    <el-tooltip
                      popper-class="bgcolor"
                      effect="dark"
                      :content="item.describe"
                      placement="top"
                    >
                      <div
                        slot="content"
                        style="
                          width: 280px;
                          background-color: rgba(167, 35, 6, 0.91);
                          border-radius: 4px;
                          color: rgba(255, 255, 255, 0.9);
                          margin: -10px;
                          padding: 10px;
                          font-size: 14px;
                          line-height: 22px;
                        "
                      >
                        {{ item.introduce }}
                      </div>
                      <div>{{ item.introduce }}</div>
                    </el-tooltip>
                  </div>
                  <div class="content-item-wish">
                    <div class="content-item-wish-icon">
                      <img src="@/assets/images/icon/wish-icon.png" />
                    </div>
                    <div class="content-item-wish-txt">
                      <el-tooltip
                        popper-class="bgcolor"
                        effect="dark"
                        :content="item.content"
                        placement="top"
                      >
                        <div
                          slot="content"
                          style="
                            width: 280px;
                            background-color: rgba(167, 35, 6, 0.91);
                            border-radius: 4px;
                            color: rgba(255, 255, 255, 0.9);
                            margin: -10px;
                            padding: 10px;
                            font-size: 14px;
                            line-height: 22px;
                          "
                        >
                          {{ item.content }}
                        </div>
                        <div>{{ item.content }}</div>
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { partyWishList } from '@/api/hsyf'
export default {
  name: '',
  data () {
    return {
      dialogTitle: '“移”点心愿',
      loading: false,
      dataList: [
        {
          name: '孙正开',
          describe: '现年82岁的孙正开，是一位布老虎手工缝纫的传承人，对手工缝制“虎”制品有着深厚感情。',
          content: '“不管用什么办法，只要让这门手艺不失传，我就很高兴了。”'
        },
        {
          name: '毛均纲',
          describe: '心愿人是一位有着50年党龄的老党员。',
          content: '我的心愿是拥有一枚新的党徽。'
        },
        {
          name: '朱念升',
          describe: '朱念升，即墨分局移风店派出所辅警，2023年度“青岛最美警察”“青岛最美辅警”候选人',
          content: '我的愿望是辖区稳定，没有冲突'
        },
        {
          name: '隋安瑞',
          describe: '隋安瑞，移风店镇上泊新村上泊村村民，是一位有着50年党龄的老党员。',
          content: '我想要去参观即墨县委纪念馆。'
        },
        {
          name: '胡程凯',
          describe: '上泊村青年党员',
          content: '身体健康，生活顺利。尽自己最大努力为他人谋幸福，发挥自身的小小善意，温暖身边的人'
        },
        {
          name: '陶子耀',
          describe: '移风店镇给今年8岁的心愿人留下了美好的童年记忆。',
          content: '“我想要一套水彩笔，我的家乡很美，我想把它画下来。”'
        },
        {
          name: '隋邦远',
          describe: '上泊村村民',
          content: '希望家人工作顺利，孩子健康成长。'
        },
        {
          name: '隋安敬',
          describe: '心愿人是一位90岁的高龄老人，有时天冷却不舍得开空调。',
          content: '一床温暖的被子'
        },
        {
          name: '毛婕冉',
          describe: '刚刚踏入大学校门的心愿人，对中国共产党怀揣着敬畏与憧憬。',
          content: '我想要借阅《红日》这本书。'
        },
        {
          name: '王方论',
          describe: '上泊村村民，中共党员。和妻子居住在一起，虽能相互扶持，日常生活还是有些许不便。',
          content: '我想和妻子体验移风店镇居家养老服务中心。'
        },
        {
          name: '陈浩煜',
          describe: '今年六岁的心愿人，即将成为一名小学生，日常爱好绘画。',
          content: '我想要一条围裙，这样画画的时候就不会弄脏衣服了。'
        },
        {
          name: '陈廷波',
          describe: '上泊村村民',
          content: '希望家人身体健康，万事如意。'
        },
        {
          name: '张典会',
          describe: '心愿人是一位有着50年党龄的老党员。',
          content: '我想和年轻党员聊聊天'
        },
        {
          name: '陈静',
          describe: '上泊村村民，中共党员。',
          content: '我想加入镇党员志愿服务队。'
        },
        {
          name: '张茹珂',
          describe: '心愿人是一位7岁的小学生。',
          content: '我想去图书馆读书。'
        },
        {
          name: '隋普山',
          describe: '上泊村村民，中共党员',
          content: '我想成为党员志愿服务队的一员。'
        },
        {
          name: '杜显忠',
          describe: '上泊村村民，中共党员，和家中六口人居住在一起。',
          content: '我的父亲今年98岁了，行动不方便，我想要一台轮椅。'
        },
        {
          name: '胡倩倩',
          describe: '上泊村村民，中共党员',
          content: '我想要向村里的老人前辈请教，学一门家乡的手艺。'
        },
        {
          name: '付瑞兰',
          describe: '心愿人是一位有着50年党龄的老党员,现今独居。',
          content: '我想要在乡村文艺活动上唱一首红歌。'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['ywqsShow'])
  },
  components: {},
  mounted () {},
  created () {
    partyWishList().then(res => {
      this.dataList = res.data
    })
  },
  methods: {
    ...mapActions({
      showGlobalDialog: 'showGlobalDialog'
    }),
    closeDialog () {
      this.showGlobalDialog('')
    }
  }
}
</script>

<style lang="scss" scoped>
/* //控制内容主题颜色 */
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;

  section {
    @include flex(column);
    background: url("~@/assets/images/common/dialog-bg-red.png") no-repeat !important;
    background-size: 100% 100% !important;
    width: 1180px;
    height: 786px;
    overflow: hidden;
    padding-bottom: 16px;
    box-sizing: border-box;

    .dialog_header {
      position: relative;
      margin-bottom: 0px;

      .close-icon {
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        right: 16px;
        cursor: pointer;
      }

      .title-container {
        align-items: center;
        background: url("~@/assets/images/common/dialog-header-red.png")
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        font-size: 26px;

        .title {
          font-family: zaozigongfang;
          letter-spacing: 2px;
          line-height: 50px;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          height: 52px;
          font-size: 22px;
          color: #fff;
        }
      }
    }

    .dialog_body {
      position: relative;

      > .content {
        box-sizing: border-box;
        color: #fff;
        padding: 0px 24px 0 27px;
        height: 708px;
        overflow-y: hidden;
        box-sizing: border-box;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: rgba(251, 233, 197, 1);
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: rgba(234, 201, 135, 1);
        }

        .header {
          width: 100%;
          height: 30px;
          text-align: left;
          background: linear-gradient(
            90deg,
            rgb(26, 109, 224) 0%,
            rgba(13, 113, 248, 0) 50%
          );
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
  }
}

.wrap {
  .content {
    margin-top: 0px;
    padding: 24px 10px;
    position: relative;
    transition: transform 0.3s ease-in-out;
    transform-origin: 50% 50%;
    display: flex;
    flex-wrap: wrap;
    // grid-template-columns: 50% 50%;
    grid-gap: 16px 24px;

    &-item {
      position: relative;
      width: 507px;
      height: 120px;
      border-radius: 6px;
      background-image: linear-gradient(
        to right,
        rgba(249, 140, 38, 0.3) 0%,
        rgba(249, 140, 38, 0.5) 100%
      );
      padding: 16px;
      &-name {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
        line-height: 32px;
      }
      &-desc {
        padding-top: 12px;
        width: 510px;
        height: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #fbe9c5;
        line-height: 24px;
        opacity: 0.76;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; /* 设置显示的行数 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
      }
      &-wish {
        margin-top: 16px;
        padding-top: 8px;
        border-top: 1px dashed #bb7053;
        height: 17px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 32px;
        display: flex;
        &-icon {
          padding-top: 8px;
          padding-right: 8px;
          img {
            width: 18px;
            height: 18px;
          }
        }
        &-txt {
          width: 510px;
          height: 32px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; /* 设置显示的行数 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
        }
      }
    }
  }
}
</style>

<style scoped></style>