2323223

pages/notice/notice.js

@@ -0,0 +1,18 @@
+const app = require('../../utils/util.js');
+var util = require('../../utils/md5.js')
+Page({
+  data: {
+    currentTabIndex: 0,
+  },
+  onTabsItemTap: function (event) {
+    let index = event.currentTarget.dataset.index;
+    this.setData({
+      currentTabIndex: index
+    })
+  },
+  
+  onLoad: function () {
+   
+
+  },
+})

pages/notice/notice.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText":"通知",
+  "usingComponents": {}
+}

pages/notice/notice.wxml

@@ -0,0 +1,33 @@
+	<view id='tabs'>
+		<view class='tabs-box'>
+			<block wx:for="{{['未读消息','已读消息']}}" wx:key="index">
+				<view class="tabs-item {{currentTabIndex == index ? 'selected' : '' }}" bindtap='onTabsItemTap' data-index='{{index}}'>
+					{{item}}
+				</view>
+			</block>
+		</view>
+		<view class="yuan" wx:if='{{currentTabIndex != 1}}'></view>
+		<view class='ordert-detail'>
+			<view hidden='{{currentTabIndex != 0}}'>
+				<view class="onread">
+					<view>
+						【重要通知】
+					</view>
+					<view class="title">
+						2020/08/07 12:56:23
+					</view>
+					<view class="title">内容阿昆达睡觉啦圣诞快乐撒谎的卡拉是的撒接口的哈萨克交换机卡萨丁好贱啊阿回到家卡萨丁挥洒健康第三</view>
+					<view class="flex-box">
+						<view class="readwenzi">未读</view>
+						<view>
+							<!-- <image></image> -->
+							<view>我知道了</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view hidden='{{currentTabIndex != 1}}'>
+				sdsd
+			</view>
+		</view>
+	</view>

pages/notice/notice.wxss

@@ -0,0 +1,80 @@
+page {
+  background-color: #f9f9f7;
+}
+
+#tabs {
+  width: 90%;
+  padding: 0 20px;
+  margin: 20rpx 0 20rpx 0;
+  /* position: absolute; */
+  /* z-index: 99999999; */
+}
+
+.tabs-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center
+}
+
+.tabs-item.selected {
+  border: 1rpx solid #2087f7;
+  color: #2087f7;
+  background: #d2e7fd;
+  border-radius: 40rpx;
+}
+
+.tabs-item {
+  width: 50%;
+  color: #666;
+
+}
+
+.yuan {
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  background: red;
+  position: absolute;
+  top: 20rpx;
+  left: 50rpx;
+  position: absolute;
+  top: 42rpx;
+  left: 265rpx;
+
+}
+
+.onread {
+  width: 100%;
+  background: white;
+  box-sizing: border-box;
+  padding: 35rpx;
+  margin-top: 20rpx;
+}
+
+.title {
+  color: #a7a7a7;
+  font-size: 26rpx;
+  margin-top: 10rpx;
+}
+
+.readwenzi {
+  color: whitesmoke;
+  padding: 10rpx;
+  width: 48rpx;
+  font-size: 24rpx;
+  background: #2087f7;
+  border-radius: 10rpx;
+  margin-top: 10rpx;
+
+}
+
+.flex-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 24rpx;
+  color: #a7a7a7;
+}