12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <template>
- <view class="news-item" @click="onClickDetail(item)">
- <view class="news-title">{{ item.title }}</view>
- <view class="news-time">{{ formatDate(item.publish_time || item.pub_date) }}</view>
- <view class="news-summary">
- <view class="text">{{ item.content || item.description }}</view>
- <view class="to-detail"><view>了解详情</view> <view class="arrow iconfont icon-right-s"></view></view>
- </view>
- </view>
- </template>
- <script>
- import { link } from '@/utils/request'
- export default {
- components: {
- },
- props: {
- type: String,
- item: Object
- },
- data() {
- return {
- websiteUrl: process.env.WEBSITE
- }
- },
- created() {
- },
- methods: {
- formatDate(dateString) {
- const date = new Date(dateString);
- const year = date.getFullYear();
- const month = date.getMonth() + 1;
- const day = date.getDate();
- return `${year}年${month}月${day}日`;
- },
- onClickDetail(item) {
- if (this.type === 'exhibitor') {
- this.navigateTo(link('/' + item.urla))
- } else {
- this.navigateTo(this.websiteUrl + '/' + item.urla)
- }
- }
- }
- }
- </script>
- <style lang="scss">
- .news-item{
- display: flex;
- flex-direction: column;
- height: 210rpx;
- background-color: #F6F6F6;
- border-radius: 10rpx;
- padding: 24rpx 30rpx;
- }
- .news-summary{
- display: flex;
- align-items: center;
- }
- .news-title{
- @include text-ellipsis-line;
- font-family: Arial, Arial;
- font-weight: bold;
- font-size: $fontSize3;
- line-height: 35rpx;
- }
- .news-time{
- font-size: $fontSize0;
- color: #555555;
- margin: 12rpx 0;
- }
- .news-summary{
- font-size: $fontSize1;
- line-height: 25rpx;
- .text{
- padding-right: 30rpx;
- color: #555555;
- @include text-ellipsis-line;
- -webkit-line-clamp: 2;
- }
- .to-detail{
- display: flex;
- align-items: center;
- flex-shrink: 0;
- color: $buttonPrimaryColor;
- font-size: 16rpx;
- font-weight: bold;
- padding: 0 24rpx;
- }
- .arrow{
- margin-left: 12rpx;
- font-size: $fontSize0;
- }
- }
- </style>
|