完成搜政策详情页面的部分

pages.json

@@ -1,5 +1,5 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"pages": [ 
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -24,7 +24,8 @@
 		{
 			"path": "pages/appeal/index",
 			"style": {
-				"navigationBarTitleText": "提建议",				"navigationBarBackgroundColor": "#02A7F0",
+				"navigationBarTitleText": "提建议",	
+				"navigationBarBackgroundColor": "#02A7F0",
 				"navigationBarTextStyle":"white"
 			}
 		},
@@ -35,6 +36,12 @@
 			}
 		},
 		{
+			"path": "pages/policy/policy_deatil",
+			"style": {
+				"navigationBarTitleText": "政策详情"
+			}
+		},
+		{
 			"path": "pages/park/index",
 			"style": {
 				"navigationBarTitleText": "园区专区",

pages/park/park_deatil.vue

@@ -126,7 +126,7 @@
 			</view>
 		</view>
 	   
-		<footer-share style="width: 100%;" :isCollection="false" @collectionPages="collectionPage" @sharePages="sharePage"></footer-share>
+		<footer-share style="width: 100%;" :isCollection="true" @collectionPages="collectionPage" @sharePages="sharePage"></footer-share>
 	</view> 
 	</view>
 </template>

pages/policy/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="content">
-    <div class="swiper-box" style="width: 100%">
+    <view class="swiper-box" style="width: 100%">
       <swiper
         class="swiper"
         indicator-dots="true"
@@ -16,15 +16,15 @@
           ></image>
         </swiper-item>
       </swiper>
-    </div>
-    <div class="input-box">
+    </view>
+    <view class="input-box">
       <image src="/static/policy/u377.png" alt="" />
       <input type="text" placeholder="请输入政策关键词搜索" />
-    </div>
-    <div class="policy-box">
-      <div class="policy-title"><p>最新政策</p></div>
-      <div class="policy-item-box">
-        <div
+    </view>
+    <view class="policy-box">
+      <view class="policy-title"><p>最新政策</p></view>
+      <view class="policy-item-box">
+        <view
           v-for="(item, idx) in policyList"
           :key="idx"
           :class="{ active: active === idx }"
@@ -32,28 +32,29 @@
           @click="active = idx"
         >
           {{ item }}
-        </div>
-      </div>
-      <div class="policy-content">
-        <div
+        </view>
+      </view>
+      <view class="policy-content">
+        <view
           class="policy-content-item"
           v-for="(item, idx) in policyData"
           :key="idx"
+          @click="enterPolicyDeatil(item)"
         >
-          <div class="policy-content-item-left">
+          <view class="policy-content-item-left">
             <p class="policy-content-item-left-title">{{ item.title }}</p>
-            <div class="policy-content-item-left-time">
+            <view class="policy-content-item-left-time">
               <p class="moment">{{ item.moment }}</p>
               <p class="maxMony">{{ item.maxMony }}</p>
               <p class="leftDay">{{ item.leftDay }}</p>
-            </div>
-          </div>
-          <div class="policy-content-item-img">
+            </view>
+          </view>
+          <view class="policy-content-item-img">
             <image :src="item.img" alt="" />
-          </div>
-        </div>
-      </div>
-    </div>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -82,7 +83,17 @@ export default {
     };
   },
   onLoad() {},
-  methods: {},
+  methods: {
+    enterPolicyDeatil(data) {
+      let id = { data };
+      if (!id) {
+        id = "ILoveYou";
+      }
+      uni.navigateTo({
+        url: "/pages/policy/policy_deatil?id=" + id,
+      });
+    },
+  },
 };
 </script>
 
@@ -131,7 +142,7 @@ export default {
         height: 70rpx;
         color: #ffffff;
         border-radius: 0 40rpx 40rpx 0rpx;
-        font-size: 30rpx;
+        font-size: 28rpx;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -145,6 +156,7 @@ export default {
 
       .policy-item-name {
         padding-bottom: 10rpx;
+        font-size: 27rpx;
       }
       .active {
         font-weight: 600;
@@ -154,15 +166,16 @@ export default {
     .policy-content {
       width: 100%;
       display: flex;
-
       box-sizing: border-box;
       flex-direction: column;
       .policy-content-item {
         margin: 0 20rpx;
         display: flex;
-        border-bottom: 1px solid #c1c1c1;
+        box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+        border-radius: 32rpx;
         padding-bottom: 10rpx;
         margin-top: 20rpx;
+        padding: 30rpx;
         justify-content: space-between;
         .policy-content-item-left {
           display: flex;
@@ -176,7 +189,7 @@ export default {
             -webkit-line-clamp: 2;
             line-clamp: 2;
             -webkit-box-orient: vertical;
-            font-size: 28rpx;
+            font-size: 25rpx;
             margin-bottom: 10rpx;
           }
           .policy-content-item-left-time {
@@ -194,6 +207,7 @@ export default {
               border: 1px solid #00bfbf;
               padding: 10rpx;
               margin-right: 20rpx;
+              border-radius: 12rpx;
             }
             .leftDay {
               font-size: 20rpx;
@@ -201,6 +215,7 @@ export default {
               color: #e32579;
               padding: 10rpx;
               border: 1px solid #f7bbc3;
+              border-radius: 12rpx;
             }
           }
         }
@@ -208,6 +223,7 @@ export default {
           image {
             width: 180rpx;
             height: 120rpx;
+            border-radius: 12rpx;
           }
         }
       }

pages/policy/policy_deatil.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="content">
+    <div class="title-box">
+      <div class="title">【工信部】关于推动民营经济高质量发展的若干意见</div>
+      <div class="title-time">
+        <p class="time">2021-05-07 10:15</p>
+        <p class="read-count">阅读量 488</p>
+      </div>
+    </div>
+    <div class="video-box">
+      <image src="/static/policy/u575.png"></image>
+    </div>
+    <!-- 企业研发投入补贴 -->
+    <div class="card-input-content">
+      <div class="card-input">
+        <div class="card-title">企业研发投入补贴</div>
+        <div class="table">
+          <p class="table-item">
+            <span>项目金额:</span>
+            <span>最高500.00万</span>
+          </p>
+          <p class="table-item">
+            <span>申报时间:</span>
+            <span>2021-08-20 至 2021-09-20</span>
+          </p>
+          <p class="table-item">
+            <span>申报状态:</span>
+            <span>剩5天</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- 项目概况 -->
+    <div class="card-situation">
+      <div class="card-title">项目概况</div>
+      <p>
+        为贯彻落实《加强信息共享 促进产融合作行动方案》 （工信部联财 [2014]
+        83号）、和《推进工业化文化发展实施方案（2021-2025年）》工信部联政法（
+        [2021]
+        54号）等文件精神，壮大工旅文融合发展格局，助力制造强国和网络强国建设，现组织开展2021年度工业文化产业项目征集工作。
+      </p>
+    </div>
+    <div class="card-group" v-for="(item, idx) in model" :key="idx">
+      <policy-deatil-card
+        :model="item"
+        :isMar="idx == model.length - 1"
+      ></policy-deatil-card>
+    </div>
+    <div class="share-collection">
+      <div class="share">
+        <span>分享</span>
+        <image src="/static/policy/u2091.png" />
+      </div>
+      <div class="collection">
+        <span>收藏</span>
+        <image src="/static/policy/u2096.png" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import policy_deatil_card from "./policy_deatil_card";
+export default {
+  components: {
+    policyDeatilCard: policy_deatil_card,
+  },
+  data() {
+    return {
+      model: [
+        {
+          title: "基本信息",
+          item: [
+            {
+              name: "项目名称",
+              value: ["企业研发投入补贴"],
+            },
+            {
+              name: "受理部门",
+              value: ["区科技创新局"],
+            },
+            {
+              name: "政策层级",
+              value: ["西咸新区"],
+            },
+            {
+              name: "信息提供日期",
+              value: ["2021-08-20"],
+            },
+          ],
+        },
+        {
+          title: "支持力度",
+          item: [
+            {
+              name: "支持金额",
+              value: ["最高500.00万"],
+            },
+            {
+              name: "支持金额",
+              value: [
+                "1. 对研发投入达到1000万元的企业，给予20万元研发投入补贴；",
+                "2. 研发超过1000万的部分，每增长1000万追加奖励5万元；",
+                "3. 本项目受企业纳税额限制。",
+              ],
+            },
+          ],
+        },
+      ],
+      id: "",
+    };
+  },
+  onLoad(option) {
+    let id = option.id;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+.content {
+  margin-top: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx;
+  .title-box {
+    display: flex;
+    flex-direction: column;
+
+    padding-bottom: 10rpx;
+    .title {
+      letter-spacing: 5rpx;
+      font-size: 35rpx;
+      font-weight: 500;
+    }
+    .title-time {
+      display: flex;
+      font-size: 20rpx;
+      color: $uni-text-color-grey;
+      margin-top: 20rpx;
+      .time {
+        margin-left: 20rpx;
+        margin-right: 100rpx;
+      }
+    }
+  }
+  .video-box {
+    width: 100%;
+    image {
+      width: 100%;
+      height: 400rpx;
+      border-radius: 32rpx;
+    }
+  }
+  .card-input-content {
+    width: 100%;
+    margin-top: 20rpx;
+    .card-input {
+      padding: 30rpx 30rpx;
+      box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+      border-radius: 32rpx;
+      .card-title {
+        font-weight: 600;
+        padding: 20rpx 20rpx 0rpx 20rpx;
+      }
+      .table {
+        border-radius: 32rpx;
+        background-color: #f2f2f2;
+        margin-top: 20rpx;
+        display: flex;
+        padding: 0 20rpx;
+        flex-direction: column;
+        .table-item {
+          box-sizing: border-box;
+          width: 100%;
+          margin: 20rpx 0;
+          font-size: 27rpx;
+          font-weight: 300;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+    }
+  }
+
+  .card-situation {
+    margin-top: 20rpx;
+    padding: 20rpx;
+    border-top: 8rpx solid #f2f2f2;
+    box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+    border-radius: 32rpx;
+    .card-title {
+      font-weight: 600;
+      padding: 20rpx 20rpx 0rpx 20rpx;
+    }
+    p {
+      padding: 20rpx;
+      margin-top: 20rpx;
+      font-size: 27rpx;
+      letter-spacing: 1rpx;
+      line-height: 50rpx;
+    }
+  }
+  .card-group {
+    width: 100%;
+  }
+  .share-collection {
+    background-color: #ffffff;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .share,
+    .collection {
+      width: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+    .share {
+      border-right: 1px solid $uni-border-color;
+    }
+    image {
+      width: 50rpx;
+      height: 50rpx;
+      margin-left: 40rpx;
+    }
+  }
+}
+</style>

pages/policy/policy_deatil_card.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="content" :class="{ 'margin-bottom-80': isMar }">
+    <div class="card-title">{{ model.title }}</div>
+    <div class="item-list">
+      <div v-for="(item, idx) in model.item" :key="idx" class="term">
+        <div class="term-name">{{ item.name }}:</div>
+        <div class="term-value-group">
+          <p
+            v-for="(value, idx) in item.value"
+            :key="idx"
+            class="term-value-item"
+          >
+            {{ value }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["model", "isMar"],
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  box-sizing: border-box;
+  margin-top: 20rpx;
+  padding: 20rpx;
+  box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
+  border-radius: 32rpx;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  // margin-bottom: 80rpx;
+  .card-title {
+    padding: 20rpx 20rpx 0rpx 20rpx;
+    font-weight: 600;
+  }
+  .item-list {
+    margin-left: 20rpx;
+    display: flex;
+    flex-direction: column;
+
+    .term {
+      display: flex;
+      padding: 20rpx;
+      .term-name {
+        font-size: 27rpx;
+        width: 30%;
+        display: flex;
+        margin: 20rpx;
+        color: #7f7f7f;
+      }
+      .term-value-group {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 27rpx;
+        .term-value-item {
+          margin: 20rpx;
+        }
+      }
+    }
+  }
+}
+.margin-bottom-80 {
+  margin-bottom: 80rpx;
+}
+</style>