增加商品列表 视频列表 文章列表等样式代码

Signed-off-by: YangWork <yang@xixingwl.cn>

App.vue

@@ -130,6 +130,8 @@
 
 	.warp {
 		margin: 10rpx 15rpx;
+		
+		background: linear-gradient(to bottom right, pink, #a900ff7a, pink);
 	}
 
 	.Grid {
@@ -141,6 +143,7 @@
 		border-radius: 15rpx;
 		padding-top: 10rpx;
 		padding-bottom: 10rpx;
+		background-color: transparent;
 
 		.Grid-Item {
 			width: 25%;

common/uni-ui.scss

@@ -0,0 +1,120 @@
+
+.uni-flex {
+	display: flex;
+}
+
+.uni-flex-row {
+	@extend .uni-flex;
+	flex-direction: row;
+	box-sizing: border-box;
+}
+
+.uni-flex-column {
+	@extend .uni-flex;
+	flex-direction: column;
+}
+
+.uni-color-gary {
+	color: #3b4144;
+}
+
+/* 标题 */
+.uni-title {
+	display: flex;
+	margin-bottom: $uni-spacing-col-base;
+	font-size: $uni-font-size-lg;
+	font-weight: bold;
+	color: #3b4144;
+}
+
+.uni-title-sub {
+	display: flex;
+	// margin-bottom: $uni-spacing-col-base;
+	font-size: $uni-font-size-base;
+	font-weight: 500;
+	color: #3b4144;
+}
+
+/* 描述 额外文本 */
+.uni-note {
+	margin-top: 10px;
+	color: #999;
+	font-size: $uni-font-size-sm;
+}
+
+/* 列表内容 */
+.uni-list-box {
+	@extend .uni-flex-row;
+	flex: 1;
+	margin-top: 10px;
+}
+
+/* 略缩图 */
+.uni-thumb {
+	flex-shrink: 0;
+	margin-right: $uni-spacing-row-base;
+	width: 125px;
+	height: 75px;
+	border-radius: $uni-border-radius-lg;
+	overflow: hidden;
+	border: 1px #f5f5f5 solid;
+	image {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.uni-media-box {
+	@extend .uni-flex-row;
+	// margin-bottom: $uni-spacing-col-base;
+	border-radius: $uni-border-radius-lg;
+	overflow: hidden;
+	.uni-thumb {
+		margin: 0;
+		margin-left: 4px;
+		flex-shrink: 1;
+		width: 33%;
+		border-radius:0;
+		&:first-child {
+			margin: 0;
+		}
+	}
+}
+
+/* 内容 */
+.uni-content {
+	@extend .uni-flex-column;
+	justify-content: space-between;
+}
+
+/* 列表footer */
+.uni-footer {
+	@extend .uni-flex-row;
+	justify-content: space-between;
+	margin-top: $uni-spacing-col-lg;
+}
+.uni-footer-text {
+	font-size: $uni-font-size-sm;
+	color: $uni-text-color-grey;
+	margin-left: 5px;
+}
+
+/* 标签 */
+
+.uni-tag {
+	flex-shrink: 0;
+	padding: 0 5px;
+	border: 1px $uni-border-color solid;
+	margin-right: $uni-spacing-row-sm;
+	border-radius: $uni-border-radius-base;
+	background: $uni-bg-color-grey;
+	color: $uni-text-color;
+	font-size: $uni-font-size-sm;
+}
+
+/* 链接 */
+.uni-link {
+	margin-left: 10px;
+	color: $uni-text-color;
+	text-decoration: underline;
+}

pages.json

@@ -12,7 +12,8 @@
 			"path": "pages/tabbar/home/home",
 			"style": {
 				"navigationBarTitleText": "主页",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
 			}
 		},{
             "path" : "pages/tabbar/videos/videos",
@@ -75,7 +76,11 @@
 				"navigationStyle": "custom"
 			}
 		}]
-	}],
+	},{
+		"root": "cpzs",
+		"pages": []
+	}
+	],
 	"tabBar": {
 		
 		"list": [{

pages/tabbar/dynamics/dynamics.vue

@@ -1,22 +1,302 @@
 <template>
 	<view>
+		<uni-list>
+			<uni-list>
+				<!-- 垂直排列，略缩图显示大图 -->
+				<uni-list-item direction="column" note="Dcloud 128评论 21 赞">
+					<template v-slot:header>
+						<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
+						<view class="uni-thumb uni-content list-picture">
+							<image src="/static/logo.png" mode="aspectFill"></image>
+						</view>
+					</template>
+				</uni-list-item>
+				<!-- 垂直排列，图文混排 -->
+				<uni-list-item direction="column">
+					<template v-slot:header>
+						<view class="uni-title">垂直排列的图文混排列表，内容通过 body 插槽实现，底部通过 footer 插槽实现完全自定样式</view>
+					</template>
+					<template v-slot:body>
+						<view class="uni-list-box">
+							<view class="uni-thumb">
+								<image src="/static/logo.png" mode="aspectFill"></image>
+							</view>
+							<view class="uni-content">
+								<view class="uni-title-sub uni-ellipsis-2">这里是列表的副标题，最多可以显示两行，多余文字会隐藏并显示省略号</view>
+								<view class="uni-note">Dcloud 128评论 21 赞</view>
+							</view>
+						</view>
+					</template>
+					<template v-slot:footer>
+						<view class="uni-footer">
+							<text class="uni-footer-text">评论</text>
+							<text class="uni-footer-text">点赞</text>
+							<text class="uni-footer-text">分享</text>
+						</view>
+					</template>
+				</uni-list-item>
+				<!-- 垂直排列，略缩图显示多图 -->
+				<uni-list-item direction="column" title="" note="Dcloud 128评论 21 赞">
+					<template v-slot:header>
+						<view class="uni-title">垂直排列的多图列表，多图通过 body 插槽实现完全自定样式</view>
+					</template>
+					<template v-slot:body>
+						<view class="content uni-media-box">
+							<image v-for="img in 3" :key="img" class="uni-thumb" src="/static/logo.png"
+								mode="aspectFill"></image>
+						</view>
+					</template>
 
+					<template v-slot:footer>
+						<view class="uni-footer">
+							<text class="uni-footer-text">评论</text>
+							<text class="uni-footer-text">点赞</text>
+							<text class="uni-footer-text">分享</text>
+						</view>
+					</template>
+				</uni-list-item>
+				<!-- 水平排列，左图右文 -->
+				<uni-list-item title="水平排列的左图右文列表，图片通过 header 插槽完全自定义" note="Dcloud 128评论 21 赞">
+					<template v-slot:header>
+						<view class="uni-thumb">
+							<image src="/static/logo.png" mode="aspectFill"></image>
+						</view>
+					</template>
+				</uni-list-item>
+				<!-- 水平排列，右图左文 -->
+				<uni-list-item title="水平排列的右图左文列表，图片通过 footer 插槽完全自定义" note="Dcloud 128评论 21 赞">
+					<template v-slot:footer>
+						<view class="uni-thumb" style="margin: 0;">
+							<image src="/static/logo.png" mode="aspectFill"></image>
+						</view>
+					</template>
+				</uni-list-item>
+				<!-- 垂直排列，无略缩图，主标题+副标题显示 -->
+				<uni-list-item direction="column">
+					<template v-slot:header>
+						<view class="uni-title">垂直排列的无图列表，现在主标题+副标题</view>
+					</template>
+					<template v-slot:body>
+						<view class="uni-list-box">
+							<view class="uni-content">
+								<view class="uni-title-sub uni-ellipsis-2">这里是副标题 ，一般显示详情概览</view>
+								<view class="uni-note">Dcloud 128评论 21 赞</view>
+							</view>
+						</view>
+					</template>
+					<template v-slot:footer>
+						<view class="uni-footer">
+							<text class="uni-footer-text">评论</text>
+							<text class="uni-footer-text">点赞</text>
+							<text class="uni-footer-text">分享</text>
+						</view>
+					</template>
+				</uni-list-item>
+			</uni-list>
+		</uni-list>
+		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
+		<!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->
 	</view>
 </template>
 
 <script>
+	// mode = 1 垂直排列，略缩图显示大图
+	// mode = 2 垂直排列，图文混排
+	// mode = 3 垂直排列，略缩图显示多图
+	// mode = 4 水平排列，左图右文
+	// mode = 5 水平排列，右图左文
+	// mode = 6 垂直排列，无略缩图，主标题+副标题显示
 	export default {
+		components: {},
 		data() {
 			return {
-				
+				// // 数据表名
-			}
+				// collection: 'opendb-news-articles',
+				// // 查询字段，多个字段用 , 分割
+				// field: '_id,mode,avatar,title,user_name,excerpt,last_modify_date',
+				formData: {
+					status: 'loading' // 加载状态
 				},
+				tipShow: false, // 是否显示顶部提示框
+				lists: [{
+						"id": 121375,
+						"post_id": "5310910",
+						"title": "为什么自动驾驶诉讼不断？",
+						"author_name": "未来汽车日报",
+						"cover": "https://img.36krcdn.com/20200411/v2_f497b1c414d5489791569b3ea99df33d_img_000",
+						"published_at": "2020-04-11 17:07:48",
+						"content": "",
+						"mode": 1
+					},
+					{
+						"id": 121374,
+						"post_id": "5310906",
+						"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
+						"author_name": "36氪深度服务",
+						"cover": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
+						"published_at": "2020-04-11 16:59:15",
+						"content": "",
+						"mode": 2
+					},
+					{
+						"id": 121373,
+						"post_id": "5310903",
+						"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
+						"author_name": "未来汽车日报",
+						"cover": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
+						"published_at": "2020-04-11 16:09:09",
+						"content": "",
+						"mode": 3
+					},
+					{
+						"id": 121372,
+						"post_id": "5310813",
+						"title": "救命呼吸机缺口难补！一文扒开供应链真相",
+						"author_name": "智东西",
+						"cover": "https://img.36krcdn.com/20200410/v2_86bbf8245f754be79f3386a82b385093_img_000",
+						"published_at": "2020-04-11 15:40:02",
+						"content": "",
+						"mode": 4
+					},
+					{
+						"id": 121371,
+						"post_id": "5309573",
+						"title": "每月节省32%的开支，我是怎么做到的？",
+						"author_name": "神译局",
+						"cover": "https://img.36krcdn.com/20200408/v2_c67c3edfe4b5446992b32fad93a44a75_img_png",
+						"published_at": "2020-04-11 14:48:02",
+						"content": "",
+						"mode": 5
+					},
+					{
+						"id": 121369,
+						"post_id": "5310859",
+						"title": "瓜子坚果双增长，但洽洽并不能高枕无忧",
+						"author_name": "资本侦探",
+						"cover": "https://img.36krcdn.com/20200411/v2_2204c6132432403184e43df22485545e_img_000?x-oss-process=image/resize,m_mfit,w_432,h_288/crop,w_432,h_288,g_center",
+						"published_at": "2020-04-11 14:23:00",
+						"content": "",
+						"mode": 6
+					},
+					{
+						"id": 121367,
+						"post_id": "5309137",
+						"title": "克服危机和压力，精神力量强大的人都有这5个习惯",
+						"author_name": "神译局",
+						"cover": "https://img.36krcdn.com/20200406/v2_d2c6a686b4074a1eb43603e67d6ba204_img_png",
+						"published_at": "2020-04-11 13:47:01",
+						"content": "",
+						"mode": 1
+					},
+					{
+						"id": 121365,
+						"post_id": "5310864",
+						"title": "神州租车找爹记",
+						"author_name": "PingWest品玩",
+						"cover": "https://img.36krcdn.com/20200411/v2_f497b1c414d5489791569b3ea99df33d_img_000",
+						"published_at": "2020-04-11 13:39:00",
+						"content": "",
+						"mode": 1
+					}
+				]
+			};
+		},
+		onLoad() {},
 		methods: {
 
+			load(data, ended) {
+				if (ended) {
+					this.formData.status = 'noMore'
 				}
 			}
+		},
+		/**
+		 * 下拉刷新回调函数
+		 */
+		onPullDownRefresh() {
+			this.formData.status = 'more'
+			this.$refs.udb.loadData({
+				clear: true
+			}, () => {
+				this.tipShow = true
+				clearTimeout(this.timer)
+				this.timer = setTimeout(() => {
+					this.tipShow = false
+				}, 1000)
+				uni.stopPullDownRefresh()
+			})
+		},
+		/**
+		 * 上拉加载回调函数
+		 */
+		onReachBottom() {
+
+		}
+	};
 </script>
 
-<style>
 
+<style lang="scss">
+	@import '@/common/uni-ui.scss';
+
+	page {
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		background-color: #efeff4;
+		min-height: 100%;
+		height: auto;
+	}
+
+	.tips {
+		color: #67c23a;
+		font-size: 14px;
+		line-height: 40px;
+		text-align: center;
+		background-color: #f0f9eb;
+		height: 0;
+		opacity: 0;
+		transform: translateY(-100%);
+		transition: all 0.3s;
+	}
+
+	.tips-ani {
+		transform: translateY(0);
+		height: 40px;
+		opacity: 1;
+	}
+
+	.content {
+		width: 100%;
+		display: flex;
+	}
+
+	.list-picture {
+		width: 100%;
+		height: 145px;
+	}
+
+	.thumb-image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.ellipsis {
+		display: flex;
+		overflow: hidden;
+	}
+
+	.uni-ellipsis-1 {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.uni-ellipsis-2 {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
 </style>

pages/tabbar/messages/messages.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<uni-nav-bar fixed="true">
+		<uni-nav-bar fixed="true" statusBar="true">
 			<block slot="left">
 				<view class="city">
 					<view>

pages/tabbar/my/my.vue

@@ -2,14 +2,13 @@
 	<view> 
 		<view class="warp warp1" style="">
 			<view class="user" style="">
-				<image class="user-avatar" mode="aspectFit" :src="userInfo.avatar"
-					style="background-image: ../../../static/avatar.png;"></image>
 				<view class="user-info">
-					<h2> {{userInfo.nickname}} </h2>
+					<text class="nickname"> {{userInfo.nickname}} </text>
 					<text> UID {{userInfo.uid}}</text> 
-					<text> {{userInfo.account}}</text>
 					<text> 云深不知归处，爱你不会迷路</text>
 				</view>
+				<image class="user-avatar" mode="aspectFit" :src="userInfo.avatar"
+					style="background-image: ../../../static/avatar.png;"></image>
 			</view>
 			<view style="padding: 10rpx;"></view>
 			<view class="Grid">
@@ -41,9 +40,6 @@
 
 			<view style="padding: 10rpx;"></view>
 			<uni-list style="">
-				<uni-list-item title="列表左侧带略缩图"
-					thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
-					thumb-size="sm" rightText="右侧文字" showArrow></uni-list-item>
 				<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
 					title="列表左侧带扩展图标" clickable showArrow>
 				</uni-list-item>
@@ -119,12 +115,10 @@
 		flex-wrap: wrap;
 		justify-content: flex-start;
 		align-items: center; 
-		padding-top: 180rpx;
+		padding: 180rpx 25rpx 25rpx 15rpx;
 		/* #ifdef H5 */
 		padding-top: 80rpx;
 		/* #endif */ 
-		padding-left: 15rpx;
-		padding-bottom: 25rpx;
 		// background-image: url(/static/user/back.jpg);
 		// background-size: 100% 100%;
 		// background: linear-gradient(pink,#a900ff7a, pink);
@@ -139,7 +133,12 @@
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
-			padding-left: 45rpx;
+			padding-left: 25rpx;
+			
+			.nickname{
+				font-size: 64rpx;
+				font-weight: 48rpx;
+			}
 		}
 	}
 </style>

pages/tabbar/videos/videos.vue

@@ -1,6 +1,82 @@
 <template>
 	<view>
-		
+		<uni-list>
+			<uni-list-item direction="column">
+				<template v-slot:header>
+					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
+					<view class="uni-thumb uni-content list-picture">
+						<image src="/static//user/back.jpg" mode="aspectFill"></image>
+					</view>
+				</template>
+				<template v-slot:footer>
+					<view class="uni-footer">
+						<text class="uni-footer-text">评论</text>
+						<text class="uni-footer-text">点赞</text>
+						<text class="uni-footer-text">分享</text>
+					</view>
+				</template>
+			</uni-list-item>
+			<uni-list-item direction="column">
+				<template v-slot:header>
+					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
+					<view class="uni-thumb uni-content list-picture">
+						<image src="/static//user/back.jpg" mode="aspectFill"></image>
+					</view>
+				</template>
+				<template v-slot:footer>
+					<view class="uni-footer">
+						<text class="uni-footer-text">评论</text>
+						<text class="uni-footer-text">点赞</text>
+						<text class="uni-footer-text">分享</text>
+					</view>
+				</template>
+			</uni-list-item>
+			<uni-list-item direction="column">
+				<template v-slot:header>
+					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
+					<view class="uni-thumb uni-content list-picture">
+						<image src="/static//user/back.jpg" mode="aspectFill"></image>
+					</view>
+				</template>
+				<template v-slot:footer>
+					<view class="uni-footer">
+						<text class="uni-footer-text">评论</text>
+						<text class="uni-footer-text">点赞</text>
+						<text class="uni-footer-text">分享</text>
+					</view>
+				</template>
+			</uni-list-item>
+			<uni-list-item direction="column">
+				<template v-slot:header>
+					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
+					<view class="uni-thumb uni-content list-picture">
+						<image src="/static//user/back.jpg" mode="aspectFill"></image>
+					</view>
+				</template>
+				<template v-slot:footer>
+					<view class="uni-footer">
+						<text class="uni-footer-text">评论</text>
+						<text class="uni-footer-text">点赞</text>
+						<text class="uni-footer-text">分享</text>
+					</view>
+				</template>
+			</uni-list-item>
+			<uni-list-item direction="column">
+				<template v-slot:header>
+					<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
+					<view class="uni-thumb uni-content list-picture">
+						<image src="/static//user/back.jpg" mode="aspectFill"></image>
+					</view>
+				</template>
+				<template v-slot:footer>
+					<view class="uni-footer">
+						<text class="uni-footer-text">评论</text>
+						<text class="uni-footer-text">点赞</text>
+						<text class="uni-footer-text">分享</text>
+					</view>
+				</template>
+			</uni-list-item>
+		</uni-list>
 	</view>
 </template>
 
@@ -17,6 +93,67 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
+	@import '@/common/uni-ui.scss';
 
+	page {
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		background-color: #efeff4;
+		min-height: 100%;
+		height: auto;
+	}
+
+	.tips {
+		color: #67c23a;
+		font-size: 14px;
+		line-height: 40px;
+		text-align: center;
+		background-color: #f0f9eb;
+		height: 0;
+		opacity: 0;
+		transform: translateY(-100%);
+		transition: all 0.3s;
+	}
+
+	.tips-ani {
+		transform: translateY(0);
+		height: 40px;
+		opacity: 1;
+	}
+
+	.content {
+		width: 100%;
+		display: flex;
+	}
+
+	.list-picture {
+		width: 100%;
+		height: 145px;
+	}
+
+	.thumb-image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.ellipsis {
+		display: flex;
+		overflow: hidden;
+	}
+
+	.uni-ellipsis-1 {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.uni-ellipsis-2 {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
 </style>