104 lines
2.1 KiB
Vue
104 lines
2.1 KiB
Vue
<template>
|
|
<div class="infocard-page">
|
|
<!-- 题头 -->
|
|
<div class="title">{{data.title}}</div>
|
|
<div class="time">{{show_time}}</div>
|
|
<!-- 内容 -->
|
|
<div class="content-text">{{data.content}}</div>
|
|
<div class="content-imgs-box" v-if="data.img_url != 'no_img.png'">
|
|
<div class="img-warp">
|
|
<img :src="imgaddr" alt/>
|
|
</div>
|
|
</div>
|
|
<div class="addr-box">
|
|
<div class="addr" style="color: #409EFF;background: #d9ecff;">{{data.total_addr}}</div>
|
|
<div class="addr" style="color: #67C23A;background: #e1f3d8;">{{data.detail_addr}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { formatDateTime } from "@/lib/utils.js";
|
|
export default {
|
|
name: "infocard",
|
|
props: ["data"],
|
|
data: () => {
|
|
return {
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
imgaddr: function() {
|
|
return "https://coc.powerrain.cn/api/" + "photo/show/" + this.data.img_url
|
|
},
|
|
show_time:function() {
|
|
return formatDateTime(new Date(parseInt(this.data.create_time)));
|
|
},
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
created() {
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss" type="text/scss">
|
|
@import "../style/main";
|
|
.infocard-page {
|
|
/* border-bottom: 0.3rem #eee solid;
|
|
padding: 0.5rem 0.4rem; */
|
|
margin: .5rem .4rem;
|
|
border: 1px solid #eee;
|
|
padding: .3rem .3rem 0 .3rem;
|
|
border-radius: .1rem;
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
background: #fff;
|
|
}
|
|
.title {
|
|
font-size: .5rem;
|
|
font-weight: 600;
|
|
margin: 0.3rem 0;
|
|
text-align: left;
|
|
}
|
|
.time {
|
|
font-size: 0.3rem;
|
|
text-align: left;
|
|
color: #909399;
|
|
height: 0.3rem;
|
|
line-height: 0.3rem;
|
|
}
|
|
.content-text {
|
|
font-size: 0.4rem;
|
|
text-align: left;
|
|
// text-indent: 1rem;
|
|
margin: 0.3rem 0;
|
|
}
|
|
|
|
.content-imgs-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.content-imgs-box img {
|
|
display: block;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.addr-box {
|
|
height: 1rem;
|
|
margin: 0.1rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.addr-box .addr {
|
|
font-size: 0.3rem;
|
|
padding: 0.1rem 0.2rem;
|
|
background: red;
|
|
margin-right: 0.1rem;
|
|
}
|
|
</style> |