创新实训（九）

景点信息的组件主要包含景点的以下几个信息：景点名称、景点排名、景点分数、景点地址、景点位置、景点图片、景点介绍。对于景点的布局，我将图片放在了整个信息卡的左边，除了景点介绍的其他信息放在右边从上到下依次排列，景点介绍放在悬浮框中，鼠标移到信息卡上时显示悬浮框。代码如下：

<template>
  <div class="scenic">
    <el-popover
    placement="bottom"
    title="景点简介"
    width="350"
    trigger="hover"
    class="description"
    :content="description">
    <div class="lists" slot="reference" v-loading="loading">
      <div class="item" id="canchange">
        <div class="item_pic" fit="contain">
          <el-image :src="imgsrc" lazy class="img">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div class="item_content">
            <el-row>
              <el-col :offset="2">
                <div class="name">{{ name }}</div>
              </el-col>
              </el-row>
              <el-row>
              <el-col :offset="2">
                <div class="rank">
                  <el-tag effect="dark" size="mini" v-if="hasRank" class="tags">{{"第"+rank+"名"}}</el-tag>
                  <el-tag effect="dark" size="mini" v-if="hasScore" class="tags">{{score+"分"}}</el-tag>
                  </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :offset="2">
                <div class="address">
                  <i class="el-icon-location-outline"></i>
                  {{address}}
                  </div>
              </el-col>
            </el-row>
        </div>
      </div>
    </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      default: "加载中……",
    },
    city: {
      default: "",
    },
    address:{
      default:"暂无地址",
    }
  },
  data() {
    return {
      loading:false,
      imgsrc: "",
      rank: "",
      score:"",
      hasRank:false,
      hasScore:false,
      description: "加载中",
      shadow: "hover",
      isClick: false,
      choose:"点击选择",
      buttontype:"primary",
    };
  },
  methods: {
    exchange(){
      if(this.isClick){
        this.isClick = false;
        this.choose = "点击选择";
        this.buttontype = "primary";
      }else{
        this.isClick=true;
        this.choose="取消选择";
        this.buttontype="danger";
      }
    },
    getInfos() {
      this.loading=true;
      this.$axios({
        method: "get",
        url: "http://127.0.0.1:8000/api/getSpotsInfo",
        params: {
          city: this.city,
          name: this.name,
        },
      })
        .then((res) => {
          // console.log(res.data.results); //在console中看到数据
          var array = res.data.data;
    this.loading=false;
          if (array == undefined || array.length <= 0) {
            console.log("no");
          } else {
            this.imgsrc = array.imgsrc;
            this.rank = array.rank;
            this.score = array.score;
    if(this.rank&&this.rank!=0){
      this.hasRank=true;
    }
    if(this.score&&this.score!="0.0"){
      this.hasScore=true;
    }
            this.description = array.description;
          }
        })
        .catch((res) => {
          // alert("出错了！");
        });
    },

  },
  watch:{
    address:'getInfos'
  },
  mounted() {
    this.loading=true;
    this.getInfos();
  },
};
</script>
<style scoped>
.lists {
  height: 180px;
  width: 1000px;
  display: flex;
  margin-top: 10px;
  justify-content: center;
  background-color: #fff;
}
.item {
  height: 180px;
  width: 100%;
  color: #333;
  display: flex;
  text-decoration: none;
  border: 1px solid #eee;
  transition: all 0.5s;
}
.item_pic {
  display: -webkit-box;

  -webkit-box-align: center;

  -webkit-box-pack: center;
  width: 160px;
  height: 160px;
  margin-left: 5%;
  margin-bottom: 10px;
  overflow: hidden;
}
.item_pic~.item_pic{
 margin-left: 15px;
}
.img{
 transition: all 0.5s;
}
.img:hover{
  transform: scale(1.1);
}
.item:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.item_content {
  margin-top: 3%;
  width: 80%;
  justify-content: left;
}
.name {
  font-size: 30px;
  font-weight: bold;
  text-align: left;
  color: rgba(46, 45, 45, 0.815);
}
.rank {
  margin-top: 1%;
  text-align: left;
  color: rgba(46, 45, 45, 0.815);
}
.tags{
  margin-left: 3px;
}
.des {
  margin-top: 2%;
  text-align: left;
}
.address {
  margin-top: 1%;
  text-align: left;
  color: rgba(46, 45, 45, 0.815);
}
.selectitem {
  color: #333;
  display: flex;
  text-decoration: none;
  transition: all 0.5s;
  border: 2px solid blue;
}
.selectitem .item_pic {
  width: 20%;
  overflow: hidden;
}
</style>