公告管理

api/index/index.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+// 获取最新消息（首页滚动）
+export function getListToAnnouncement(userId) {
+  return request({
+    url: '/my/announcement/getNewAnnouncement?userId='+userId,
+    method: 'get'
+  })
+}
+
+// 根据公告id获取详情
+export function getDetialisById(annoId){
+	return request({
+		url: '/my/announcement/'+annoId,
+		method: 'get'
+	})
+}
+
+//新增已读记录
+export function announcementReat(query){
+	return request({
+		url: '/my/announcement/readAnnouncement',
+		method: 'post',
+		data: query
+	})
+}
+
+//查询公告列表
+export function getList(query){
+	return request({
+		url: '/my/announcement/list',
+		method: 'get',
+		data: query
+	})
+}

pages.json

@@ -98,6 +98,24 @@
 			}
 		},
 		{
+			"path": "pages/index/announcementDetails",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "公告详情"
+			}
+		},
+		{
+			"path": "pages/index/announcementList",
+			"style": {
+				"usingComponents": {},
+				"navigationBarBackgroundColor": "#07c160",
+				"navigationBarTextStyle": "white",
+				"navigationBarTitleText": "公告列表"
+			}
+		},
+		{
 			"path": "pages/fuwu/fuwu",
 			"style": {
 				"usingComponents": {},

pages/index/announcementDetails.vue

@@ -0,0 +1,89 @@
+<template>
+	<view class="uni-wrap">
+		<uni-section class="mb-10" :title="annoDetail.announcementTitle" :sub-title="subTitle">
+			<view class="uni-common-mt" style="background: #fff; padding: 20rpx">
+				<rich-text :nodes="annoDetail.announcementBody"></rich-text>
+			</view>
+		</uni-section>
+	</view>
+</template>
+
+<script>
+import { getDetialisById, announcementReat } from '@/api/index/index.js';
+
+export default {
+	data() {
+		return {
+			annoDetail: {
+				createBy: null,
+				createTime: '2024-03-04 09:19:49',
+				updateBy: null,
+				updateTime: null,
+				remark: null,
+				id: '2',
+				announcementTitle: '123',
+				announcementBody: '<p><strong>这是内容</strong></p><p><strong><em>真的是内容</em></strong></p><p><strong><em><u>还是内容</u></em></strong></p><p><strong><em><u><span class="ql-cursor">\ufeff</span></u></em></strong><img src="/dev-api/profile/upload/2024/03/04/程序员_20240304091946A002.jpg"></p>',
+				validityStartTime: '2024-03-03',
+				validityEndTime: '2024-03-05',
+				announcementImg: '/profile/upload/2024/03/04/程序员_20240304091901A001.jpg'
+			},
+			queryData:{
+				userId: getApp().globalData.userId,
+				annoId: null,
+			}
+		};
+	},
+	computed: {
+	    subTitle () {
+	      return this.annoDetail.updateBy !== null ? `${this.annoDetail.createTime} - ${this.annoDetail.updateBy}` : `${this.annoDetail.createTime} - ${this.annoDetail.createBy}`
+	    }
+	  },
+	/**
+	 * 生命周期函数--监听页面加载
+	 */
+	onLoad(options) {
+		this.queryData.annoId = options.id
+		this.getDetails(options.id);
+		this.setDataType();
+	},
+	methods: {
+		getDetails(annoId) {
+			getDetialisById(annoId).then((res) => {
+				this.annoDetail = res.data;
+			});
+		},
+		setDataType(){
+			announcementReat(this.queryData).then(res=>{
+				console.log(res.msg)
+			})
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+$uni-success: #18bc37 !default;
+
+.uni-wrap {
+	flex-direction: column;
+	/* #ifdef H5 */
+	height: calc(100vh - 44px);
+	/* #endif */
+	/* #ifndef H5 */
+	height: 100vh;
+	/* #endif */
+	flex: 1;
+}
+
+.mb-10 {
+	margin-bottom: 10px;
+}
+
+.decoration {
+	width: 6px;
+	height: 6px;
+	margin-right: 4px;
+	border-radius: 50%;
+	background-color: $uni-success;
+}
+</style>

pages/index/announcementList.vue

@@ -0,0 +1,105 @@
+<template>
+	<view class="list">
+		<view v-for="(item, index) in list" :key="item.id" class="item">
+			<img :src="loadImgSrc(`${item.announcementImg}`)" class="avatar" />
+			<view class="info" style="height: 10em;">
+				<view class="name" @click="handleNavigate(item)">
+					{{ item.announcementTitle }}
+					<view class="unread-dot" v-if="item.readType == 0"></view>
+				</view>
+			</view>
+			<em class="iconfont icon-xiangyoujiantou" @click="handleNavigate(item)"></em>
+		</view>
+	</view>
+</template>
+
+<script>
+import { getList } from '@/api/index/index.js';
+
+export default {
+	data() {
+		return {
+			queryParam: {
+				pageNum: 1,
+				pageSize: 10,
+				userId: getApp().globalData.userId
+			},
+			total: null,
+			list: []
+		};
+	},
+	onLoad() {
+		this.getAnnoList();
+	},
+	onReachBottom() {
+		let pageNum = this.queryParam.pageNum;
+		let pageSize = this.queryParam.pageSize;
+		let total = this.total;
+		if (pageNum * pageSize >= total) {
+			uni.showToast({
+				title: '暂无更多数据'
+			});
+			return;
+		} else {
+			this.queryParam.pageNum += 1;
+			this.getAnnoList();
+		}
+	},
+	methods: {
+		getAnnoList() {
+			console.log(this.queryParam)
+			getList(this.queryParam).then((res) => {
+				this.list = [...this.list,...res.rows]
+				// this.list = res.rows;
+				this.total = res.total;
+			});
+		},
+		handleNavigate(item) {
+			item.readType = 1;
+			uni.navigateTo({
+				url: '/pages/index/announcementDetails?id=' + item.id
+			});
+		}
+	}
+};
+</script>
+<style>
+.list {
+	padding: 20rpx;
+}
+
+.item {
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+}
+
+.avatar {
+	width: 60rpx;
+	height: 60rpx;
+	border-radius: 50%;
+}
+
+.info {
+	display: flex;
+	align-items: center;
+}
+
+.name {
+	font-size: 28rpx;
+	font-weight: bold;
+	margin-right: 10rpx; /* 添加间距 */
+	position: relative;
+}
+
+.unread-dot {
+	width: 10rpx;
+	height: 10rpx;
+	background-color: red;
+	border-radius: 50%;
+	position: absolute;
+	right: -15rpx; /* 相对于父容器位置调整 */
+	top: 50%;
+	transform: translateY(-50%);
+}
+</style>

pages/index/index.vue

@@ -50,14 +50,14 @@
                     <em class="iconfont icon-gonggao"></em>
                     [公告]
                 </span>
-                <swiper class="swiper_container" :autoplay="true" :circular="true" :vertical="true" interval="2000">
-                    <block v-for="(item, index) in msgList" :key="index">
-                        <swiper-item>
-                            <view class="swiper_item">{{ item.title }}</view>
-                        </swiper-item>
-                    </block>
-                </swiper>
-                <em class="iconfont icon-xiangyoujiantou"></em>
+              <swiper class="swiper_container" :autoplay="true" :circular="true" :vertical="true" interval="2000">
+                <block v-for="(item, index) in announcementList" :key="index">
+                  <swiper-item @click="handleNavigate(item.id)">
+                    <view class="swiper_item">{{ item.announcementTitle }}</view>
+                  </swiper-item>
+                </block>
+              </swiper>
+              <em class="iconfont icon-xiangyoujiantou" @click="goAnnoList()"></em>
             </view>
         </view>
         <!-- 公告 end -->
@@ -145,193 +145,217 @@
                 <view class="list" @tap="goDetails" v-for="(item, index) in indexList" :key="index">
                     <span class="listTitle">{{ item.title }}</span>
 
-                    <view class="onePic" v-if="item.imgList.length == 1">
-                        <image :src="loadImgSrc('/'+item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
-                    </view>
+					<view class="onePic" v-if="item.imgList.length == 1">
+						<image :src="loadImgSrc('/' + item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
+					</view>
 
-                    <view class="twoPic" v-if="item.imgList.length == 2">
-                        <image :src="loadImgSrc('/'+item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
-                    </view>
+					<view class="twoPic" v-if="item.imgList.length == 2">
+						<image :src="loadImgSrc('/' + item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
+					</view>
 
-                    <view class="threePic" v-if="item.imgList.length == 3">
-                        <image :src="loadImgSrc('/'+item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
-                    </view>
+					<view class="threePic" v-if="item.imgList.length == 3">
+						<image :src="loadImgSrc('/' + item.url)" v-for="(item, index1) in item.imgList" :key="index1"></image>
+					</view>
 
-                    <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>
-            </view>
-        </view>
-        <view class="fengexian"></view>
-        <!-- 分割线 -->
-        <view class="container">
-            <view class="titleLeft">
-                <em class="iconfont icon-zhishiku1"></em>
-                热门知识
-            </view>
-            <ul class="rmzsList">
-                <li>
-                    <image :src="loadImgSrc('/10_16.png')"></image>
-                    <view class="listCont">
-                        <p>稳预期 促互通——专家学者建言献策国际农产品市场和贸易高质量发展</p>
-                        <text>唐旭 姚媛</text>
-                        <view class="biaoqian">
-                            <span>三农</span>
-                            <span>教育</span>
-                        </view>
-                        <view class="jiage">
-                            <span class="yhjg">
-                                <em>￥</em>
-                                200
-                            </span>
-                            <span class="yjjg">￥500</span>
-                        </view>
-                    </view>
-                </li>
-                <li>
-                    <image :src="loadImgSrc('/10_16.png')"></image>
-                    <view class="listCont">
-                        <p>稳预期 促互通——专家学者建言献策国际农产品市场和贸易高质量发展</p>
-                        <text>唐旭 姚媛</text>
-                        <view class="biaoqian">
-                            <span>三农</span>
-                            <span>教育</span>
-                        </view>
-                        <view class="jiage">
-                            <span class="yhjg">
-                                <em>￥</em>
-                                200
-                            </span>
-                            <span class="yjjg">￥500</span>
-                        </view>
-                    </view>
-                </li>
-            </ul>
-        </view>
-    </view>
+					<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>
+			</view>
+		</view>
+		<view class="fengexian"></view>
+		<!-- 分割线 -->
+		<view class="container">
+			<view class="titleLeft">
+				<em class="iconfont icon-zhishiku1"></em>
+				热门知识
+			</view>
+			<ul class="rmzsList">
+				<li>
+					<image :src="loadImgSrc('/10_16.png')"></image>
+					<view class="listCont">
+						<p>稳预期 促互通——专家学者建言献策国际农产品市场和贸易高质量发展</p>
+						<text>唐旭 姚媛</text>
+						<view class="biaoqian">
+							<span>三农</span>
+							<span>教育</span>
+						</view>
+						<view class="jiage">
+							<span class="yhjg">
+								<em>￥</em>
+								200
+							</span>
+							<span class="yjjg">￥500</span>
+						</view>
+					</view>
+				</li>
+				<li>
+					<image :src="loadImgSrc('/10_16.png')"></image>
+					<view class="listCont">
+						<p>稳预期 促互通——专家学者建言献策国际农产品市场和贸易高质量发展</p>
+						<text>唐旭 姚媛</text>
+						<view class="biaoqian">
+							<span>三农</span>
+							<span>教育</span>
+						</view>
+						<view class="jiage">
+							<span class="yhjg">
+								<em>￥</em>
+								200
+							</span>
+							<span class="yjjg">￥500</span>
+						</view>
+					</view>
+				</li>
+			</ul>
+		</view>
+	</view>
 </template>
 
 <script>
-	import {governmentListData} from '@/api/information/information.js'
+import { getListToAnnouncement } from '@/api/index/index.js';
+import { governmentListData } from '@/api/information/information.js';
+
 export default {
-    data() {
-        return {
-            // 图片轮播
-            banners: [
-                {
-                    src: '/img1.png'
-                },
-                {
-                    src: '/img2.png'
-                }
-            ],
-            msgList: [
-                {
-                    id: 0,
-                    title: '关于高质量推进土地整治工作赋能乡村振兴的通知'
-                },
-                {
-                    id: 1,
-                    title: '关于高质量推进土地整治工作的通知'
-                },
-                {
-                    id: 2,
-                    title: '关于乡村振兴的通知'
-                }
-            ],
-            indicatorDots: true,
-            vertical: false,
-            autoplay: true,
-            interval: 2000,
-            duration: 500,
-            circular: true,
-			governmentList:[],
-            indexList: [
-			  {
-				  "ck": "10",
-				  "dz": "10",
-				  "id": 1,
-				  "imgList": [],
-				  "jf": "100",
-				  "pl": "10",
-				  "title": "探索乡村能源供给新模式 绘就乡村振兴美丽新画卷"
-			  },
-			  {
-				  "ck": "20",
-				  "dz": "200",
-				  "id": 2,
-				  "imgList": [
-					  {
-						  "url": "/xczx01.png"
-					  }
-				  ],
-				  "jf": "220",
-				  "pl": "20",
-				  "title": "探索乡村能源供给新模式 绘就乡村振兴美丽新画卷"
-			  },
-			  {
-				  "ck": "30",
-				  "dz": "320",
-				  "id": 3,
-				  "imgList": [
-					  {
-						  "url": "/xczx01.png"
-					  },
-					  {
-						  "url": "/xczx01.png"
-					  }
-				  ],
-				  "jf": "300",
-				  "ly": "30",
-				  "title": "探索乡村能源供给新模式 绘就乡村振兴美丽新画卷"
-			  },
-			  {
-				  "ck": "40",
-				  "dz": "420",
-				  "id": 4,
-				  "imgList": [
-					  {
-						  "url": "/img1.png"
-					  },
-					  {
-						  "url": "/img1.png"
-					  },
-					  {
-						  "url": "/img1.png"
-					  }
-				  ],
-				  "jf": "400",
-				  "pl": "40",
-				  "title": "探索乡村能源供给新模式 绘就乡村振兴美丽新画卷"
-			  }
-			]
-        };
-    }
-    /**
-     * 生命周期函数--监听页面加载
-     */,
-    onLoad(options) {
-    },
+	data() {
+		return {
+			// 图片轮播
+			banners: [
+				{
+					src: '/img1.png'
+				},
+				{
+					src: '/img2.png'
+				}
+			],
+			announcementList: [
+				{
+					id: '3',
+					announcementTitle: '关于高质量推进土地整治工作赋能乡村振兴的通知'
+				},
+				{
+					id: '2',
+					announcementTitle: '关于高质量推进土地整治工作的通知'
+				},
+				{
+					id: '1',
+					announcementTitle: '关于乡村振兴的通知'
+				}
+			],
+			requestParam: {
+				userId: getApp().globalData.userId
+			},
+			msgList: [
+				{
+					id: 0,
+					title: '关于高质量推进土地整治工作赋能乡村振兴的通知'
+				},
+				{
+					id: 1,
+					title: '关于高质量推进土地整治工作的通知'
+				},
+				{
+					id: 2,
+					title: '关于乡村振兴的通知'
+				}
+			],
+			indicatorDots: true,
+			vertical: false,
+			autoplay: true,
+			interval: 2000,
+			duration: 500,
+			circular: true,
+			governmentList: [],
+			indexList: [
+				{
+					ck: '10',
+					dz: '10',
+					id: 1,
+					imgList: [],
+					jf: '100',
+					pl: '10',
+					title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷'
+				},
+				{
+					ck: '20',
+					dz: '200',
+					id: 2,
+					imgList: [
+						{
+							url: '/xczx01.png'
+						}
+					],
+					jf: '220',
+					pl: '20',
+					title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷'
+				},
+				{
+					ck: '30',
+					dz: '320',
+					id: 3,
+					imgList: [
+						{
+							url: '/xczx01.png'
+						},
+						{
+							url: '/xczx01.png'
+						}
+					],
+					jf: '300',
+					ly: '30',
+					title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷'
+				},
+				{
+					ck: '40',
+					dz: '420',
+					id: 4,
+					imgList: [
+						{
+							url: '/img1.png'
+						},
+						{
+							url: '/img1.png'
+						},
+						{
+							url: '/img1.png'
+						}
+					],
+					jf: '400',
+					pl: '40',
+					title: '探索乡村能源供给新模式 绘就乡村振兴美丽新画卷'
+				}
+			],
+			queryParam: {
+				pageNum: 1,
+				pageSize: 10,
+				userId: getApp().globalData.userId
+			}
+		};
+	},
+	/**
+	 * 生命周期函数--监听页面加载
+	 */ onLoad(options) {
+		this.getAnnouncementList(getApp().globalData.userId);
+	},
 	mounted() {
-		this.governmentListData()
+		this.governmentListData();
 	},
     methods: {
 		toLegal(){
@@ -341,7 +365,7 @@ export default {
 		},
 		toGovernmentList(){
 			uni.navigateTo({
-			    url: '/pages/toGovernmentList/toGovernmentList'
+				url: '/pages/toGovernmentList/toGovernmentList'
 			});
 		},
 		toGovernmentList1(){
@@ -349,40 +373,40 @@ export default {
 			    url: '/pages/toGovernmentList/toGovernmentList?type=10'
 			});
 		},
-		governmentListData(){
+		governmentListData() {
 			let params = {
-			  pageSize: 10,
-			  pageNum: 1,
-			  type:10,
-			  isGovernment:1
-			  }
-			governmentListData(params).then(res =>{
-				if (res.code==200) {
-					this.governmentList=res.data
+				pageSize: 10,
+				pageNum: 1,
+				type: 10,
+				isGovernment: 1
+			};
+			governmentListData(params).then((res) => {
+				if (res.code == 200) {
+					this.governmentList = res.data;
 				}
-			})
+			});
+		},
+		goWenBa() {
+			uni.navigateTo({
+				url: '/pages/asking/asking'
+			});
+		},
+		goHangQing() {
+			uni.navigateTo({
+				url: '/pages/quotations/quotations'
+			});
+		},
+		goShangCheng() {
+			uni.navigateTo({
+				url: '/pages/shangcheng/shangcheng'
+			});
 		},
-        goWenBa() {
-            uni.navigateTo({
-                url: '/pages/asking/asking'
-            });
-        },
-      goHangQing() {
-        uni.navigateTo({
-          url: '/pages/quotations/quotations'
-        });
-      },
-        goShangCheng() {
-            uni.navigateTo({
-                url: '/pages/shangcheng/shangcheng'
-            });
-        },
 
-        goDetails() {
-            uni.navigateTo({
-                url: '/pages/wenbaxiangqing/wenbaxiangqing'
-            });
-        },
+		goDetails() {
+			uni.navigateTo({
+				url: '/pages/wenbaxiangqing/wenbaxiangqing'
+			});
+		},
 
         goCooperative() {
             uni.navigateTo({
@@ -409,12 +433,29 @@ export default {
 				url: '/pages/handleAffairs/handleAffairs'
 			});
 		},
+		//获取最新公告列表（三条未读消息）
+		getAnnouncementList(userId) {
+			getListToAnnouncement(userId).then((res) => {
+				this.announcementList = res.data;
+			});
+		},
+		handleNavigate(item) {
+			uni.navigateTo({
+				url: '/pages/index/announcementDetails?id=' + item
+			});
+		},
+		//跳转公告列表页面
+		goAnnoList() {
+			uni.navigateTo({
+				url: '/pages/index/announcementList'
+			});
+		},
 		/**
 		 * 跳转直播带货页面
 		 */
-		gozbdh(){
+		gozbdh() {
 			uni.navigateTo({
-			    url: '/pages/liveBroadcast/liveBroadcast'
+				url: '/pages/liveBroadcast/liveBroadcast'
 			});
 		},
 		/**
@@ -425,7 +466,7 @@ export default {
 			    url: '/pages/knowledge/knowledge'
 			});
 		},
-    }
+	}
 };
 </script>
 <style>

uni_modules/uni-section/changelog.md

@@ -0,0 +1,2 @@
+## 0.0.1（2022-07-22）
+- 初始化

uni_modules/uni-section/components/uni-section/uni-section.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="uni-section">
+		<view class="uni-section-header" @click="onClick">
+				<view class="uni-section-header__decoration" v-if="type" :class="type" />
+        <slot v-else name="decoration"></slot>
+
+        <view class="uni-section-header__content">
+          <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
+          <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
+        </view>
+
+        <view class="uni-section-header__slot-right">
+          <slot name="right"></slot>
+        </view>
+		</view>
+
+		<view class="uni-section-content" :style="{padding: _padding}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * Section 标题栏
+	 * @description 标题栏
+	 * @property {String} type = [line|circle|square] 标题装饰类型
+	 * 	@value line 竖线
+	 * 	@value circle 圆形
+	 * 	@value square 正方形
+	 * @property {String} title 主标题
+	 * @property {String} titleFontSize 主标题字体大小
+	 * @property {String} titleColor 主标题字体颜色
+	 * @property {String} subTitle 副标题
+	 * @property {String} subTitleFontSize 副标题字体大小
+	 * @property {String} subTitleColor 副标题字体颜色
+	 * @property {String} padding 默认插槽 padding
+	 */
+
+	export default {
+		name: 'UniSection',
+    emits:['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			title: {
+				type: String,
+				required: true,
+				default: ''
+			},
+      titleFontSize: {
+        type: String,
+        default: '14px'
+      },
+			titleColor:{
+				type: String,
+				default: '#333'
+			},
+			subTitle: {
+				type: String,
+				default: ''
+			},
+      subTitleFontSize: {
+        type: String,
+        default: '12px'
+      },
+      subTitleColor: {
+        type: String,
+        default: '#999'
+      },
+			padding: {
+				type: [Boolean, String],
+				default: false
+			}
+		},
+    computed:{
+      _padding(){
+        if(typeof this.padding === 'string'){
+          return this.padding
+        }
+
+        return this.padding?'10px':''
+      }
+    },
+		watch: {
+			title(newVal) {
+				if (uni.report && newVal !== '') {
+					uni.report('title', newVal)
+				}
+			}
+		},
+    methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	$uni-primary: #2979ff !default;
+
+	.uni-section {
+		background-color: #fff;
+    .uni-section-header {
+      position: relative;
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      flex-direction: row;
+      align-items: center;
+      padding: 12px 10px;
+      font-weight: normal;
+
+      &__decoration{
+        margin-right: 6px;
+        background-color: $uni-primary;
+        &.line {
+          width: 4px;
+          height: 12px;
+          border-radius: 10px;
+        }
+
+        &.circle {
+          width: 8px;
+          height: 8px;
+          border-top-right-radius: 50px;
+          border-top-left-radius: 50px;
+          border-bottom-left-radius: 50px;
+          border-bottom-right-radius: 50px;
+        }
+
+        &.square {
+          width: 8px;
+          height: 8px;
+        }
+      }
+
+      &__content {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: column;
+        flex: 1;
+        color: #333;
+
+        .distraction {
+          flex-direction: row;
+          align-items: center;
+        }
+        &-sub {
+          margin-top: 2px;
+        }
+      }
+
+      &__slot-right{
+        font-size: 14px;
+      }
+    }
+
+    .uni-section-content{
+      font-size: 14px;
+    }
+	}
+</style>

uni_modules/uni-section/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uni-section",
+  "displayName": "uni-section 标题栏",
+  "version": "0.0.1",
+  "description": "标题栏组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "标题栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-scss"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-section/readme.md

@@ -0,0 +1,8 @@
+## Section 标题栏
+> **组件名：uni-section**
+> 代码块： `uSection`
+
+uni-section 组件主要用于文章、列表详情等标题展示
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-section)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839