feat: 首次提交
This commit is contained in:
peerless_hero
39
pages/layout/newsList/index.js
Normal file
39
pages/layout/newsList/index.js
Normal file
@ -0,0 +1,39 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 1 4072 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
export default [{
|
||||
id:1,
|
||||
title:'这座中亚古城为何引起总书记的关注',
|
||||
isTop:true,
|
||||
source:'人民日报',
|
||||
comment:1855,
|
||||
imageList:['https://res.firstui.cn/static/images/component/waterfall/P_001.jpeg']
|
||||
//...
|
||||
},{
|
||||
|
||||
id:2,
|
||||
title:'纳米时栅用时间测量空间',
|
||||
isTop:true,
|
||||
source:'金台资讯',
|
||||
comment:2112,
|
||||
imageList:['https://res.firstui.cn/static/images/component/waterfall/P_004.jpeg']
|
||||
},{
|
||||
id:3,
|
||||
title:'羊了个羊山东排第一，山东游戏大省实锤了',
|
||||
isTop:false,
|
||||
source:'直播德州',
|
||||
comment:261,
|
||||
imageList:['https://res.firstui.cn/static/images/component/waterfall/P_002.jpeg','https://res.firstui.cn/static/images/component/waterfall/P_003.jpeg']
|
||||
},{
|
||||
id:4,
|
||||
title:'早上空腹喝水，危害大过不吃早餐？忠告：3种水，不建议空腹喝',
|
||||
isTop:false,
|
||||
source:'康复科刘医师',
|
||||
comment:1204,
|
||||
imageList:['https://res.firstui.cn/static/images/component/waterfall/P_009.jpeg','https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg']
|
||||
},{
|
||||
id:5,
|
||||
title:'提起蒙古国，很多人的心中都会生起一种难以言说的痛。156万多平方公里、跟新疆差不多大的一块肥沃土地，说没就没了',
|
||||
isTop:false,
|
||||
source:'直播德州',
|
||||
comment:135,
|
||||
imageList:['https://res.firstui.cn/static/images/component/waterfall/P_001.jpeg','https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg','https://res.firstui.cn/static/images/component/waterfall/P_005.jpeg']
|
||||
}]
|
||||
122
pages/layout/newsList/newsList.nvue
Normal file
122
pages/layout/newsList/newsList.nvue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-align__center" @tap="vip">
|
||||
<text class="fui-page__title">NewsList</text>
|
||||
<image src="/static/images/index/light/icon_member_3x.png" class="fui-vip__icon"></image>
|
||||
</view>
|
||||
<text class="fui-page__desc">新闻列表，常用的页面布局，可提升开发效率以及带来舒服的视觉效果！</text>
|
||||
</view>
|
||||
<view class="fui-page__bd">
|
||||
<text class="fui-section__title">标题列表</text>
|
||||
<view class="fui-news__list">
|
||||
<view class="fui-news__item" v-for="(item,index) in newsList" :key="index">
|
||||
<fui-overflow-hidden :text="item.title" :size="36" :rows="1"></fui-overflow-hidden>
|
||||
<view class="fui-news__info">
|
||||
<fui-text v-if="item.isTop" :padding="['0','20rpx','0','0']" text="置顶" :size="25"
|
||||
color="#FF2B2B"></fui-text>
|
||||
<fui-text :padding="['0','20rpx','0','0']" :text="item.source" :size="25" color="#7F7F7F">
|
||||
</fui-text>
|
||||
<fui-text :text="`${item.comment}评论`" :size="25" color="#7F7F7F"></fui-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="fui-section__title">带图片列表</text>
|
||||
<view class="fui-news__list">
|
||||
<fui-list :topBorder="false" bottomBorder bottomLeft="32" bottomRight="32"
|
||||
v-for="(item,index) in newsList" :key="index">
|
||||
<view class="fui-news__item">
|
||||
<fui-overflow-hidden :text="item.title" :size="36" :rows="3"></fui-overflow-hidden>
|
||||
<view class="fui-image__list" v-if="item.imageList && item.imageList.length">
|
||||
<fui-lazyload :src="src" v-for="(src,idx) in item.imageList" :key="idx"
|
||||
:width="item.imageList.length>1?200:400" :height="item.imageList.length>1?200:0"
|
||||
marginRight="20" mode="aspectFill"></fui-lazyload>
|
||||
</view>
|
||||
<view class="fui-news__info">
|
||||
<fui-text v-if="item.isTop" :padding="['0','20rpx','0','0']" text="置顶" :size="25"
|
||||
color="#FF2B2B"></fui-text>
|
||||
<fui-text :padding="['0','20rpx','0','0']" :text="item.source" :size="25" color="#7F7F7F">
|
||||
</fui-text>
|
||||
<fui-text :text="`${item.comment}评论`" :size="25" color="#7F7F7F"></fui-text>
|
||||
</view>
|
||||
</view>
|
||||
</fui-list>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import newsList from './index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
newsList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
const url = "/pages/my/qa/qa?index=2&title=VIP专属内容"
|
||||
uni.fui.href(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-align__center {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.fui-section__title {
|
||||
margin-left: 32rpx;
|
||||
/* #ifdef APP-NVUE */
|
||||
margin-top: 64rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/*
|
||||
新闻列表 css
|
||||
*/
|
||||
|
||||
.fui-news__item {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
padding: 20rpx 32rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.fui-news__item:active {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.fui-image__list {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.fui-news__info {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
transform: scale(0.8);
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user