33

pages/card/card.js

@@ -0,0 +1,75 @@
+const app = require('../../utils/util.js');
+var util = require('../../utils/md5.js')
+Page({
+  data: {
+    currentTabIndex: 0,
+    readList: [{
+        title: '重要通知',
+        content: '萨达撒多会撒娇的挥洒健康的挥洒考究的挥洒的货架上',
+        time: '2020/07/08'
+      },
+      {
+        title: '重要通知222',
+        content: 'wewewe',
+        time: '2020/07/08'
+      },
+      {
+        title: '重要通知222',
+        content: 'wewewe',
+        time: '2020/07/08'
+      },
+      {
+        title: '重要通知222',
+        content: 'wewewe',
+        time: '2020/07/08'
+      },
+      {
+        title: '重要通知222',
+        content: 'wewewe',
+        time: '2020/07/08'
+      },
+      {
+        title: '重要通知',
+        content: 'skdaskjd阿斯顿撒多撒多撒多萨迪克撒旦卡萨丁',
+        time: '2020/07/08'
+      },
+      {
+        tile: '重要通知',
+        content: '所得税卡的挥洒考究的哈斯科技带回家卡萨的挥洒考究的哈斯卡接电话看手机啊都好看手机锕',
+        time: '2020/07/08'
+      },
+    ],
+    noreadList: [{
+        title: '未读通知',
+        content: '萨达撒多会撒娇的挥洒健康的挥洒考究的挥洒的货架上',
+        time: '2020/07/08'
+      },
+      {
+        title: '重要通知222',
+        content: 'wewewe',
+        time: '2020/07/08'
+      },
+      {
+        title: '重要通知',
+        content: 'skdaskjd阿斯顿撒多撒多撒多萨迪克撒旦卡萨丁',
+        time: '2020/07/08'
+      },
+      {
+        title: '重要通知',
+        content: '所得税卡的挥洒考究的哈斯科技带回家卡萨的挥洒考究的哈斯卡接电话看手机啊都好看手机锕',
+        time: '2020/07/08'
+      },
+    ],
+  },
+  onTabsItemTap: function (event) {
+    let index = event.currentTarget.dataset.index;
+    this.setData({
+      currentTabIndex: index
+    })
+  },
+
+  onLoad: function () {
+
+
+  },
+})

pages/card/card.json

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

pages/card/card.wxml

@@ -0,0 +1,48 @@
+	<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" wx:for='{{readList}}'>
+					<view>
+						【{{item.title}}】
+					</view>
+					<view class="title">
+						{{item.time}}
+					</view>
+					<view class="title"> {{item.content}} </view>
+					<view class="flex-box">
+						<view class="readwenzi">未读</view>
+						<view style="display: flex;">
+							<image src="/images/dui.png" style="width: 40rpx; height: 40rpx; margin-right: 10rpx;"></image>
+							<view>我知道了</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view hidden='{{currentTabIndex != 1}}'>
+				<view class="onread" wx:for='{{readList}}'>
+					<view>
+						【{{item.title}}】
+					</view>
+					<view class="title">
+						{{item.time}}
+					</view>
+					<view class="title">{{item.content}}</view>
+					<view class="flex-box">
+						<view class="readwenzi" style="background:#dcdcdc">已读</view>
+						<view style="display: flex;  align-items: center;">
+							<image src="/images/shan.png" style="width: 50rpx; height: 50rpx; margin-right: 10rpx;"></image>
+							<view>删除</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>

pages/card/card.wxss

@@ -0,0 +1,84 @@
+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;
+  /* position: fixed;
+  width: 100%;
+  height: 150rpx; */
+}
+
+.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;
+  
+}