第五章-封装PC端官网卡片组件

<template>
  <div>
    <!-- 列表 -->
    <div class="lw-card-box">
      <div class="lw-card-view">
        <el-row :gutter="20">
          <!-- 注意这里的if判断是指限制显示几个 -->
          <el-col
            :span="6"
            v-for="(item, index) in hospitalList"
            :key="index"
            v-if="index < hcount"
            >
            <!-- 卡片 -->
            <div class="lw-card-items" @click="getHospital(item, city, 1)">
              <!-- 图片 -->
              <img class="lw-card-img" :src="item.img" />
              <!-- 昵称 -->
              <div class="lw-card-name">{{ item.name }}</div>
              <!-- 标签 -->
              <div class="lw-card-label-box">
                <label
                  style="margin-right: 5px"
                  v-for="items in item.label"
                  :key="items"
                  >{{ items }}</label
                >
              </div>
              <!-- icon -->
              <div class="lw-card-address">
                <img src="~/assets/img/all/addres.png" /> {{ item.address }}
              </div>
            </div>
          </el-col>
          <!-- 这里v-show区分显示更多 -->
          <el-col :span="6" v-show="show"
            ><div class="lw-card-items" @click="getHospital('', city, 2)">
              <img class="lw-card-img" src="~/assets/img/all/none.png" />
              <div class="lw-card-more">
                更多{{ city }}医院
                <img src="~/assets/img/all/rightradio.png" alt="" title="" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["hospitalList", "hcount", "city", "show"],
  data() {
    return {};
  },
  methods: {
    getHospital(item, city, type) {
      this.$emit("getHospital", item, city, type);
    },
  },
};
</script>
<style scoped>
.lw-items:hover {
  font-size: 20px;
  font-family: MicrosoftYaHei;
  color: #3878f8 !important;
  cursor: pointer;
}
.lw-card-items:hover {
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.12);
}
.lw-card-box {
  width: 1200px;
  display: inline-block;
}
.lw-card-name {
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: #222222;
  height: 30px;
  padding-left: 10px;
  line-height: 30px;
  text-align: left;
  margin-top: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lw-card-label-box {
  text-align: left;
  overflow: hidden;
  padding-left: 11px;
  margin-bottom: 5px;
}
.lw-card-label-box label {
  width: 60px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  font-family: MicrosoftYaHei;
  color: #3878f8;
  text-align: center;
  display: inline-block;
  font-size: 13px;
  border-radius: 2px;
  border: 1px solid #3878f8;
}
.lw-card-address {
  padding-left: 6px;
  height: 30px;
  overflow: hidden;
  width: 262px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #9ca2ae;
  line-height: 30px;
}
.lw-card-address img {
  width: 24px;
  display: inline-block;
  position: relative;
  bottom: 2px;
  height: 24px;
}
.lw-card-view {
  width: 100%;
  margin: 0 auto;
  display: inline-block;
}
.lw-card-img {
  width: 100%;
  height: 204px;
  border-radius: 4px 4px 0px 0px;
}
.moreText {
  position: absolute;
  right: 0;
  width: 30px;
  justify-content: center;
  align-items: center;
  display: inline-block;
  top: 30%;
  color: #999;
  line-height: 20px;
}
.lw-card-more {
  width: 100%;
  text-align: center;
  position: relative;
  display: inline-block;
  height: 140px;
  font-size: 18px;
  color: #3878f8;
  line-height: 140px;
}
.lw-card-more img {
  width: 20px;
  height: 20px;
  position: relative;
  bottom: 1px;
}
.lw-card-items {
  text-align: center;
  height: 332px;
  margin-bottom: 20px;
  position: relative;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
  padding-bottom: 15px;
}
</style>

<template>
  <div class="hospital-view">
 
    <!-- 医院card -->
    <div>
      <LwCardList
        :hcount="16"
        :show="false"
        :hospitalList="hospitalList"
      ></LwCardList>
    </div>
    <!-- end -->
     <!-- 分页 -->
    <div class="paginationbox" >
      <v-page
        :page="page"
        :total="total"
        :rows="rows"
        @handleSize="handleSize"
        @handleCurrent="handleCurrent"
      ></v-page>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        page:1,
        total:200,
      hospitalList: [
        {
          value: 1,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
        {
          value: 2,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
        {
          value: 3,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
        {
          value: 4,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
        {
          value: 5,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
        {
          value: 6,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
        {
          value: 7,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
        {
          value: 8,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
        {
          value: 9,
          label: ["三甲医院", "私立医院"],
          img: "",
          name: "中国人民解放军总医院(301)",
          address: "天津市河北区天泰路130号天津市河北区天泰路130号",
        },
      ],

    };
  },
  methods: {
       /**
     * 每页显示条数事件
     */
    handleSize(val) {
      console.log("handleSize", val);
    },
    /**
     * 切换页数
     */
    handleCurrent(val) {
      console.log("handleCurrent", val);
    },
    /**
     *点击选中卡片数据
     * @param {item} 当前选中数据
     */
     getHospital(item, city, type) {
      console("getHospital", item, city, type);
    },
    },
  },
};
</script>
<style scoped>
/* 最外层 */
.hospital-view {
  width: 100%;
  height: 100%;
  background: #f6f7fa;
  text-align: center;
}

</style>