静态页面

src/pages/ShouYe/index.css

 }
 .ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent {
   padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > view {
   height: 60px;
-  background: #FFC412;
+  background: rgba(243, 91, 71, 0.12);
   position: relative;
   overflow: hidden;
-  margin-bottom: 20px;
   align-items: center;
-  display: none;
-}
-.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent.active {
-  display: flex;
+  border-radius: 24px;
 }
-.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > text {
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > view > text {
   color: #fff;
   font-size: 32px;
   line-height: 60px;
 }
-.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > .flex-item {
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > view > .flex-item {
   margin: 0 10px;
   position: relative;
   overflow: hidden;
   height: 60px;
 }
-.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > .flex-item > view {
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > view > .flex-item > view {
   display: block;
   position: relative;
   overflow: hidden;
   height: 60px;
 }
-.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > .flex-item > view > text {
+.ShouYe > view.flex-item > .PageContainer .Content > view > .NoticeContent > view > .flex-item > view > text {
   display: inline-block;
   font-size: 28px;
   color: #fff;

src/pages/ShouYe/index.jsx

 
                 <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>
 
                     </view>
                   </view>
 
+                  {/* 通知栏 */}
+                  <view className='NoticeContent'>
+                    <view className='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>
+                  </view>
+
                   {/* 导航 */}
                   <view className='NavContainer flex-h'>
                     {
                         {
                           OwnerList.map((item, index) => (
                             <view className='flex-item' key={`Owners-${index}`} onClick={OwnerClick(item)}>
-                              <Text className={`iconfont ${item.icon}`} style={{fontWeight: item.bold !== undefined && item.bold === true ? 'bold' : 'normal'}}></Text>
+                              <Text className={`iconfont ${item.icon}`} style={{ fontWeight: item.bold !== undefined && item.bold === true ? 'bold' : 'normal' }}></Text>
                               <view>
                                 <view><Text>{item.name}</Text></view>
                               </view>

src/pages/ShouYe/index.less

 
             >.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;
-              }
+              margin-bottom: 10px;
+              margin-top: 10px;
 
-              >.flex-item {
-                margin: 0 10px;
+              >view {
+                height: 60px;
+                background: rgba(243, 91, 71, 0.12);
                 position: relative;
                 overflow: hidden;
-                height: 60px;
+                align-items: center;
+                border-radius: 24px;
 
-                >view {
-                  display: block;
+                >text {
+                  color: #fff;
+                  font-size: 32px;
+                  line-height: 60px;
+                }
+
+                >.flex-item {
+                  margin: 0 10px;
                   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;
+                  >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;
+                    }
                   }
                 }
               }