通告

pages/annunciate/details.scss

@@ -1,5 +1,3 @@
-@import "./incidental.scss";
-
 /* 主要区域 */
 .main {
     width: 100%;
@@ -115,4 +113,60 @@ textarea {
     font-weight: bold;
     color: #333333;
     margin-left: 30rpx;
+}
+
+
+.incidental {
+    display: flex;
+    justify-content: space-between;
+    height: 36rpx;
+    width: 630rpx;
+    margin-top: 10rpx;
+
+    &_l {
+        display: flex;
+        align-items: center;
+
+        .tag {
+            max-width: 100rpx;
+            height: 36rpx;
+            line-height: 36rpx;
+            padding: 0 10rpx;
+            margin-right: 10rpx;
+            font-size: 20rpx;
+            font-family: PingFangSC-Regular-, PingFangSC-Regular;
+            font-weight: normal;
+        }
+
+        .time {
+            font-size: 20rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #999999;
+            margin-top: 10rpx;
+        }
+    }
+
+    &_r {
+        display: flex;
+        align-items: center;
+        font-size: 20rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #999999;
+        margin-top: 10rpx;
+
+        &_item {
+            margin-right: 30rpx;
+            height: 28rpx;
+            display: flex;
+            align-items: center;
+
+            text {
+                margin-right: 10rpx;
+            }
+        }
+
+        &_item:last-child {
+            margin-right: 0;
+        }
+    }
 }

pages/annunciate/incidental.scss

@@ -1,55 +0,0 @@
-
-.incidental {
-    display: flex;
-    justify-content: space-between;
-    height: 36rpx;
-    width: 630rpx;
-    margin-top: 10rpx;
-
-    &_l {
-        display: flex;
-        align-items: center;
-
-        .tag {
-            max-width: 100rpx;
-            height: 36rpx;
-            line-height: 36rpx;
-            padding: 0 10rpx;
-            margin-right: 10rpx;
-            font-size: 20rpx;
-            font-family: PingFangSC-Regular-, PingFangSC-Regular;
-            font-weight: normal;
-        }
-
-        .time {
-            font-size: 20rpx;
-            font-family: PingFang SC-Regular, PingFang SC;
-            color: #999999;
-            margin-top: 10rpx;
-        }
-    }
-
-    &_r {
-        display: flex;
-        align-items: center;
-        font-size: 20rpx;
-        font-family: PingFang SC-Regular, PingFang SC;
-        color: #999999;
-        margin-top: 10rpx;
-
-        &_item {
-            margin-right: 30rpx;
-            height: 28rpx;
-            display: flex;
-            align-items: center;
-
-            text {
-                margin-right: 10rpx;
-            }
-        }
-
-        &_item:last-child {
-            margin-right: 0;
-        }
-    }
-}

pages/annunciate/index.json

@@ -1,4 +1,6 @@
 {
     "navigationBarTitleText": "通告",
-    "usingComponents": {}
+    "usingComponents": {
+        "Item": "./modules/list"
+    }
 }

pages/annunciate/index.scss

@@ -1,48 +1,13 @@
 @import "../../static/unread.wxss";
-@import "../../components/My_card/index.scss";
-@import "./incidental.scss";
 
 page {
     padding-bottom: 0;
 }
 
-.list {
-    padding: 30rpx;
-
-    .content {
-        display: flex;
-        width: 100%;
-        height: 80rpx;
-
-        .cover {
-            width: 80rpx;
-            height: 80rpx;
-        }
-
-        .main {
-            width: 538rpx;
-            margin-left: 12rpx;
-
-            .title {
-                height: 40rpx;
-                font-size: 28rpx;
-                font-family: PingFang SC-Medium, PingFang SC;
-                font-weight: 500;
-                color: #333333;
-            }
-
-            .explain {
-                height: 34rpx;
-                font-size: 24rpx;
-                font-family: PingFang SC-Regular, PingFang SC;
-                color: #666666;
-                margin-top: 16rpx;
-                text-align: left !important;
-            }
-        }
-    }
-
-    .incidental {
-        margin-top: 18rpx;
-    }
+.list-box {
+    width: 690rpx;
+    background: #FFFFFF;
+    border-radius: 16rpx;
+    margin: 20rpx auto 0;
+    padding: 30rpx 0;
 }

pages/annunciate/index.wxml

@@ -1,30 +1,8 @@
 <view class="top" />
 <My_listBox id='ListBox' height='{{scrollHeight}}' bind:getlist='getList'>
     <view class="unread">总共{{total}}条，未读25条</view>
-    <navigator class="my-card list" url="#" wx:for="{{list}}" data-item="{{item}}" bindtap="toDetails">
-        <view class="content">
-            <image class="cover" src="{{item.cover||'/static/image/a-cover.png'}}" />
-            <view class="main">
-                <view class="title line-1">{{item.title}}</view>
-                <view class="explain line-1">{{item.summary}}</view>
-            </view>
-        </view>
-        <view class="incidental">
-            <view class="incidental_l">
-                <van-tag custom-class='tag line-1' color="#FF3B30" plain>{{item.classname}}</van-tag>
-                <view class="time">发布于：{{item.createdate}}</view>
-            </view>
-            <view class="incidental_r">
-                <view class="incidental_r_item">
-                    <text class="iconfont icon-a-tonggaofujian" />
-                    附件:{{item.attinfos.length}}
-                </view>
-                <view class="incidental_r_item">
-                    <text class="iconfont icon-a-tonggaoliulanliang" />
-                    {{item.readcount}}
-                </view>
-            </view>
-        </view>
+    <navigator class="list-box" url="#" wx:for="{{list}}" data-item="{{item}}" bindtap="toDetails">
+        <Item item="{{item}}" />
     </navigator>
     <view style="height: 40px;" />
 </My_listBox>

pages/annunciate/modules/list.js

@@ -0,0 +1,28 @@
+// pages/annunciate/modules/list.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        item: {
+            type: Object,
+            value: ""
+        }
+    },
+    options: {
+        addGlobalClass: true
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

pages/annunciate/modules/list.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

pages/annunciate/modules/list.scss

@@ -0,0 +1,72 @@
+.ann-box {
+    display: flex;
+    width: 630rpx;
+    overflow: hidden;
+    margin: 0 auto;
+    font-family: PingFang SC-Regular, PingFang SC;
+
+    .image-box {
+        position: relative;
+        width: 160rpx;
+        height: 120rpx;
+        margin-right: 20rpx;
+
+        .image {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    .mian {
+        width: 448rpx;
+        height: 122rpx;
+
+
+        .title {
+            display: flex;
+            height: 40rpx;
+            align-items: flex-end;
+
+            .tag {
+                display: inline-block;
+                margin-right: 10rpx;
+                font-size: 20rpx;
+                font-family: PingFangSC-Regular-, PingFangSC-Regular;
+            }
+
+            text {
+                flex: 1;
+                font-size: 28rpx;
+                font-family: PingFang SC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #333333;
+            }
+        }
+
+        .explain {
+            font-size: 24rpx;
+            color: #666666;
+            margin-top: 10rpx;
+        }
+
+        .incidental {
+            height: 28rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-family: PingFang SC-Regular, PingFang SC;
+            margin-top: 10rpx;
+            font-size: 20rpx;
+            color: #999999;
+
+            .incidental_r {
+                display: flex;
+                .iconfont{
+                    margin-right: 10rpx;
+                    font-size: 24rpx !important;
+                }
+            }
+        }
+    }
+}

pages/annunciate/modules/list.wxml

@@ -0,0 +1,29 @@
+<view class="ann-box">
+    <view class="image-box">
+        <van-image custom-class='image' width="160rpx" height="120rpx" fit='cover' src="{{item.cover||'/static/image/a-cover.png'}}" radius='8' lazy-load />
+    </view>
+    <view class="mian">
+        <view class="title">
+            <van-tag custom-class='tag' plain color='#FA8C16'>{{item.classname}}</van-tag><text class="line-1">{{item.title}}</text>
+        </view>
+        <view class="explain line-1">{{item.summary}}</view>
+
+
+        <view class="incidental">
+            <view>{{item.createdate}}</view>
+
+            <view class="incidental_r">
+                <view style="margin-right: 30rpx;">
+                    <text class="iconfont icon-a-tonggaofujian" />
+                    附件:{{item.attinfos.length}}
+                </view>
+                <view>
+                    <text class="iconfont icon-a-tonggaoliulanliang" />
+                    {{item.readcount}}
+                </view>
+            </view>
+
+
+        </view>
+    </view>
+</view>