crs-double-resistance/src/view/overView/index.vue

<template>
    <div class="box">
        <banner></banner>
        <div class="list">
            <div class="format-box" v-for="(one, i) in list" :key="i">
                <div class="images_box">
                    <p class="images_title">CHBA068</p>
                    <img class="icons-item-imgbox" :src="one.fileUrl">
                    <p class="images_weight">Blinatumomab</p>
                    <p class="images_text">TCE 54.05</p>
                    <p class="images_text">kDa</p>
                    <p class="images_text">(Amgen)</p>
                    <p class="images_footer">US, Approved</p>
                </div>
            </div>
        </div>
    </div>
  </template>
<script>
import banner from "@/components/banner";
export default {
  name: "overView",
  components: {
    banner
  },
  data() {
    return {
      list: [
        {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }, {
          name: "12",
          fileUrl: "/static/img/mRNA1.af470f1.jpg"
        }
      ]
    };
  },
  methods: {
  },
  mounted() {},
  created() {
  }
};
</script>
  <style lang="scss">
  .site-header-suggestion-select {
    .el-autocomplete-suggestion__wrap {
      max-height: 380px;
    }
  }
  </style>
  <style lang="scss" scoped>
  @media screen and (min-width: 751px) and (max-width: 9999px) {
    .box {
      .list{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 10px 0.5%;
        .format-box{
            width: 16.5%;
            border: 1px solid #DDDDDD;
            transition: transform 0.3s ease;
            .images_box{
                padding: 8px;
                box-sizing: border-box;
                text-align: center;
                .images_title{
                    font-size: 12px;
                    font-weight: 600;
                    text-align: left;
                }
                .images_weight{
                    font-size: 14px;
                    font-weight: 600;
                }
                .images_text{
                    font-size: 12px;
                }
                .images_footer{
                    font-size: 12px;
                    margin-top: 10px;
                }
                .icons-item-imgbox{
                    width: 100%;
                    height: 100px;
                }
            }
        }
        .format-box:hover{
            transform-origin: 0% 0;
            transform: scale(1.5);
            border: 1px solid #007BC4;
            background: #fff;
            z-index: 999;
        }
      }
    }
  }
  </style>