Merge branch 'master' of http://121.40.40.223:3000/zizhong.wang/konggang-city-miniprogram

components/footer-share/footer-share.vue

@@ -1,59 +1,77 @@
 <template>
-	<view class="footer-share-box display-around">
-		<button class="display-flex-start items-center share-font" :style="{'border-right': isCollection ? '1px solid #d8d8d8' : 'none'}" open-type="share" @click="sharePage()">
-			<view style="margin-right:15rpx;font-size: 26rpx;">分享</view>
-			<image src="../../static/share_icon.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
-		</button> 
-		<view class="display-flex-start items-center share-font" v-if='isCollection' @click="collectionPage()">
-			<view style="margin-right:15rpx;font-size: 26rpx;">收藏</view>
-			<image src="../../static/collection.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
-		</view>
-	</view>
+  <view class="footer-share-box display-around">
+    <button
+      class="display-flex-start items-center share-font"
+      :style="{ 'border-right': isCollection ? '1px solid #d8d8d8' : 'none' }"
+      open-type="share"
+      @click="sharePage()"
+    >
+      <view style="margin-right: 15rpx; font-size: 26rpx">分享</view>
+      <image
+        src="../../static/share_icon.png"
+        mode="aspectFill"
+        style="width: 30rpx; height: 30rpx"
+      ></image>
+    </button>
+    <view
+      class="display-flex-start items-center share-font"
+      v-if="isCollection"
+      @click="collectionPage()"
+    >
+      <view style="margin-right: 15rpx; font-size: 26rpx">收藏</view>
+      <image
+        src="../../static/collection.png"
+        mode="aspectFill"
+        style="width: 40rpx; height: 40rpx"
+      ></image>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		name:"footer-share",
-		props:{
-			isCollection: {
-			  type: Boolean,
-			  default:false
-			}
-		},
-		data() {
-			return {
-				
-			};
-		},
-		methods:{
-			sharePage() {
-			    this.$emit('sharePages')
-			},
-			collectionPage() {
-			    this.$emit('collectionPages')
-			},
-		}
-	}
+export default {
+  name: "footer-share",
+  props: {
+    isCollection: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    sharePage() {
+      this.$emit("sharePages");
+    },
+    collectionPage() {
+      this.$emit("collectionPages");
+    },
+  },
+};
 </script>
 
 <style>
-   .footer-share-box {
-	   height: 50rpx;
-	   position: fixed;
-	   bottom: 0;
-	   width: 100%;
-	   border-radius: 10rpx;
-	   box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
-	   padding: 20rpx;
-	   background: #fff;
-   }
-   .share-font {
-	   width: 45%;
-	   justify-content: center;
-   }
-   .footer-share-box button {
-	   background-color: #fff;
-	   border-radius:0;
-   }
-  .footer-share-box button::after{ border: none;} 
+.footer-share-box {
+  height: 50rpx;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  border-radius: 10rpx;
+  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
+  padding: 20rpx;
+  background: #fff;
+  margin-left: -20rpx;
+}
+.share-font {
+  width: 45%;
+  justify-content: center;
+}
+.footer-share-box button {
+  background-color: #fff;
+  border-radius: 0;
+}
+.footer-share-box button::after {
+  border: none;
+}
 </style>

pages.json

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

pages/appeal/appealCard.vue

@@ -3,39 +3,87 @@
     <div class="title">
       {{ otherAppeal.title }}
     </div>
-    <div class="details">
+    <img
+      src="/static/appeal/waited.png"
+      class="state"
+      v-if="otherAppeal.state === 1"
+    />
+    <img
+      src="/static/appeal/waiting.png"
+      class="state"
+      v-if="otherAppeal.state === 0"
+    />
+    <div class="details" v-if="otherAppeal.state === 1">
       <img :src="otherAppeal.image" class="icon" />
-      <span class="name">{{ otherAppeal.name }}</span
-      >：
-      <span class="msg">{{ otherAppeal.msg }}</span>
+      <p class="msg">
+        <span class="name">{{ otherAppeal.name }}</span
+        >：
+        <span class="msg_body">{{ otherAppeal.msg }}</span>
+      </p>
+    </div>
+    <div class="details" v-else-if="otherAppeal.state === 0">
+      <p class="msg">
+        <span class="msg_body_waiting">{{ otherAppeal.msg }}</span>
+      </p>
+    </div>
+    <div class="details" v-else>
+      <img :src="otherAppeal.image" class="icon" />
+      <p class="msg">
+        <span class="name">{{ otherAppeal.name }}</span
+        >：
+        <span class="msg_body">{{ otherAppeal.msg }}</span>
+      </p>
     </div>
   </div>
 </template>
 <script>
 export default {
-    props:['otherAppeal']
-}
+  props: ["otherAppeal"],
+};
 </script>
 <style lang="scss" scoped>
 .otherAppeal {
-  margin: 5% 9%;
+  margin: 5% 8%;
+  position: relative;
+  height: 200rpx;
   .title {
     margin-bottom: 5%;
-    font-size: 35rpx;
+    font-size: 28rpx;
+  }
+  .state {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateY(-30%);
+    width: 94rpx;
+    height: 74rpx;
   }
   .details {
+    position: relative;
     .name {
-      font-size: 30rpx;
+      font-size: 25rpx;
       color: red;
     }
     .msg {
-      font-size: 30rpx;
+      font-size: 25rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      word-wrap: break-word;
+      word-break: break-all;
+      line-height: 40rpx;
+      letter-spacing: 2rpx;
+      .msg_body_waiting {
+        color: #aaa;
+      }
     }
     .icon {
-      width: 60rpx;
-      height: 60rpx;
+      width: 50rpx;
+      height: 50rpx;
       position: absolute;
-      left: 1%;
+      transform: translateX(-100%);
     }
   }
 }

pages/appeal/appeal_detail.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="content">
+    <div class="appealMsg">
+      <div class="title">诉求内容：</div>
+      <div class="msg">
+        5月13日晚在周公大道周陵中心幼儿团北侧200米（A区5排第二家）酒店订房间，夜间拉土车作业声音很大，建议有关部门可以将拉土车运营时间调整一下。或者为拉土车规划路线，避免在居民区及酒店宾馆临近路段行驶。
+      </div>
+      <div class="info">
+        <div class="flex">
+          <div class="info_content">
+            <span>咨询人：</span><span class="name">{{ info.name }}</span>
+          </div>
+          <div class="info_content">
+            <span>电话：</span><span class="phone">{{ info.phone }}</span>
+          </div>
+        </div>
+        <div class="info_content">
+          <span>提交时间：</span><span class="time">{{ info.time }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="one"></div>
+    <div class="appealState">
+      <div class="title">处理进度：</div>
+      <div class="msg">
+        {{ info.state }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      id: 0,
+      info: {
+        name: "樊**",
+        phone: "153753****",
+        time: "2021-05-14  09:32:20",
+        state: "正在处理中……",
+      },
+    };
+  },
+  onLoad: function (e) {
+    this.id = e.id;
+  },
+};
+</script>
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+.title {
+  padding-left: 5%;
+  font-weight: bolder;
+}
+.name,
+.phone,
+.time {
+  font-weight: 200;
+}
+.info_content {
+  padding-left: 5%;
+  padding-top: 1%;
+  padding-bottom: 1%;
+}
+.content {
+  padding: 3% 0;
+  .one {
+    height: 20rpx;
+    margin: 3% 4%;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      transparent 50%,
+      rgb(206, 203, 203) 50%,
+      rgb(207, 207, 207) 100%
+    );
+    background-size: 30rpx 1rpx;
+    background-repeat: repeat-x;
+  }
+  .appealMsg {
+    .msg {
+      padding: 5%;
+      margin: 1%;
+      border: 1px solid rgb(233, 229, 229);
+      border-radius: 20rpx;
+      text-indent: 2em;
+      line-height: 50rpx;
+      letter-spacing: 2rpx;
+    }
+  }
+  .appealState {
+    .msg {
+      padding: 5%;
+      margin: 1%;
+      border: 1px solid rgb(233, 229, 229);
+      border-radius: 20rpx;
+      text-indent: 2em;
+      line-height: 50rpx;
+      letter-spacing: 2rpx;
+    }
+  }
+}
+</style>

pages/appeal/index.vue

@@ -5,16 +5,20 @@
     </div>
     <div class="menus flex">
       <div class="menu">
-        <p class="logo">
-          <img src="/static/appeal/myappeal.png" />
-        </p>
-        <div class="desc">我的诉求</div>
+        <navigator url="/pages/appeal/myAppeal">
+          <p class="logo">
+            <img src="/static/appeal/myappeal.png" />
+          </p>
+          <div class="desc">我的诉求</div>
+        </navigator>
       </div>
       <div class="menu">
-        <p class="logo">
-          <img src="/static/appeal/putappeal.png" />
-        </p>
-        <div class="desc">提出诉求</div>
+        <navigator url="/pages/appeal/putAppeal">
+          <p class="logo">
+            <img src="/static/appeal/putappeal.png" />
+          </p>
+          <div class="desc">提出诉求</div>
+        </navigator>
       </div>
     </div>
     <div class="otherAppealList">
@@ -83,6 +87,7 @@ export default {
       .desc {
         font-weight: bolder;
         text-align: center;
+        font-size: 25rpx;
       }
       .logo {
         text-align: center;
@@ -95,28 +100,6 @@ export default {
   }
   .otherAppealList {
 	  transform: translateY(-15%);
-    .otherAppeal {
-      margin: 5% 9%;
-      .title {
-        margin-bottom: 5%;
-        font-size: 35rpx;
-      }
-      .details {
-        .name {
-          font-size: 30rpx;
-          color: red;
-        }
-        .msg {
-          font-size: 30rpx;
-        }
-        .icon {
-          width: 60rpx;
-          height: 60rpx;
-          position: absolute;
-          left: 1%;
-        }
-      }
-    }
   }
 }
 </style>

pages/appeal/myAppeal.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="content">
+    <div v-for="(otherAppeal, index) in otherAppealList" :key="index">
+      <appealCard
+        :otherAppeal="otherAppeal"
+        @tap="toDetail(index)"
+      ></appealCard>
+    </div>
+  </div>
+</template>
+<script>
+import appealCard from "./appealCard.vue";
+export default {
+  components: {
+    appealCard,
+  },
+  data() {
+    return {
+      otherAppealList: [
+        {
+          title: "航投大厦餐厅服务建议",
+          state: 0,
+          image: "/static/appeal/avator.png",
+          msg: "正在处理中",
+        },
+        {
+          title: "拉土车夜间噪音问题整改诉求",
+          name: "市场服务与监督管理局",
+          state: 1,
+          msg: "尊敬的市民您好！收到您的留言，我们十分重视！正平大街开展拉土作业的车辆为西安（咸阳）机场三期扩建工程建设项目运输……",
+          image: "/static/appeal/avator.png",
+        },
+      ],
+    };
+  },
+  methods: {
+    toDetail(index) {
+      uni.navigateTo({
+        url: "/pages/appeal/appeal_detail?id="+index,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100vh;
+}
+</style>

pages/appeal/putAppeal.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        {{msg}}
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            msg:'提出诉求'
+        }
+    },
+}
+</script>

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,264 @@
+<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 style="width: 100%">
+      <footer-share
+        style="width: 100%"
+        :isCollection="true"
+        @collectionPages="collectionPage"
+        @sharePages="sharePage"
+      ></footer-share>
+    </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;
+  },
+  methods: {
+    collectionPage() {
+      console.log("已收藏");
+    },
+    sharePage() {
+      console.log("分享");
+      uni.showShareMenu({
+        title: "园区XXX",
+        path: "pages/park/park_detail",
+        success(res) {
+          console.log(res);
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+.footer-share-box{
+  margin-left: -20rpx;
+}
+.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>