静态页面

src/pages/ShouYe/index.css

@@ -37,6 +37,47 @@
   background-image: linear-gradient(#f35844, #ff8d61);
   z-index: 1;
 }
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent {
+  padding: 0 30px;
+  height: 60px;
+  background: #FFC412;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 20px;
+  align-items: center;
+  display: none;
+}
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent.active {
+  display: flex;
+}
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > text {
+  color: #fff;
+  font-size: 32px;
+  line-height: 60px;
+}
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > .flex-item {
+  margin: 0 10px;
+  position: relative;
+  overflow: hidden;
+  height: 60px;
+}
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > .flex-item > view {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  height: 60px;
+}
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > .flex-item > view > text {
+  display: inline-block;
+  font-size: 28px;
+  color: #fff;
+  white-space: nowrap;
+  line-height: 60px;
+  position: absolute;
+  top: 0;
+  animation: 5s move infinite linear;
+  -webkit-animation: 5s move infinite linear;
+}
 .ShouYe > view.flex-item > .PageContainer .Content > view > .Welcome {
   display: block;
   font-size: 30px;
@@ -300,3 +341,11 @@
   width: 100%;
   height: 30px;
 }
+@-webkit-keyframes move {
+  0% {
+    left: 100vw;
+  }
+  100% {
+    left: -100%;
+  }
+}

src/pages/ShouYe/index.jsx

@@ -33,6 +33,10 @@ export default function Index (props) {
   const [BannerList, setBannerList] = useState([])
   // const [ActivityList, setActivityList] = useState([])
   const [NewsList, setNewsList] = useState([])
+  const [ShowNotice, setShowNotice] = useState(false)
+  const [NoticeInfo, setNoticeInfo] = useState(null)
+  const [NoticeWidth, setNoticeWidth] = useState(0)
+  const [NoticeParentWidth, setNoticeParentWidth] = useState(0)
 
   // 宣传位
   const [propagandaList, setPropagandaList] = useState([])
@@ -41,7 +45,27 @@ export default function Index (props) {
     Init()
   })
 
+  useEffect(() => {
+    if (NoticeInfo !== null) {
+      window.setTimeout(() => {
+        let QueryParent = Taro.createSelectorQuery()
+        let QueryChild = Taro.createSelectorQuery()
+        QueryParent.select('#NoticeParent').boundingClientRect()
+        QueryChild.select('#NoticeText').boundingClientRect()
+        QueryParent.exec((res) => {
+          setNoticeParentWidth(res[0].width)
+          QueryChild.exec((cres) => {
+            setNoticeWidth(cres[0].width)
+          })
+        })
+      }, 100)
+      // let NoticeText = document.getElementById('NoticeText')
+      // console.log(NoticeText.boundingClientRect[0].width)
+    }
+  }, [NoticeInfo])
+
   const Init = (done = () => { }) => { // 初始化
+    GetNotice() // 获取通知
     let DownCount = 0
     GetBanner(() => { // 获取轮播图
       DownCount += 1
@@ -70,6 +94,15 @@ export default function Index (props) {
     })
   }
 
+  const GetNotice = () => { // 获取通知
+    request({ ...apis.getGongGaoList, args: { orgId: user.orgId }, params: { annType: 'notice', pageNum: 1, pageSize: 1 } }).then((res) => {
+      setNoticeInfo(res.records[0])
+      if (res.records !== null && res.records.length > 0) {
+        setShowNotice(true)
+      }
+    })
+  }
+
   const GetBanner = (done = () => { }) => { // 获取轮播图
     setBannerList([])
     request({ ...apis.getBanner, params: { showType: 'banner', showPosition: 'index', pageNum: 1, pageSize: 5 } }).then((res) => {
@@ -169,6 +202,17 @@ export default function Index (props) {
 
                 <view>
 
+                  {/* 通知栏 */}
+                  <view className={ShowNotice ? 'NoticeContent flex-h active' : 'NoticeContent flex-h'}>
+                    <text className='iconfont icontongzhi1'></text>
+                    <view id='NoticeParent' className='flex-item' onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/GongGaoDetail/index?id=${NoticeInfo.id}` }) }}>
+                      <view style={{ width: `${NoticeWidth > NoticeParentWidth ? NoticeWidth : NoticeParentWidth}px` }}>
+                        <text id='NoticeText'>{NoticeInfo === null ? '' : NoticeInfo.announcementTitle}</text>
+                      </view>
+                    </view>
+                    <text className='iconfont iconguanbi' onClick={() => { setShowNotice(false) }}></text>
+                  </view>
+
                   {/* 欢迎词 */}
                   <Text className='Welcome'>欢迎来到远道智慧社区！</Text>
 

src/pages/ShouYe/index.less

@@ -42,6 +42,53 @@
               z-index: 1;
             }
 
+            >.NoticeContent {
+              padding: 0 30px;
+              height: 60px;
+              background: #FFC412;
+              position: relative;
+              overflow: hidden;
+              margin-bottom: 20px;
+              align-items: center;
+              display: none;
+
+              &.active {
+                display: flex;
+              }
+
+              >text {
+                color: #fff;
+                font-size: 32px;
+                line-height: 60px;
+              }
+
+              >.flex-item {
+                margin: 0 10px;
+                position: relative;
+                overflow: hidden;
+                height: 60px;
+
+                >view {
+                  display: block;
+                  position: relative;
+                  overflow: hidden;
+                  height: 60px;
+
+                  >text {
+                    display: inline-block;
+                    font-size: 28px;
+                    color: #fff;
+                    white-space: nowrap;
+                    line-height: 60px;
+                    position: absolute;
+                    top: 0;
+                    animation: 5s move infinite linear;
+                    -webkit-animation: 5s move infinite linear;
+                  }
+                }
+              }
+            }
+
             >.Welcome {
               display: block;
               font-size: 30px;
@@ -281,6 +328,7 @@
 
                   >view {
                     position: relative;
+
                     text {
                       display: block;
                       width: 100%;
@@ -402,4 +450,14 @@
       }
     }
   }
+}
+
+@-webkit-keyframes move {
+  0% {
+    left: 100vw;
+  }
+
+  100% {
+    left: -100%;
+  }
 }