<template>
  <div class="outlist">
    <div v-for="(item, index) in list_arr" :key="index + 1100" class="list">
      <p :class="item.prop && item.prop == 'title' ? 'service_title' : ''">
        <span class="line" v-if="item.prop && item.prop == 'title'"></span>
        {{ item.title }}
      </p>
      <p v-if="!(item.prop && item.prop == 'title')">
        <span v-if="item.type == 'url'" style="white-space:pre-wrap;"
          >访问地址: <a :href="item.info" target="_blank">{{ item.info }}</a></span
        >
        <span v-else v-html="item.info" style="white-space:pre-wrap;"></span>
        <span v-if="item.type && item.type == 'down'" class="filebtn" @click="download(item.url)"
          >下载文件</span
        >
      </p>
      <slot
        v-if="item.type && item.type == 'solt'"
        :name="item.solt_name"
      ></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["list_arr"],
  mounted() {
    console.log(this.$slots);
  },
  methods:{
      download(val){
          // this.$emit('download',val)
          console.log(val);
      }
  }
};
</script>

<style scoped>
a {
  text-decoration: none;
}
.list p {
  line-height: 32px;
  color: #8890a7;
}
.list {
  margin-bottom: 20px;
}
.list p:nth-of-type(2) {
  color: #242c43;
}
.outlist .list:nth-last-of-type(1) {
  margin: 0;
}
.list .service_title {
  font-size: 16px;
  font-weight: bold;
  color: #58617a;
  text-align: left;
  height: 40px;
  line-height: 34px;
  margin-top: -10px;
  margin-bottom: 20px;
  margin-left: -10px;
}
.service_title span {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  float: left;
  margin-top: 9px;
  margin-right: 15px;
}
.filebtn {
  width: 76px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #e6ebfe;
  background-color: #515fe7;
  border-radius: 8px;
  display: inline-block;
  font-size: 14px;
  margin-left: 20px;
  cursor: pointer;
}
</style>
