epmet-oper-gov/src/views/modules/visual/communityParty/elegantInfo.vue

<template>
  <div class="m-pop">
    <div class="wrap">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>党员风采</span>
        </div>

        <div class="btn-close" @click="handleClose">
          <img src="@/assets/img/shuju/people/close.png" />
        </div>
        <!-- <div class="list-title">需求内容</div> -->
        <div class="list-wr">
          <div class="list">
            
            <!-- <div class="item-desc">
              <span>市北区同德花园小区物业管理服务，公司的同志每天对该小区 公共部位，喷洒消毒液进行消毒。为杀灭新型冠状病毒，近几 天以来，市北区</span>
            </div> -->
            <div class="item">
              <span class="item-field">所属网格：</span>
              <span>{{ info.gridName }}</span>
            </div>
            <div class="item">
              <span class="item-field">分类类别：</span>
              <span>{{ info.categoryName }}</span>
            </div>
            <div class="item">
              <span class="item-field">党员姓名：</span>
              <span>{{ info.name }}</span>
            </div>
            <div class="item">
              <span class="item-field">主要事迹：</span>
              <span class="item-content">{{info.mainDeed}}</span>
            </div>
            <div class="item">
              <span class="item-field">风采图片：</span>
              <div class="item-imgs">
                <!-- <img v-for="(item, index) in info.imageList" :key="index" :src="item" /> -->
                <el-image 
                  v-for="(item, index) in info.imageList" :key="index"
                  style="width: 200px; height: 200px;margin-right: 10px;"
                  :src="item" 
                  :preview-src-list="info.imageList"
                  :z-index="99999">
                </el-image>
              </div>
              <!-- <span>{{ info.peopleCount }}</span> -->
            </div>
            
          </div>
          <!-- <div class="list">
            <div class="item">
              <span class="item-field">活动结果：</span>
              <span class="item-content" v-html="info.result"></span>
            </div>
          </div> -->
        </div>
      </cpt-card>
    </div>
  </div>
</template>

<script>
import cptCard from "@/views/modules/visual/cpts/card";
import analyse from '../cpts/analyse.vue'
import { requestPost } from "@/js/dai/request";

export default {
  name: "dialogInfo",
  props: {
    userId: {
      type: String,
      default: "",
    },
    gridName: {
      type: String,
      default: "",
    },
    info: Object
  },

  components: {
    cptCard,
    analyse
  },

  data() {
    return {
      fieldList: [],
      groupList: [],
      groupIndex: 0,
      startGroupIndex: 0,
      // info: {},
      allInfo: {},
      
    }
  },

  
  mounted() {
  },

  methods: {
    handleClose() {
      this.$emit("close");
    },
  }
};
</script>

<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
<style lang="scss" scoped>
.m-pop {
  .wrap {
    .list {
      display: block;
      // width: 50%;
      .item {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 16px;
        cursor: pointer;
        .item-field {
          // width: 100px;
          flex-shrink: 0;
        }
        .item-content {
          width: 100%;
          max-height: 420px;
          overflow-y: auto;
          &::-webkit-scrollbar {
            width: 8px;
            // background: linear-gradient(270deg, #0063FE, #0095FF);
          }

          &::-webkit-scrollbar-corner,
            /* 滚动条角落 */
          &::-webkit-scrollbar-thumb,
          &::-webkit-scrollbar-track {      /*滚动条的轨道*/
            border-radius: 4px;
          }

          &::-webkit-scrollbar-corner,
          &::-webkit-scrollbar-track {
            /* 滚动条轨道 */
            
            background: rgba(12, 129, 254, .24);
            // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
          }

          &::-webkit-scrollbar-thumb {
            /* 滚动条手柄 */
            background: linear-gradient(270deg, #0063FE, #0095FF);
          }
        }
        ::v-deep p {
          margin: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .item-imgs {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          
          img {
            display: block;
            width: 240px;
            height: 240px;
            margin-right: 10px;
          }
        }
      }
      .item-desc {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 24px;
      }
    }
  }
  .list-title {
      width: 100%;
      box-sizing: border-box;
      padding: 20px 0 10px 62px;
      font-size: 20px;
      cursor: pointer;
    }
}
.list-wr {
  display: flex;
  padding: 0 32px;
  
}

</style>