sorvor-front/src/components/search/CardUser.vue

<template>
  <div class="pa-lg-8 pa-md-8 pa-sm-3">
    <div
      style="
        background-color: #f6b0e5;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
          rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        border-radius: 20px;
      "
      class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
    >
      <!-- {{ dataProfile }} -->
      <v-row class="page-search">
        <v-col
          cols="12"
          md="12"
          lg="12"
        >
          <v-card
            elevation="7"
            class="text-sub2 mx-auto py-3 card-user"
            maxWidth="900"
            rounded="xl"
          >
            <v-card-item>
              <div class=" text-left text-normal font-weight-bold" style="color:#e23972;">กลุ่มที่ {{ groupData.id  }}</div>
              <div class="mb-4 text-left text-small font-weight-medium">{{ groupData.name  }}</div>
              <div class="text-left px-md-10 px-5 px-lg-10">
              <div v-for="(item, i) in dataProfile" :key="i" >
                  <div class="font-weight-medium  my-2  text-normal">
                    <div style="font-size:20px">
                      <span> {{ item.firstName }}</span>
                      <span class="ml-3">
                        {{ item.lastName }}
                      </span>
                      <!-- <span style="color:#e23972;font-size: large"> ( กลุ่มที่ {{ item.group.id }} )</span> -->
                    </div>
                  </div>
              </div>
            </div>
            </v-card-item>
          </v-card></v-col
        >
      </v-row>
      <!-- {{ dataProfile.length }}
      <div v-if="dataProfile.length == 0">ไม่พบข้อมูล</div> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataProfile: {
      type: Array,
    },
    groupData:{
      type:Object
    }
  },
  data() {
    return {
      profile: [
        {
          name: "ศรราม",
          lastname: "ใจดี",
          province: "กรุงเทพ",
          district: "บางเขน",
          phone: "08952402xx",
          age: "42",
          edit: "บางเขน",
          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
          group: "กลุ่มการศึกษา",
          occupation:
            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
          email: "sornram.j@gmail.com",
          social: {
            fb: "Sornram jadee",
            x: "Sornram jadee",
            email: "sornram.j@gmail.com",
          },
          opinion: {
            agree: [
              "แก้ไข มาตรา 112",
              "แก้ไขรัฐธรรมนูญ 2560",
              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
            ],
            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
          },
        },
        {
          name: "ศรราม",
          lastname: "ใจดี",
          province: "กรุงเทพมหานคร",
          district: "บางเขนบางเขน",
          phone: "08952402xx",
          age: "42",
          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
          group:
            "กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
          occupation:
            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
          email: "sornram.j@gmail.com",
          social: { fb: "Sornram jadee", x: "Sornram jadee" },
          opinion: {
            agree: [
              "แก้ไข มาตรา 112",
              "แก้ไขรัฐธรรมนูญ 2560",
              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
            ],
            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
          },
        },
        {
          name: "ศรราม",
          lastname: "ใจดี",
          province: "กรุงเทพ",
          district: "บางเขน",
          phone: "08952402xx",
          age: "42",
          edit: "บางเขน",
          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
          group: "กลุ่มการศึกษา",
          occupation:
            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
          email: "sornram.j@gmail.com",
          social: { fb: "Sornram jadee", x: "Sornram jadee" },
          opinion: {
            agree: [
              "แก้ไข มาตรา 112",
              "แก้ไขรัฐธรรมนูญ 2560",
              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
            ],
            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
          },
        },
        {
          name: "ศรราม",
          lastname: "ใจดี",
          province: "กรุงเทพ",
          district: "บางเขน",
          phone: "08952402xx",
          age: "42",
          edit: "บางเขน",
          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
          group: "กลุ่มการศึกษา",
          occupation:
            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
          email: "sornram.j@gmail.com",
          social: { fb: "Sornram jadee", x: "Sornram jadee" },
          opinion: {
            agree: [
              "แก้ไข มาตรา 112",
              "แก้ไขรัฐธรรมนูญ 2560",
              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
            ],
            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
          },
        },
        {
          name: "ศรราม",
          lastname: "ใจดี",
          province: "กรุงเทพ",
          district: "บางเขน",
          phone: "08952402xx",
          age: "42",
          edit: "บางเขน",
          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
          group: "กลุ่มการศึกษา",
          occupation:
            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
          email: "sornram.j@gmail.com",
          social: { fb: "Sornram jadee", x: "Sornram jadee" },
          opinion: {
            agree: [
              "แก้ไข มาตรา 112",
              "แก้ไขรัฐธรรมนูญ 2560",
              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
            ],
            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
          },
        },
        {
          name: "ศรราม",
          lastname: "ใจดี",
          province: "กรุงเทพมหานคร",
          district: "บางเขนบางเขน",
          phone: "08952402xx",
          age: "42",
          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
          group: "กลุ่มการศึกษา",
          occupation:
            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
          email: "sornram.j@gmail.com",
          social: { fb: "Sornram jadee", x: "Sornram jadee" },
          opinion: {
            agree: [
              "แก้ไข มาตรา 112",
              "แก้ไขรัฐธรรมนูญ 2560",
              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
            ],
            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
          },
        },
        {
          name: "ศรราม",
          lastname: "ใจดี",
          province: "กรุงเทพมหานคร",
          district: "บางเขนบางเขน",
          phone: "08952402xx",
          age: "42",
          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
          group: "กลุ่มการศึกษา",
          occupation:
            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
          email: "sornram.j@gmail.com",
          social: { fb: "Sornram jadee", x: "Sornram jadee" },
          opinion: {
            agree: [
              "แก้ไข มาตรา 112",
              "แก้ไขรัฐธรรมนูญ 2560",
              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
            ],
            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
          },
        },
      ],
    };
  },
};
</script>
<style>
.img-display {
  height: 450px;
}
.box-group {
  border-radius: 5px;
  background-color: #ffcd68;
  border-radius: 10px;
  width: -webkit-fill-available;
  width: fit-content;
  min-width: 100%;
  padding: 10px 2px;
  height: 100%;
}
.line-r-g {
  padding-left: 5px;
  border-color: #ffcd68;
  border-right: 0.2px solid #ffcd68;
}
.line-g {
  border: 1px solid #ffcd68;
  display: inline-flex;
}
.card-user {
  height: 100%;
  /* height: 370px; */
}
.more {
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto;
}
.box-province {
  border-radius: 5px;
  background-color: #ffcd68;
  border-radius: 10px;
  width: -webkit-fill-available;
  width: fit-content;
}
@media only screen and (min-width: 0px) and (max-width: 1000px) {
  .img-display {
    height: 400px !important;
    width: auto;
  }
}
@media only screen and (min-width: 0px) and (max-width: 700px) {
  .page-search {
    padding: 20px 0px;
  }

  .card-user {
    max-height: auto !important;
    height: auto !important;
  }
  .line-g {
    display: inline-flex;
  }
  .box-province {
    border-radius: 5px;
    background-color: #ffcd68;
    border-radius: 10px;
    width: -webkit-fill-available;
  }
  .img-display {
    height: 300px !important;
  }
}
</style>
<style scoped>
@media only screen and (min-width: 900px) and (max-width: 1290px) {
  .t-md {
    font-size: 18px;
  }
}
</style>