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

<template>
  <div class="box">
       <div class="banner">
        <img class="backout_img" src="@/assets/img/doubleAntibody/S5.jpg" alt="" srcset="" />
        <img class="backout_img_move" src="@/assets/img/home/m4.png" alt="" srcset="" />
       </div>
       <div class="serviceBox">
          <div class="serviceBoxOne">
            <p class="serviceText">
              As of 2024, 19 bispecific antibody drugs have been approved globally, with over 200 candidates in clinical development and an annual growth rate exceeding 30%. Current focus remains on oncology, while expanding into hematologic diseases, autoimmune disorders and other areas. Leveraging diverse structural formats (e.g., IgG-like, BiTE®), BsAbs enable synergistic targeting and immune cell bridging, demonstrating superior efficacy versus conventional therapies. Emerging technologies like BsAb-ADCs are driving applications in neurodegenerative diseases and beyond.
            </p>
            <p class="serviceText">Sanyou Bio offers a validated collection of 73 reference BsAb covering major platforms (CrossMab, BiTE®, etc.), supporting end-to-end R&D from candidate screening to preclinical evaluation. SY-CRS-BsAb solutions accelerate development by addressing key technical challenges and improving efficiency.</p>
            <div class="homeBox">
              <div class="homeBoxLeft">
                <img class="homeBoxLeftImg image_pc"  src="@/assets/img/doubleAntibody/S7.png" alt="" srcset="" />
                <img class="homeBoxLeftImg image_move"  src="@/assets/img/home/m1.png" alt="" srcset="" />
                <p class="homeBoxLeftText">SY-CRS-BsAb Isotype Distribution</p>
              </div>
              <div class="homeBoxLeft">
                <img class="homeBoxLeftImg image_pc"  src="@/assets/img/doubleAntibody/S8.png" alt="" srcset="" />
                <img class="homeBoxLeftImg image_move"  src="@/assets/img/home/m3.png" alt="" srcset="" />
                <p class="homeBoxLeftText">SY-CRS-BsAb Target Distribution</p>
              </div>
            </div>
          </div>
          <div class="serviceBoxOne">
            <p class="serviceBoxOneTitle">Manufacturing Process</p>
            <div class="serviceTopTitle">SY-CRS-BsAb Produciton Process Flow</div>
            <img class="serviceBoxOneImg image_pc"  src="@/assets/img/doubleAntibody/S6.png" alt="" srcset="" />
            <img class="serviceBoxOneImg image_move" src="@/assets/img/home/m2.png" alt="" srcset="" />
          </div>
          <div class="serviceBoxOne">
            <p class="serviceBoxOneTitle">Quality Management System</p>
            <p class="serviceText">SanYou Bio’s advanced antibody production system features high-end international equipment and full capabilities in plasmid construction, protein expression, and purification. Operating under GMP-grade host cells and Grade C+A cleanroom conditions, it follows 400+ standardized SOPs to ensure high-throughput, efficient delivery. All processes comply with ISO9001 and ISO27001, with strict quality control to guarantee antibody quality.</p>
            <div class="article">
              <template>
                  <el-table
                      :data="overView"
                      stripe
                      border
                      empty-text="Not Date"
                      style="width: 100%">
                      <el-table-column prop="data" label="Data"/>
                      <el-table-column prop="BsAb" label="SY-CRS-BsAb" />
                  </el-table>
              </template>
            </div>
          </div>
          <div class="serviceBoxTwo">
            <p class="serviceBoxOneTitle">Production Experience</p>
            <div class="homeBox">
              <div class="homeBoxLeft">
                <img class="homeBoxLeftImg image_pc"  src="@/assets/img/doubleAntibody/S1.jpg" alt="" srcset="" />
                <img class="homeBoxLeftImg image_move"  src="@/assets/img/home/m5.png" alt="" srcset="" />
              </div>
              <div class="homeBoxLeft">
                <img class="homeBoxLeftImg image_pc"  src="@/assets/img/doubleAntibody/S2.jpg" alt="" srcset="" />
                <img class="homeBoxLeftImg image_move"  src="@/assets/img/home/m6.png" alt="" srcset="" />
              </div>
            </div>
            <div class="homeBox">
              <div class="homeBoxLeft">
                <img class="homeBoxLeftImg image_pc"  src="@/assets/img/doubleAntibody/S3.jpg" alt="" srcset="" />
                <img class="homeBoxLeftImg image_move"  src="@/assets/img/home/m7.png" alt="" srcset="" />
              </div>
              <div class="homeBoxLeft">
                <img class="homeBoxLeftImg image_pc"  src="@/assets/img/doubleAntibody/S4.jpg" alt="" srcset="" />
                <img class="homeBoxLeftImg image_move"  src="@/assets/img/home/m8.png" alt="" srcset="" />
              </div>
            </div>
          </div>
       </div>
  </div>
</template>
<script>
export default {
  name: "indexIndex",
  components: {
  },
  data() {
    return {
      overView: [
        {
          data: "Concentration",
          BsAb: "√"
        }, {
          data: "Purity: SDS-PAGE",
          BsAb: "√"
        }, {
          data: "Purity: SEC-HPLC",
          BsAb: "√"
        }, {
          data: "LC-MS",
          BsAb: "√"
        }, {
          data: "Endotoxin",
          BsAb: "√"
        }, {
          data: "ELISA Binding",
          BsAb: "√"
        }, {
          data: "FACS Binding",
          BsAb: "√"
        }, {
          data: "Funtional Assay",
          BsAb: "√"
        }
      ]
    };
  },
  methods: {
  },
  mounted() {},
  created() {}
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 751px) and (max-width: 9999px) {
  .box {
    .banner{
      .backout_img{
        width: 100%;
      }
      .backout_img_move{
        display: none;
      }
    }
    .serviceBox{
      background: #f4f2f2;
      overflow: hidden;
      .serviceBoxOne{
          width: 1200px;
          margin: 30px auto 0;
          background: #fff;
          padding: 35px 20px;
          box-sizing: border-box;
          .serviceText{
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 24px;
            margin-bottom: 24px;
          }
          .homeBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .homeBoxLeft{
              width: 49%;
              border: 1px solid #F4F2F2;
              padding: 20px 40px;
              box-sizing: border-box;
              .homeBoxLeftImg{
                width: 100%;
              }
              .homeBoxLeftText{
                font-weight: bold;
                font-size: 14px;
                color: #000000;
                line-height: 24px;
                text-align: center;
                margin-top: 10px;
              }
            }
          }
          .serviceBoxOneTitle{
            font-weight: bold;
            font-size: 24px;
            color: #000000;
            line-height: 24px;
            margin-bottom: 10px;
          }
          .serviceTopTitle{
              font-size: 18px;
              color: #fff;
              padding: 15px 0;
              box-sizing: border-box;
              text-align: center;
              font-weight: 600;
              background: linear-gradient(90deg, #1880C1, #22AB3A);
          }
          .serviceBoxOneImg{
            width: 100%;
            margin-top: 45px;
          }
          .article /deep/{
            .has-gutter th{
              background-color: #075BA9 !important;
              .cell{
                color: #fff;
              }
            }
            .cell{
              color: #000;
              text-align: center;
            }
            .el-table__row td{
                background-color: #fff !important;
            }
            .el-table__row--striped td{
                background-color: #F0FAFE !important;
            }
          }
      }
      .serviceBoxTwo{
        width: 1200px;
        margin: 30px auto 70px;
        background: #fff;
        padding: 35px 20px;
        box-sizing: border-box;
        .serviceBoxOneTitle{
          font-weight: bold;
          font-size: 24px;
          color: #000000;
          line-height: 24px;
          margin-bottom: 10px;
        }
        .homeBox{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 25px;
          .homeBoxLeft{
            width: 49%;
            border: 1px solid #F4F2F2;
            text-align: center;
            .homeBoxLeftImg{
              // width: 100%;
            }
          }
        }
      }
    }
    .image_pc{
      display: block;
    }
    .image_move{
      display: none;
    }
  }
}
@media screen and (min-width: 0) and (max-width: 750px) {
  .box {
    .banner{
      .backout_img{
        display: none;
      }
      .backout_img_move{
        width: 100%;
      }
    }
    .serviceBox{
      background: #f4f2f2;
      overflow: hidden;
      padding: 0 20px;
      .serviceBoxOne{
        width: 100%;
          margin: 30px auto 0;
          background: #fff;
          padding: 20px 10px;
          box-sizing: border-box;
          .serviceText{
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 24px;
            margin-bottom: 20px;
          }
          .homeBox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            .homeBoxLeft{
              width: 100%;
              border: 1px solid #F4F2F2;
              padding: 20px 40px;
              box-sizing: border-box;
              .homeBoxLeftImg{
                width: 100%;
              }
              .homeBoxLeftText{
                // font-weight: bold;
                font-family: Source Han Sans CN;
                font-size: 14px;
                color: #000000;
                line-height: 24px;
                text-align: center;
                margin-top: 10px;
              }
            }
            .homeBoxLeft:nth-child(1){
              margin-bottom: 20px;
            }
          }
          .serviceBoxOneTitle{
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 20px;
            color: #000000;
            line-height: 24px;
            margin-bottom: 30px;
          }
          .serviceTopTitle{
              font-family: Source Han Sans CN;
              font-size: 16px;
              color: #fff;
              padding: 15px 0;
              box-sizing: border-box;
              text-align: center;
              font-weight: 600;
              background: linear-gradient(90deg, #1880C1, #22AB3A);
          }
          .serviceBoxOneImg{
            width: 100%;
            margin-top: 45px;
          }
          .article /deep/{
            .has-gutter th{
              background-color: #075BA9 !important;
              .cell{
                color: #fff;
              }
            }
            .el-table__header-wrapper th{
              background-color: #075BA9 !important;
              .cell{
                color: #fff;
              }
            }
            .cell{
              color: #000;
              text-align: center;
            }
            .el-table__row td{
                background-color: #fff !important;
            }
            .el-table__row--striped td{
                background-color: #EAF9FF !important;
            }
          }
      }
      .serviceBoxTwo{
        // width: 1200px;
        margin: 30px auto 70px;
        background: #fff;
        padding: 35px 20px;
        box-sizing: border-box;
        .serviceBoxOneTitle{
          font-weight: bold;
          font-size: 20px;
          color: #000000;
          line-height: 24px;
          margin-bottom: 10px;
        }
        .homeBox{
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          // margin-top: 25px;
          .homeBoxLeft{
            width: 100%;
            border: 1px solid #F4F2F2;
            text-align: center;
            margin-top: 20px;
            .homeBoxLeftImg{
              // width: 100%;
            }
          }
        }
      }
    }
    .image_pc{
      display: none;
    }
    .image_move{
      display: block;
    }
  }
}
</style>