完成通知公告，招商专区页面开发

pages.json

@@ -141,6 +141,30 @@
 			"style": {
 				"navigationBarTitleText": "授权"
 			}
+		},
+		{
+			"path": "pages/notice/index",
+			"style": {
+				"navigationBarTitleText": "通知公告"
+			}
+		},
+		{
+			"path": "pages/notice/notice_deatil",
+			"style": {
+				"navigationBarTitleText": "内容详情"
+			}
+		},
+		{
+			"path": "pages/attract/index",
+			"style": {
+				"navigationBarTitleText": "招商专区"
+			}
+		},
+		{
+			"path": "pages/attract/attract_deatil",
+			"style": {
+				"navigationBarTitleText": "活动资讯"
+			}
 		}
 	],
 	"globalStyle": {

pages/attract/attract_deatil.vue

@@ -0,0 +1,17 @@
+<template>
+  <view>
+    <artical-deatil></artical-deatil>
+  </view>
+</template>
+
+<script>
+import ArticalDeatil from "../../components/artical-deatil/index";
+export default {
+  components: {
+    ArticalDeatil,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/attract/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <view class="content">
+    <view class="header">
+      <image src="/static/attract/u2043.png" alt="" class="header-image" />
+    </view>
+    <view class="attracts">
+      <view class="activity-theme">活动主题</view>
+      <view
+        class="notice-content-box"
+        v-for="(item, index) in attractList"
+        :key="index"
+        style="justify-content: start"
+        @click="goAttractDeatil(item.id)"
+      >
+        <image
+          :src="item.url"
+          mode="aspectFit"
+          style="width: 112rpx; height: 112rpx; margin-right: 20rpx"
+        ></image>
+        <view class="notice-content">
+          <view class="notice-content-font">{{ item.title }}</view>
+          <view class="attract-content">{{ item.subtitle }}</view>
+          <view class="notice-content-time" style="margin-top: 20rpx">{{
+            item.time
+          }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      attractList: [
+        {
+          url: "/static/attract/1.png",
+          title: "工业互联网",
+          subtitle: "工业互联网是全球工业系统与高级计算、分析、...",
+          time: "2021-09-05",
+        },
+        {
+          url: "/static/attract/2.png",
+          title: "生产性服务业",
+          subtitle: "生产性服务业是指为保持工业生产过程的连续性...",
+          time: "2021-09-05",
+        },
+      ],
+    };
+  },
+  methods: {
+    goAttractDeatil(id) {
+      uni.navigateTo({
+        url: "/pages/attract/attract_deatil?id=" + id,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .header {
+    .header-image {
+      width: 100%;
+      height: 350rpx;
+    }
+  }
+  .attracts {
+    display: flex;
+    box-sizing: border-box;
+    // justify-content: center;
+    padding: 80rpx;
+    padding-top: 30rpx;
+    align-items: center;
+    flex-direction: column;
+    .activity-theme {
+      font-size: 28rpx;
+      font-weight: 600;
+      border-left: 10rpx solid #02a7f0;
+      padding-left: 20rpx;
+      width: 100%;
+      justify-items: start;
+    }
+    .notice-content-box {
+      width: 100%;
+      display: flex;
+      padding: 30rpx;
+      background-color: #ffffff;
+      box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+      border-radius: 32rpx;
+      margin-top: 20rpx;
+      justify-content: space-between;
+      .notice-content-font {
+        font-size: 26rpx;
+        color: #0d1937;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .attract-content {
+        color: #697594;
+        font-weight: 600;
+        font-size: 20rpx;
+        margin-top: 8rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .notice-content-time {
+        font-size: 18rpx;
+        letter-spacing: 0.02em;
+        color: #cfcfcf;
+        margin-right: 14rpx;
+      }
+    }
+  }
+}
+</style>

pages/notice/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <view class="content">
+    <view class="input-box">
+      <image src="/static/policy/u377.png" alt="" />
+      <input type="text" placeholder="请输入政策关键词搜索" />
+    </view>
+    <view class="notices">
+      <view
+        class="notice-content-box"
+        v-for="(item, index) in noticeList"
+        :key="index"
+        @click="goNoticeDeatil(item.id)"
+      >
+        <image
+          :src="item.url"
+          mode="aspectFit"
+          style="width: 34px; height: 34px"
+        ></image>
+        <view class="notice-content display-around-column">
+          <view class="notice-content-font">{{ item.title }}</view>
+          <view class="notice-content-time">{{ item.time }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      noticeList: [
+        {
+          url: "/static/navList/policy-icon.png",
+          title: "政策速览 | 小微企业、个体工商户税费...",
+          time: "2021-08-05",
+        },
+        {
+          url: "/static/navList/activity-icon.png",
+          title: "活动预告 | 想了解跨境电商？8月5日带...",
+          time: "2021-08-04",
+        },
+        {
+          url: "/static/navList/notice-icon.png",
+          title: "通知公告 | 2022年首批次重点新材料扶...",
+          time: "2021-08-03",
+        },
+      ],
+    };
+  },
+  methods: {
+    goNoticeDeatil(id) {
+      uni.navigateTo({
+        url: "/pages/notice/notice_deatil?id=" + id,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  .notices {
+    display: flex;
+    // justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    .notice-content-box {
+      width: 100%;
+      display: flex;
+      padding: 30rpx;
+      background-color: #ffffff;
+      box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+      border-radius: 32rpx;
+      margin-top: 20rpx;
+      justify-content: space-between;
+      .notice-content-font {
+        font-size: 26rpx;
+        color: #0d1937;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .attract-content {
+        color: #697594;
+        font-weight: 600;
+        font-size: 20rpx;
+        margin-top: 8rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .notice-content-time {
+        font-size: 18rpx;
+        letter-spacing: 0.02em;
+        color: #cfcfcf;
+        margin-right: 14rpx;
+      }
+    }
+  }
+  .input-box {
+    width: 100%;
+    height: 100rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    image {
+      position: absolute;
+      left: 72rpx;
+      width: 40rpx;
+      height: 40rpx;
+    }
+    input {
+      background-color: rgba($color: #000000, $alpha: 0.1);
+      width: 90%;
+      height: 70%;
+      border-radius: 50rpx;
+      padding: 3rpx;
+      font-size: 26rpx;
+      padding-left: 80rpx;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

pages/notice/notice_deatil.vue

@@ -0,0 +1,17 @@
+<template>
+  <view>
+    <artical-deatil></artical-deatil>
+  </view>
+</template>
+
+<script>
+import ArticalDeatil from "../../components/artical-deatil/index";
+export default {
+  components: {
+    ArticalDeatil,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>