直播带货

pages/index/index.vue

@@ -122,7 +122,7 @@
                         <span>知识库</span>
                     </li>
                     <li>
-                        <view class="lvxd"><em class="iconfont icon-zhibo"></em></view>
+                        <view class="lvxd"><em class="iconfont icon-zhibo" @tap="gozbdh"></em></view>
                         <span>直播带货</span>
                     </li>
                     <li>
@@ -380,7 +380,15 @@ export default {
 			uni.navigateTo({
 				url: '/pages/handleAffairs/handleAffairs'
 			});
-		}
+		},
+		/**
+		 * 跳转直播带货页面
+		 */
+		gozbdh(){
+			uni.navigateTo({
+			    url: '/pages/liveBroadcast/liveBroadcast'
+			});
+		},
     }
 };
 </script>

pages/liveBroadcast/liveBroadcast.css

@@ -0,0 +1,103 @@
+/* pages/wenda/wenda.wxss */
+.wendaFL {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0 0 0;
+}
+.wendaFL li {
+    width: 48%;
+    height: 168rpx;
+    position: relative;
+}
+.lbBj {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+}
+.wendaFL li h2 {
+    font-size: 36rpx;
+    position: absolute;
+    left: 30rpx;
+    top: 40rpx;
+    z-index: 1;
+    font-weight: bold;
+}
+.wendaFL li span {
+    font-size: 30rpx;
+    position: absolute;
+    left: 30rpx;
+    top: 88rpx;
+    z-index: 1;
+}
+.wendaFL li.sanNong {
+    color: #0d9970;
+}
+.wendaFL li.jiuYe {
+    color: #1e8fb4;
+}
+.wendaFL li.faLv {
+    color: #1e5dab;
+}
+.wendaFL li.jiuZhen {
+    color: #4a700d;
+}
+/* 列表 */
+.rnwdList {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 20rpx 0;
+}
+.list {
+    width: 79%;
+}
+.lb {
+    background: #0d9970;
+    color: #fff;
+    font-size: 24rpx;
+    width: 12%;
+    text-align: center;
+    padding: 2rpx 0;
+    line-height: 40rpx;
+    height: 40rpx;
+    border-radius: 10rpx;
+}
+.listTitle {
+    font-size: 32rpx;
+    color: #333;
+    line-height: 40rpx;
+}
+.jlSj {
+    height: 40rpx;
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    margin: 20rpx 0 0 0;
+}
+.jf {
+    color: #07c160;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+}
+.icon-pinglun,
+.icon-chakan,
+.icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+}
+.icon-xiangyoujiantou {
+    font-size: 30rpx;
+    color: #c4c4c4;
+    line-height: 60rpx;
+}

pages/liveBroadcast/liveBroadcast.vue

@@ -0,0 +1,86 @@
+<template>
+	<!-- 直播带货列表 -->
+	<view>
+		<view class="rnwdList" @tap="goDetails" v-for="(item, index) in dataSource" :key="index">
+			<span class="lb">{{ item.type }}</span>
+
+			<view class="list">
+				<span class="listTitle">{{ item.title }}</span>
+				<view class="jlSj">
+					<span class="jf">
+						{{ item.jf }}
+						<em class="iconfont icon-jifen"></em>
+					</span>
+					<view class="ck">
+						<span>
+							<em class="iconfont icon-pinglun"></em>
+							{{ item.pl }}
+						</span>
+						<span>
+							<em class="iconfont icon-chakan"></em>
+							{{ item.ck }}
+						</span>
+						<span>
+							<em class="iconfont icon-shoucang"></em>
+							{{ item.dz }}
+						</span>
+					</view>
+				</view>
+			</view>
+
+			<em class="iconfont icon-xiangyoujiantou"></em>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dataSource: [{
+						ck: '10',
+						dz: '120',
+						id: 1,
+						jf: '100',
+						pl: '10',
+						title: '探索乡村能源供给新模式',
+						type: '三农'
+					},
+					{
+						ck: '20',
+						dz: '220',
+						id: 2,
+						jf: '200',
+						pl: '20',
+						title: '探索乡村能源供给新模式 美丽新画卷',
+						type: '三农'
+					},
+					{
+						ck: '30',
+						dz: '30',
+						id: 3,
+						jf: '300',
+						pl: '30',
+						title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷',
+						type: '三农'
+					}
+				]
+			}
+		},
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		onLoad(options) {},
+		methods: {
+			goDetails() {
+			    uni.navigateTo({
+			        url: '/pages/liveBroadcastDetails/liveBroadcastDetails'
+			    });
+			},
+		}
+	}
+</script>
+
+<style>
+	@import './liveBroadcast.css';
+</style>

pages/liveBroadcastDetails/liveBroadcastDetails.css

@@ -0,0 +1,160 @@
+/* pages/wenbaxiangqing.wxss */
+.title {
+    font-size: 44rpx;
+    text-align: center;
+    line-height: 70rpx;
+    color: #333;
+    margin: 30rpx 0;
+}
+.wenzhangLy {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 14rpx 0;
+}
+.txTime {
+    display: flex;
+    flex-direction: row;
+}
+.txTime image {
+    width: 80rpx;
+    height: 80rpx;
+}
+.time {
+    display: flex;
+    flex-direction: column;
+    padding: 10rpx 0 0 8px;
+}
+.time p {
+    font-size: 28rpx;
+    color: #9c9c9c;
+}
+.time span {
+    font-size: 24rpx;
+    color: #c4c4c4;
+}
+
+.jf {
+    color: #07c160;
+    line-height: 80rpx;
+    font-size: 24rpx;
+}
+.icon-jifen {
+    font-size: 28rpx;
+    color: #07c160;
+    margin: 0 0 0 6rpx;
+}
+.ck {
+    color: #c4c4c4;
+    font-size: 28rpx;
+}
+.icon-pinglun,
+.icon-chakan,
+.ck .icon-shoucang {
+    font-size: 28rpx;
+    margin: 0 6rpx 0 20rpx;
+    color: #c4c4c4;
+    line-height: 0;
+}
+.wenzhangCont {
+    font-size: 34rpx;
+    margin: 30rpx 0;
+}
+.wenzhangCont image {
+    width: 100%;
+    height: 320rpx;
+    margin: 20rpx auto;
+}
+.pinglunTj {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin: 30rpx 0;
+}
+.pinglunTitle {
+    font-size: 34rpx;
+    color: #2e2e2e;
+    font-weight: 600;
+}
+.pinglunTitle em {
+    font-size: 34rpx;
+    color: #9b9b9b;
+    font-weight: normal;
+    margin: 0 0 0 10rpx;
+}
+.pinglunList {
+    width: 100%;
+    padding: 0 0 120rpx 0;
+}
+.pinglunList li {
+    margin: 20rpx 0;
+    border-bottom: solid 2rpx #e8e8e8;
+    padding: 0 0 20rpx 0;
+    display: flex;
+    flex-direction: column;
+}
+.plListcont {
+    font-size: 30rpx;
+    color: #696868;
+    margin: 20rpx 0;
+}
+.pinglunList li button {
+    width: 80%;
+    border-radius: 10rpx;
+    background: #07c160;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: normal;
+    margin: 16rpx auto;
+}
+.fabiaoPl {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 112rpx;
+    background: #e8e8e8;
+    box-shadow: 0rpx 0rpx 16rpx #999;
+}
+.shuRu {
+    width: 72%;
+    display: flex;
+    flex-direction: row;
+    height: 76rpx;
+    background: #e0e0e0;
+    border-radius: 60rpx;
+    margin: 20rpx 0 0 20rpx;
+}
+.shuRu input {
+    line-height: 38px;
+    height: 76rpx;
+    font-size: 30rpx;
+    width: 83%;
+}
+.icon-bianji {
+    font-size: 38rpx;
+    line-height: 76rpx;
+    margin: 0 10rpx 0 20rpx;
+    color: #828181;
+}
+.icon-shoucang {
+    font-size: 50rpx;
+    line-height: 112rpx;
+    color: #828181;
+}
+.fasong {
+    width: 58rpx;
+    height: 58rpx;
+    border-radius: 50rpx;
+    background: #07c160;
+    margin: 26rpx 20rpx 0 10rpx;
+    text-align: center;
+    line-height: 58rpx;
+}
+.icon-fasong {
+    font-size: 40rpx;
+    color: #fff;
+}