feat: 开发区、政策文件、首页修改

src/api/url/index.js

 export default {
   // 首页
-  homeInfo: '/postcard/api/developmentInfo/v1.0/source',
+  homeInfo: "/postcard/api/developmentInfo/v1.0/source",
   // 列表
+  // 开发区列表
+  developList: "/postcard/api/developmentInfo/v1.0/page",
   // 产业园列表
-  parkList: '/postcard/api/parkInfo/v1.0/page',
+  parkList: "/postcard/api/parkInfo/v1.0/page",
   // 土地列表
-  landList: '/postcard/api/land/v1.0/page',
+  landList: "/postcard/api/land/v1.0/page",
   // 载体列表
-  carrierList: '/postcard/api/carrier/v1.0/page',
+  carrierList: "/postcard/api/carrier/v1.0/page",
+  // 开发区详情
+  developDetail: "/postcard/api/developmentInfo/v1.0/detail",
   // 产业园详情
-  industrialDetail: '/postcard/api/parkInfo/v1.0/detail',
+  industrialDetail: "/postcard/api/parkInfo/v1.0/detail",
   // 载体详情
-  carrierDetail: '/postcard/api/carrier/v1.0/detail',
+  carrierDetail: "/postcard/api/carrier/v1.0/detail",
   // 土地详情
-  landDetail: '/postcard/api/land/v1.0/detail',
+  landDetail: "/postcard/api/land/v1.0/detail",
   // 招商引资-招商亮点
-  investmentLights: '/postcard/api/developmentInfo/v1.0/detail',
+  investmentLights: "/postcard/api/developmentInfo/v1.0/detail",
   // 提交咨询信息
-  infoSubmit: '/postcard/api/investClueInfo/save',
+  infoSubmit: "/postcard/api/investClueInfo/save",
   // 查询条件列表（字典表）
-  queryConditionList: '/postcard/api/sysDictData/listByCodes',
+  queryConditionList: "/postcard/api/sysDictData/listByCodes",
   // 查询是否有权限查看列表
-  haveAuth: '/postcard/api/investClueInfo/haveAuth',
+  haveAuth: "/postcard/api/investClueInfo/haveAuth",
   // 查询咨询列表
-  queryInvestInfos: '/postcard/api/investClueInfo/page',
+  queryInvestInfos: "/postcard/api/investClueInfo/page",
   // 联系我们列表
-  queryContacts: '/postcard/api/scSourceInfo/contact',
+  queryContacts: "/postcard/api/scSourceInfo/contact",
   // 获取查询条件列表
-  queryFiltersList: '/postcard/api/sysDictData/listByCodes',
+  queryFiltersList: "/postcard/api/sysDictData/listByCodes",
   /** 登录 */
-  login: '/postcard/user/login',
+  login: "/postcard/user/login",
   /** 主导产业 */
-  queryIndustryList: '/postcard/api/parkInfo/v1.0/industryList',
-}
+  queryIndustryList: "/postcard/api/parkInfo/v1.0/industryList",
+};

src/components/media/develop-card.vue

+<template>
+  <media-card
+    :img="detail.imgUrl || ''"
+    :title="detail.name || ''"
+    :keyWords="keyWords"
+    :cardId="detail.id"
+    @click="toDetail"
+    :key="detail.id"
+  >
+    <template v-slot:rightMedia>
+      <view>
+        <div class="f24 flex right-footer">
+          <div class="nowrap" style="width: 200rpx">
+            <span class="c80">开发区级别：</span>
+            <span>{{ detail.levelName || "--" }}</span>
+          </div>
+          <div class="nowrap" style="margin-left: 10rpx">
+            <span class="c80">规划面积：</span
+            >{{ detail.coverArea ? detail.planArea + "平方公里" : "--" }}
+          </div>
+        </div>
+      </view>
+    </template>
+  </media-card>
+</template>
+<script>
+import mediaCard from "./card.vue";
+
+export default {
+  components: { mediaCard },
+  props: {
+    isHeightLight: {
+      type: Boolean,
+      default: false,
+    },
+    detail: {
+      type: Object,
+      default: {},
+    },
+    keyWords: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    toDetail() {
+      uni.navigateTo({
+        url: "/pages/detail/developDetail?id" + this.detail.id,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right-media {
+  color: #4d4d4d;
+  line-height: 34rpx;
+  margin-bottom: 10rpx;
+}
+.right-footer {
+  color: #4d4d4d;
+  line-height: 34rpx;
+}
+.c80 {
+  color: #808080;
+}
+.nowrap {
+  white-space: nowrap;
+}
+</style>

src/core/config.js

@@ -4,7 +4,8 @@ switch (process.env.VUE_APP_ENV) {
     baseUrl = "https://prod-postcard-api.liyeyun.com";
     break;
   case "development":
-    baseUrl = "https://test.postcard-api.liyeyun.com.cn";
+    baseUrl = "https://test-postcard-api.liyeyun.com";
+    // baseUrl = "http://58impx.natappfree.cc";
 
     break;
 }

src/pages.json

@@ -25,6 +25,12 @@
         "navigationBarTitleText": "招商引资"
       }
     },
+    {
+      "path": "pages/detail/developDetail",
+      "style": {
+        "navigationBarTitleText": "开发区详情"
+      }
+    },
     {
       "path": "pages/detail/industrialDetail",
       "style": {

src/pages/detail/developDetail.vue

+<template>
+  <div class="industrial-detail">
+    <CommonDetail detail-type="industrial" :queryUrl="queryUrl">
+      <template #default="{ detail }">
+        <div v-if="detail">
+          <div class="detail-cell">
+            <div class="detail-cell__title">{{ detail.name }}</div>
+            <div class="detail-cell__body">
+              <div class="flex detail-cell__line">
+                <div class="detail-cell__info flex1">
+                  <div class="detail-cell__info-name">开发区级别：</div>
+                  <div class="detail-cell__info-value">
+                    {{ handleValue(detail.levelName) }}
+                  </div>
+                </div>
+                <div class="detail-cell__info flex1">
+                  <div class="detail-cell__info-name">规划面积：</div>
+                  <div class="detail-cell__info-value">
+                    {{ handleValue(detail.planArea, "平方公里") }}
+                  </div>
+                </div>
+              </div>
+              <div class="detail-cell__line">
+                <div class="detail-cell__info">
+                  <div class="detail-cell__info-name">详细地址：</div>
+                  <div class="detail-cell__info-value">
+                    {{ handleValue(detail.address) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 园区介绍 -->
+          <div class="detail-cell">
+            <div class="detail-cell__title">园区介绍</div>
+            <div class="detail-cell__body text-26">
+              {{ detail.description }}
+            </div>
+          </div>
+          <!-- 产业基础 -->
+          <div class="detail-cell">
+            <div class="detail-cell__title">产业基础</div>
+            <div class="detail-cell__body">
+              <div class="detail-cell__line">
+                <div class="detail-cell__info text-26">
+                  <div class="detail-cell__info-name">主导产业：</div>
+                  <div class="detail-cell__info-value">
+                    {{ handleValue(detail.primaryIndustry) }}
+                  </div>
+                </div>
+              </div>
+              <div class="detail-cell__line">
+                <div class="detail-cell__info text-26">
+                  <div class="detail-cell__info-name">招商方向：</div>
+                  <div class="detail-cell__info-value">
+                    {{ handleValue(businessInfo(detail)) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 产业支持 -->
+          <!-- <div v-if="detail.resources.length > 0" class="detail-cell">
+            <div class="detail-cell__title">产业支持</div>
+            <div class="detail-cell__body">
+              <div class="flex gap-20 flex-wrap">
+                <div
+                  v-for="item of detail.resources"
+                  :key="item"
+                  class="detail-cell__word-info"
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </div>
+          </div> -->
+          <!-- 园内配套 -->
+          <!-- <div v-if="detail.setUp.length > 0" class="detail-cell">
+            <div class="detail-cell__title">园区内配套</div>
+            <div class="detail-cell__body">
+              <div class="flex gap-20 flex-wrap">
+                <div
+                  v-for="item of detail.setUp"
+                  :key="item"
+                  class="detail-cell__word-info"
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </div>
+          </div> -->
+          <!-- 开发区内产业园 -->
+          <div v-if="detail.parkPageList.length > 0" class="detail-cell">
+            <div class="detail-cell__title">开发区关联的园区</div>
+            <div class="detail-cell__body">
+              <div
+                v-for="item of detail.parkPageList"
+                :key="item.id"
+                class="detail-cell__list-item"
+                @click="toIndustrial(item)"
+                style="margin-bottom: 20px; border-top: none; padding: 0"
+              >
+                <park-card-vue :detail="item"></park-card-vue>
+                <!-- <ListItem :item="item" @to-detail="toCarrier(item)" no-address>
+                  <template>
+                    <div>
+                      <div
+                        class="flex align-center flex1"
+                        style="margin-bottom: 20rpx"
+                      >
+                        <div>载体类型：</div>
+                        <div>{{ handleValue(item.type) }}</div>
+                      </div>
+                      <div class="flex align-center flex1">
+                        <div>建筑面积：</div>
+                        <div>{{ handleValue(item.area, "m²") }}</div>
+                      </div>
+                    </div>
+                  </template>
+                </ListItem> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </CommonDetail>
+  </div>
+</template>
+<script>
+import CommonDetail from "./components/CommonDetail.vue";
+import api from "@/api/url/index.js";
+import { handleValue } from "@/utils/utils.js";
+import ListItem from "./components/ListItem.vue";
+import parkCardVue from "../../components/media/park-card.vue";
+
+export default {
+  name: "IndustrialDetail",
+  components: {
+    CommonDetail,
+    ListItem,
+    parkCardVue,
+  },
+  data() {
+    return {
+      queryUrl: api.developDetail,
+    };
+  },
+  methods: {
+    handleValue,
+    businessInfo(detail) {
+      const { investmentDetails } = detail;
+      return investmentDetails
+        ? investmentDetails
+            .map(({ codeName, details }) => {
+              return `${codeName}-${details}`;
+            })
+            .join("；")
+        : "";
+    },
+    toIndustrial({ id }) {
+      uni.navigateTo({
+        url: `/pages/detail/industrialDetail?id=${id}`,
+      });
+    },
+  },
+};
+</script>

src/pages/entryPark/index.vue

@@ -16,7 +16,7 @@
       </view>
       <div
         class="flex align-center justify-between relative z-5001"
-        style="padding: 25rpx 23rpx;background: #fff;width: 100vw "
+        style="padding: 25rpx 23rpx; background: #fff; width: 100vw"
       >
         <div class="flex align-center">
           <div class="search-input">
@@ -43,9 +43,7 @@
               src="/static/img/icon-exchange.png"
               style="width: 24rpx; height: 25rpx"
             ></image>
-            <p style="font-size: 28rpx; color: #33;margin-left: 12rpx;">
-              地图
-            </p>
+            <p style="font-size: 28rpx; color: #33; margin-left: 12rpx">地图</p>
           </div>
         </div>
       </div>
@@ -61,16 +59,37 @@
       </div>
     </div>
 
-    <view v-if="mode === 'list'" class="tab-contant content" :class="{'no-filter': activeBar === 1}">
+    <view
+      v-if="mode === 'list'"
+      class="tab-contant content"
+      :class="{ 'no-filter': activeBar === 1 }"
+    >
       <view
         class="media-card"
         v-for="cardInfo in dataList"
         :key="cardInfo.id"
         @click="toDetail(cardInfo)"
       >
-        <park-card-vue :key-words="keyWords" :detail="cardInfo" v-if="activeBar == 0"></park-card-vue>
-        <land-card-vue :key-words="keyword" :detail="cardInfo" v-if="activeBar == 1"></land-card-vue>
-        <carrier-card-vue :key-words="keyword" :detail="cardInfo" v-if="activeBar == 2"></carrier-card-vue>
+        <develop-card-vue
+          :key-words="keyWords"
+          :detail="cardInfo"
+          v-if="activeBar == 0"
+        ></develop-card-vue>
+        <park-card-vue
+          :key-words="keyWords"
+          :detail="cardInfo"
+          v-if="activeBar == 1"
+        ></park-card-vue>
+        <land-card-vue
+          :key-words="keyword"
+          :detail="cardInfo"
+          v-if="activeBar == 2"
+        ></land-card-vue>
+        <carrier-card-vue
+          :key-words="keyword"
+          :detail="cardInfo"
+          v-if="activeBar == 3"
+        ></carrier-card-vue>
       </view>
       <u-loadmore
         v-if="dataList.length && (!haveMore || isLoading)"
@@ -95,13 +114,63 @@
       >
       </u-empty>
     </view>
-    <div v-else class="content z-100" :class="{'no-filter': activeBar === 1}" style="padding-top: 246rpx;">
-      <map id="mapId" :include-points="points" :polygons="polygons" @markertap="handleMarkerClick" @callouttap="handleMarkerClick" :scale='10' style="width: 100%;height: calc(100vh - 246rpx)" latitude="31.464086" longitude="116.944909" class="map" :markers="markers">
+    <div
+      v-else
+      class="content z-100"
+      :class="{ 'no-filter': activeBar === 1 }"
+      style="padding-top: 246rpx"
+    >
+      <map
+        id="mapId"
+        :include-points="points"
+        :polygons="polygons"
+        @markertap="handleMarkerClick"
+        @callouttap="handleMarkerClick"
+        :scale="10"
+        style="width: 100%; height: calc(100vh - 246rpx)"
+        latitude="31.464086"
+        longitude="116.944909"
+        class="map"
+        :markers="markers"
+      >
       </map>
-      <div v-if="activeInfo.id" :key="activeInfo.id" @click="toDetail(activeInfo)" style="position: fixed;padding: 0 30rpx;bottom: 30rpx;width: 100vw;z-index: 999;box-sizing: border-box;">
-        <park-card-vue :key="activeInfo.id" :key-words="keyWords" :detail="activeInfo" v-if="activeBar == 0"></park-card-vue>
-        <land-card-vue :key="activeInfo.id" :key-words="keyword" :detail="activeInfo" v-if="activeBar == 1"></land-card-vue>
-        <carrier-card-vue :key="activeInfo.id" :key-words="keyword" :detail="activeInfo" v-if="activeBar == 2"></carrier-card-vue>
+      <div
+        v-if="activeInfo.id"
+        :key="activeInfo.id"
+        @click="toDetail(activeInfo)"
+        style="
+          position: fixed;
+          padding: 0 30rpx;
+          bottom: 30rpx;
+          width: 100vw;
+          z-index: 999;
+          box-sizing: border-box;
+        "
+      >
+        <develop-card-vue
+          :key="activeInfo.id"
+          :key-words="keyWords"
+          :detail="activeInfo"
+          v-if="activeBar == 0"
+        ></develop-card-vue>
+        <park-card-vue
+          :key="activeInfo.id"
+          :key-words="keyWords"
+          :detail="activeInfo"
+          v-if="activeBar == 1"
+        ></park-card-vue>
+        <land-card-vue
+          :key="activeInfo.id"
+          :key-words="keyword"
+          :detail="activeInfo"
+          v-if="activeBar == 2"
+        ></land-card-vue>
+        <carrier-card-vue
+          :key="activeInfo.id"
+          :key-words="keyword"
+          :detail="activeInfo"
+          v-if="activeBar == 3"
+        ></carrier-card-vue>
       </div>
     </div>
   </view>
@@ -110,13 +179,15 @@
 <script>
 import API from "@/api/url";
 import store from "../../store";
+import developCardVue from "../../components/media/develop-card.vue";
 import carrierCardVue from "../../components/media/carrier-card.vue";
 import parkCardVue from "../../components/media/park-card.vue";
 import landCardVue from "../../components/media/land-card.vue";
 import dropdownVue from "../../components/dropdown/dropdown.vue";
-import areaData from './areaData.js';
+import areaData from "./areaData.js";
 export default {
   components: {
+    developCardVue,
     carrierCardVue,
     parkCardVue,
     landCardVue,
@@ -126,8 +197,8 @@ export default {
     return {
       activeBar: 0,
       dataList: [],
-      tabBarList: ["产业园", "土地", "载体"],
-      api: API.parkList,
+      tabBarList: ["开发区", "产业园", "土地", "载体"],
+      api: API.developList,
       pageNum: 1,
       haveMore: true,
       isLoading: true,
@@ -135,12 +206,27 @@ export default {
         {
           points: areaData,
           strokeWidth: 2,
-          strokeColor: '#4274EF',
-          fillColor: '#4274EF10',
-        }
+          strokeColor: "#4274EF",
+          fillColor: "#4274EF10",
+        },
       ],
       //筛选菜单列表
       menuList: [
+        [
+          {
+            id: 1,
+            name: "招商方向",
+            isMultiple: false, //是否多选
+            showType: 3, //下拉框类型(1、2、3、4)
+          },
+          {
+            id: 2,
+            name: "面积",
+            isMultiple: false, //是否多选
+            showType: 3, //下拉框类型(1、2、3、4)
+            isSingle: true,
+          },
+        ],
         [
           {
             id: 1,
@@ -189,17 +275,14 @@ export default {
             isMultiple: false, //是否多选
             showType: 3, //下拉框类型(1、2、3、4)
           },
-        ]
+        ],
       ],
       // 筛选项数据
       filterList: {
         itemList1: [],
-        itemList2: [
-        ],
-        itemList3: [
-        ],
-        itemList4: [
-        ],
+        itemList2: [],
+        itemList3: [],
+        itemList4: [],
       },
       // 筛选选择数据
       filterChoice: {
@@ -208,11 +291,11 @@ export default {
         itemList3: [],
         itemList4: [],
       },
-      searchKey: '',
-      keyWords: '',
-      mode: 'list',
+      searchKey: "",
+      keyWords: "",
+      mode: "list",
       activeInfo: {},
-      points: [] // 所有标记点坐标集合
+      points: [], // 所有标记点坐标集合
     };
   },
   mounted() {
@@ -221,11 +304,19 @@ export default {
   },
   methods: {
     initFilterList() {
-      const list = [this.initIndustryList(), store.dispatch('getFilterEnum')];
+      const list = [this.initIndustryList(), store.dispatch("getFilterEnum")];
       Promise.all(list).then(([industryList]) => {
         this.filterList = [
           {
-            itemList1: industryList.map((i) => ({ dictLabel: i, dictValue: i, dictType: 'primaryIndustry' })),
+            itemList1: this.filterEnum.development_direction,
+            itemList2: this.filterEnum.development_area,
+          },
+          {
+            itemList1: industryList.map((i) => ({
+              dictLabel: i,
+              dictValue: i,
+              dictType: "primaryIndustry",
+            })),
             itemList2: this.filterEnum.park_area,
           },
           {
@@ -236,9 +327,9 @@ export default {
             itemList1: this.filterEnum.carrier_type,
             itemList2: this.filterEnum.carrier_construction,
             itemList3: this.filterEnum.carrier_area,
-          }
-        ]
-      })
+          },
+        ];
+      });
     },
     initIndustryList() {
       return this.$fetch({
@@ -246,16 +337,16 @@ export default {
         methods: "get",
         data: {},
       });
-    } ,
+    },
     handleParams(params) {
       const config = {
-        park_area: 'parkArea',
-        carrier_type: 'carrierType',
-        carrier_construction: 'carrierConstruction',
-        carrier_area: 'carrierArea',
-        land_type: 'landType',
-        land_area: 'area',
-      }
+        park_area: "parkArea",
+        carrier_type: "carrierType",
+        carrier_construction: "carrierConstruction",
+        carrier_area: "carrierArea",
+        land_type: "landType",
+        land_area: "area",
+      };
       const result = Object.entries(params).map(([key, value]) => {
         const target = config[key];
         if (target) {
@@ -275,13 +366,14 @@ export default {
       // this.filterChoice.map(item => {
       //   searchCondition[item.dictType] = item.dictValue;
       // })
-      for(const key in this.filterChoice) {
-        console.log(key, this.filterChoice, this.filterChoice[key])
-        if(this.filterChoice[key].length){
-          searchCondition[this.filterChoice[key][0].dictType] = this.filterChoice[key][0].dictValue;
+      for (const key in this.filterChoice) {
+        console.log(key, this.filterChoice, this.filterChoice[key]);
+        if (this.filterChoice[key].length) {
+          searchCondition[this.filterChoice[key][0].dictType] =
+            this.filterChoice[key][0].dictValue;
         }
       }
-      searchCondition.name = this.searchKey
+      searchCondition.name = this.searchKey;
       searchCondition = this.handleParams(searchCondition);
       this.$fetch({
         url: this.api,
@@ -292,36 +384,32 @@ export default {
         data: {
           current: this.pageNum,
           size: 20,
-          condition: searchCondition
+          condition: searchCondition,
         },
         success: (res) => {
           this.isLoading = false;
-            this.dataList.push(...res.records);
-            this.haveMore =
-              this.dataList.length < res.total;
-
+          this.dataList.push(...res.records);
+          this.haveMore = this.dataList.length < res.total;
         },
       });
     },
     toDetail(data) {
       if (this.activeBar === 0) {
-        uni.navigateTo(
-          {
-            url: "/pages/detail/industrialDetail?id=" + data.id,
-          }
-        );
+        uni.navigateTo({
+          url: "/pages/detail/developDetail?id=" + data.id,
+        });
       } else if (this.activeBar === 1) {
-        uni.navigateTo(
-          {
-            url: "/pages/detail/landDetail?id=" + data.id,
-          }
-        );
+        uni.navigateTo({
+          url: "/pages/detail/industrialDetail?id=" + data.id,
+        });
+      } else if (this.activeBar === 1) {
+        uni.navigateTo({
+          url: "/pages/detail/landDetail?id=" + data.id,
+        });
       } else {
-        uni.navigateTo(
-          {
-            url: "/pages/detail/carrierDetail?id=" + data.id,
-          }
-        );
+        uni.navigateTo({
+          url: "/pages/detail/carrierDetail?id=" + data.id,
+        });
       }
     },
     changeTab(tab) {
@@ -330,8 +418,8 @@ export default {
       this.activeBar = tab;
       this.pageNum = 1;
       this.haveMore = true;
-      this.searchKey = '';
-      this.keyWords = ''
+      this.searchKey = "";
+      this.keyWords = "";
       this.filterChoice = {
         itemList1: [],
         itemList2: [],
@@ -340,12 +428,15 @@ export default {
       };
       switch (tab) {
         case 0:
-          this.api = API.parkList;
+          this.api = API.developList;
           break;
         case 1:
-          this.api = API.landList;
+          this.api = API.parkList;
           break;
         case 2:
+          this.api = API.landList;
+          break;
+        case 3:
           this.api = API.carrierList;
           break;
       }
@@ -367,15 +458,16 @@ export default {
     },
     // 模式切换
     changeMode() {
-      this.mode = this.mode === 'list' ? 'map' : 'list';
+      this.mode = this.mode === "list" ? "map" : "list";
       this.activeInfo = {};
     },
     handleMarkerClick(e) {
+      const temp = this.dataList.filter(
+        (item) => item.id === e.detail.markerId
+      )[0];
 
-      const temp = this.dataList.filter(item => item.id === e.detail.markerId)[0];
-
-      this.$set(this, 'activeInfo', temp)
-    }
+      this.$set(this, "activeInfo", temp);
+    },
   },
   computed: {
     filterEnum() {
@@ -383,8 +475,8 @@ export default {
     },
     markers() {
       let temp = [];
-      this.points = []
-      this.dataList.forEach((item,index) => {
+      this.points = [];
+      this.dataList.forEach((item, index) => {
         temp.push({
           id: item.id,
           latitude: item.latitude + index * 0.00001 * Math.random(100),
@@ -392,23 +484,24 @@ export default {
           joinCluster: this.activeBar != 2,
           width: 27,
           height: 33,
-          iconPath: 'https://cfld-obs-pro01.obs.cn-north-4.myhuaweicloud.com/img/system/single1.png',
+          iconPath:
+            "https://cfld-obs-pro01.obs.cn-north-4.myhuaweicloud.com/img/system/single1.png",
           callout: {
             content: item.name,
             padding: 5,
-            display: 'ALWAYS',
-            textAlign: 'center',
-            color: '#ffffff',
-            bgColor: '#4374EF'
-          }
-        })
+            display: "ALWAYS",
+            textAlign: "center",
+            color: "#ffffff",
+            bgColor: "#4374EF",
+          },
+        });
         this.points.push({
           latitude: item.latitude,
-          longitude: item.longitude
-        })
-      })
-      return temp || []
-    }
+          longitude: item.longitude,
+        });
+      });
+      return temp || [];
+    },
   },
   watch: {
     refreshCollectionPage(newVal) {
@@ -461,7 +554,7 @@ export default {
   height: 10rpx;
   border-radius: 10rpx;
   margin-top: -10rpx;
-  background: linear-gradient(to right, #4374EF 0%, rgba(0,0,0,0) 100%);
+  background: linear-gradient(to right, #4374ef 0%, rgba(0, 0, 0, 0) 100%);
   display: inline-block;
   overflow: hidden;
 }
@@ -483,14 +576,14 @@ export default {
   color: #4d4d4d;
 }
 .red {
-  color: #4374EF;
+  color: #4374ef;
 }
 .search-input {
   position: relative;
   padding: 0 24rpx;
   width: 567rpx;
   height: 64rpx;
-  background: #F6FAFF;
+  background: #f6faff;
   border-radius: 12rpx;
   vertical-align: middle;
   display: flex;
@@ -516,7 +609,7 @@ export default {
   position: fixed;
   top: 0;
   right: 0;
-  left: 0;;
+  left: 0;
   background-color: white;
   z-index: 101;
 }

src/pages/index/index.vue

 <template>
   <page-meta page-style="overflow: hidden">
-    <div style="width: 100vw;height: 70vh;background: #021129">
-      <img src="https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg.png" style="width: 100vw;" mode='widthFix' alt="">
+    <div style="width: 100vw; height: 70vh; background: #021129">
+      <img
+        src="https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg.png"
+        style="width: 100vw"
+        mode="widthFix"
+        alt=""
+      />
     </div>
 
-    <touch-box :touchHeight='500' @get-end-detail="getMaxHeight">
-      <div style="height: 690px;" :style="{'overflow-y': allowScroll? 'scroll': 'hidden'}" ref="scrollView" id="scrollView">
-        <div style="height: 10rpx;"></div>
-        <video v-if="videoInfo.videourl" style="width: 100%;height: 418rpx;" :src="videoInfo.videourl" :poster="videoInfo.videoCover" 	object-fit="fill"></video>
+    <touch-box :touchHeight="500" @get-end-detail="getMaxHeight">
+      <div
+        style="height: 690px"
+        :style="{ 'overflow-y': allowScroll ? 'scroll' : 'hidden' }"
+        ref="scrollView"
+        id="scrollView"
+      >
+        <div style="height: 10rpx"></div>
+        <video
+          v-if="videoInfo.videourl"
+          style="width: 100%; height: 418rpx"
+          :src="videoInfo.videourl"
+          :poster="videoInfo.videoCover"
+          object-fit="fill"
+        ></video>
         <section-title-vue title="舒城荣誉"></section-title-vue>
         <div class="flex honor-group">
-          <div class="flex honor-item" v-for="item in honorList" :key="item.name" :style="{'backgroundImage': 'url('+ item.bg +')'}">
+          <div
+            class="flex honor-item"
+            v-for="item in honorList"
+            :key="item.name"
+            :style="{ backgroundImage: 'url(' + item.bg + ')' }"
+          >
             <div class="flex align-center" style="width: 130px">
-              <p>{{item.name}}</p>
+              <p>{{ item.name }}</p>
             </div>
-            <img class="honor-icon" :class="item.iconClass" :src="item.icon" alt="">
+            <img
+              class="honor-icon"
+              :class="item.iconClass"
+              :src="item.icon"
+              alt=""
+            />
           </div>
-          <div class="honor-item flex flex-column align-center" style="width: 100%;text-align: center;padding-top: 14rpx;background-image: url(https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg10.png)">
-            <img src="/static/img/home/icon-home10.png" style="width: 49rpx;height: 45rpx;margin-bottom: 10rpx;flex-shrink: 0;" alt="">
+          <div
+            class="honor-item flex flex-column align-center"
+            style="
+              width: 100%;
+              text-align: center;
+              padding-top: 14rpx;
+              background-image: url(https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg10.png);
+            "
+          >
+            <img
+              src="/static/img/home/icon-home10.png"
+              style="
+                width: 49rpx;
+                height: 45rpx;
+                margin-bottom: 10rpx;
+                flex-shrink: 0;
+              "
+              alt=""
+            />
             <p>国家生态文明建设示范区</p>
           </div>
         </div>
         <!--  -->
         <section-title-vue title="数说舒城"></section-title-vue>
-        <div class="flex flex-wrap ">
-          <div class="num-data" v-for="item in numList" :key="item">{{item}}</div>
+        <div class="flex flex-wrap">
+          <div class="num-data" v-for="item in numList" :key="item">
+            {{ item }}
+          </div>
         </div>
-        <div style="margin-top: 50rpx;">
-          <img src="https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/data-banner.png" style="width: 100%" mode="widthFix" alt="">
+        <div style="margin-top: 50rpx">
+          <img
+            src="https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/data-banner.png"
+            style="width: 100%"
+            mode="widthFix"
+            alt=""
+          />
         </div>
         <div class="flex flex-wrap justify-between data-box">
           <div class="flex flex-column data-wrap">
@@ -50,123 +100,290 @@
             <p class="top-text">3项</p>
             <p class="bottom-text">投融资服务</p>
           </div>
-          <div class="flex align-center data-wrap" style="width: 100%;">
-            <p class="bottom-text" style="margin-right: 100rpx;">受理群众热线：</p>
+          <div class="flex align-center data-wrap" style="width: 100%">
+            <p class="bottom-text" style="margin-right: 100rpx">
+              受理群众热线：
+            </p>
             <div class="flex flex-column align-center">
               <p class="top-text">5300余件</p>
               <p class="bottom-text">办件量</p>
             </div>
-            <span style="width: 2rpx;height: 48rpx;background: #fff;border-radius: 1rpx;margin-left: 50rpx;margin-right: 50rpx;"></span>
+            <span
+              style="
+                width: 2rpx;
+                height: 48rpx;
+                background: #fff;
+                border-radius: 1rpx;
+                margin-left: 50rpx;
+                margin-right: 50rpx;
+              "
+            ></span>
             <div class="flex flex-column align-center">
               <p class="top-text">15000余次</p>
               <p class="bottom-text">接受咨询</p>
             </div>
           </div>
         </div>
-        <div style="height: 200rpx;"></div>
+        <section-title-vue title="人文舒城"></section-title-vue>
+        <div
+          style="height: 559rpx; padding: 35rpx 24rpx; border-radius: 4rpx"
+          class="humanity-section"
+        >
+          <p
+            style="
+              color: #fff;
+              font-size: 28rpx;
+              line-height: 60rpx;
+              margin-bottom: 8rpx;
+              font-weight: 500;
+            "
+          >
+            历史悠久
+          </p>
+          <p
+            style="
+              color: #fff;
+              font-size: 26rpx;
+              line-height: 50rpx;
+              margin-bottom: 8rpx;
+              font-weight: 500;
+            "
+          >
+            建县至今2200多年，底蕴深厚。
+          </p>
+          <div style="overflow-x: scroll">
+            <div style="font-size: 0; white-space: nowrap">
+              <img
+                src="/static/img/home/humanity1.png"
+                alt=""
+                style="width: 240rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+              <img
+                src="/static/img/home/humanity2.png"
+                alt=""
+                style="width: 240rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+              <img
+                src="/static/img/home/humanity3.png"
+                alt=""
+                style="width: 240rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+              <img
+                src="/static/img/home/humanity4.png"
+                alt=""
+                style="width: 240rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+              <img
+                src="/static/img/home/humanity5.png"
+                alt=""
+                style="width: 240rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          style="height: 829rpx; padding: 35rpx 24rpx; border-radius: 4rpx"
+          class="humanity-section"
+        >
+          <p
+            style="
+              color: #fff;
+              font-size: 28rpx;
+              line-height: 60rpx;
+              margin-bottom: 8rpx;
+              font-weight: 500;
+            "
+          >
+            环境优美
+          </p>
+          <p
+            style="
+              color: #fff;
+              font-size: 26rpx;
+              line-height: 50rpx;
+              margin-bottom: 8rpx;
+              font-weight: 500;
+            "
+          >
+            有“安徽北戴河，合肥后花园”之称。
+          </p>
+          <div style="overflow-x: scroll">
+            <div style="font-size: 0; white-space: nowrap">
+              <img
+                src="/static/img/home/environment1.png"
+                alt=""
+                style="width: 363rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+              <img
+                src="/static/img/home/environment2.png"
+                alt=""
+                style="width: 363rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+              <img
+                src="/static/img/home/environment3.png"
+                alt=""
+                style="width: 363rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+              <img
+                src="/static/img/home/environment4.png"
+                alt=""
+                style="width: 363rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+            </div>
+          </div>
+          <p
+            style="
+              color: #fff;
+              font-size: 28rpx;
+              line-height: 60rpx;
+              margin-bottom: 8rpx;
+              margin-top: 24rpx;
+              font-weight: 500;
+            "
+          >
+            学风优良
+          </p>
+          <p
+            style="
+              color: #fff;
+              font-size: 26rpx;
+              line-height: 50rpx;
+              margin-bottom: 8rpx;
+              font-weight: 500;
+            "
+          >
+            引进重点中学，提升教育质量。
+          </p>
+          <div style="overflow-x: scroll">
+            <div style="font-size: 0; white-space: nowrap">
+              <img
+                src="/static/img/home/school1.png"
+                alt=""
+                style="width: 363rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+              <img
+                src="/static/img/home/school2.png"
+                alt=""
+                style="width: 363rpx; margin-right: 16rpx"
+                mode="widthFix"
+              />
+            </div>
+          </div>
+        </div>
+        <div style="height: 400rpx"></div>
       </div>
     </touch-box>
   </page-meta>
 </template>
 <script>
-import BabTouchbox from '@/components/bab-Touchbox/bab-Touchbox.vue'
-import API from '@/api/url'
-import sectionTitleVue from '@/components/section-title/section-title.vue'
-import TouchBox from '../../components/touch-box/touch-box.vue'
-export default{
-  components: {BabTouchbox, sectionTitleVue, TouchBox},
+import BabTouchbox from "@/components/bab-Touchbox/bab-Touchbox.vue";
+import API from "@/api/url";
+import sectionTitleVue from "@/components/section-title/section-title.vue";
+import TouchBox from "../../components/touch-box/touch-box.vue";
+export default {
+  components: { BabTouchbox, sectionTitleVue, TouchBox },
   data() {
     return {
       honorList: [
         {
-          icon: '/static/img/home/icon-home1.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg1.png',
-          name: '全国环境百强县'
+          icon: "/static/img/home/icon-home1.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg1.png",
+          name: "全国环境百强县",
         },
         {
-          icon: '/static/img/home/icon-home2.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg2.png',
-          name: '安徽省制造业发展增速十快县'
+          icon: "/static/img/home/icon-home2.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg2.png",
+          name: "安徽省制造业发展增速十快县",
         },
         {
-          icon: '/static/img/home/icon-home3.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg3.png',
-          name: '安徽省民营经济发展先进县'
+          icon: "/static/img/home/icon-home3.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg3.png",
+          name: "安徽省民营经济发展先进县",
         },
         {
-          icon: '/static/img/home/icon-home4.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg4.png',
-          name: '国家卫生县城'
+          icon: "/static/img/home/icon-home4.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg4.png",
+          name: "国家卫生县城",
         },
         {
-          icon: '/static/img/home/icon-home5.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg5.png',
-          name: '中国未来投资热点百佳县'
+          icon: "/static/img/home/icon-home5.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg5.png",
+          name: "中国未来投资热点百佳县",
         },
         {
-          icon: '/static/img/home/icon-home6.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg6.png',
-          name: '全国科技进步先进县'
+          icon: "/static/img/home/icon-home6.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg6.png",
+          name: "全国科技进步先进县",
         },
         {
-          icon: '/static/img/home/icon-home10.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg7.png',
-          name: '全国交通运输一体化创建示范县',
-          iconClass: 'w49'
+          icon: "/static/img/home/icon-home10.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg7.png",
+          name: "全国交通运输一体化创建示范县",
+          iconClass: "w49",
         },
         {
-          icon: '/static/img/home/icon-home8.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg8.png',
-          name: '全国电子商务进农村综合示范县',
-          iconClass: 'w49'
+          icon: "/static/img/home/icon-home8.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg8.png",
+          name: "全国电子商务进农村综合示范县",
+          iconClass: "w49",
         },
         {
-          icon: '/static/img/home/icon-home9.png',
-          bg: 'https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg9.png',
-          name: '安徽省质量认证示范县',
-          iconClass: 'w49'
+          icon: "/static/img/home/icon-home9.png",
+          bg: "https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/bg9.png",
+          name: "安徽省质量认证示范县",
+          iconClass: "w49",
         },
       ],
       numList: [],
       videoInfo: {
-        videourl: '',
-        videoCover: ''
+        videourl: "",
+        videoCover: "",
       },
       maxHeight: 400,
       currentHeight: 0,
-      allowScroll: false
-    }
+      allowScroll: false,
+    };
   },
   mounted() {
     this.$fetch({
       url: API.homeInfo,
-      methods: 'get',
-      success: res => {
-        console.log(res)
+      methods: "get",
+      success: (res) => {
+        console.log(res);
         this.numList = res.details;
-        this.videoInfo = res.videoVoList.length?res.videoVoList[0] : {}
-      }
-    })
+        this.videoInfo = res.videoVoList.length ? res.videoVoList[0] : {};
+      },
+    });
   },
   methods: {
     getMaxHeight(e) {
-      console.log('max', e, );
+      console.log("max", e);
       const query = uni.createSelectorQuery().in(this);
-      console.log(query.select('#scrollView'))
+      console.log(query.select("#scrollView"));
       this.maxHeight = e.maxHeight;
-      if(e.curTop == e.maxTop) {
-        this.allowScroll = true
+      if (e.curTop == e.maxTop) {
+        this.allowScroll = true;
         // this.$refs.scrollView.style.overflowY = 'scroll'
-      }else {
+      } else {
         // this.$refs.scrollView.style.overflowY = 'hidden'
         // this.$refs.scrollView.scrollTop = 0
-        query.select('#scrollView').scrollTop = 0
+        query.select("#scrollView").scrollTop = 0;
         setTimeout(() => {
-          this.allowScroll = false
-        }, 500)
+          this.allowScroll = false;
+        }, 500);
       }
     },
-    handleScroll() {}
+    handleScroll() {},
     // handleCurrent(e){
     //   console.log('handleCurrent', e);
     //   this.initHeight = this.initHeight ? this.initHeight : e
@@ -186,7 +403,7 @@ export default{
   //       imageUrl: ""
   //     }
   // },
-}
+};
 </script>
 <style lang="scss" scoped>
 .honor-group {
@@ -219,7 +436,7 @@ export default{
   }
 }
 .num-data {
-  background: #4374EF;
+  background: #4374ef;
   border-radius: 18rpx;
   line-height: 24rpx;
   color: #fff;
@@ -243,9 +460,15 @@ export default{
 .data-box {
   padding: 10rpx 14rpx;
   border: 1px solid;
-  border-image: radial-gradient(circle, rgba(67, 116, 239, 1), rgba(221, 111, 59, 1), rgba(65, 119, 253, 1)) 1 1;
+  border-image: radial-gradient(
+      circle,
+      rgba(67, 116, 239, 1),
+      rgba(221, 111, 59, 1),
+      rgba(65, 119, 253, 1)
+    )
+    1 1;
   border-radius: 8rpx;
-  background: #FBFCFF;
+  background: #fbfcff;
   margin-top: 60rpx;
   overflow: hidden;
 }
@@ -254,7 +477,10 @@ export default{
   border-radius: 2rxp;
   margin-bottom: 10rpx;
   align-items: center;
-  background: #E6EDFF;
+  background: #e6edff;
 }
-
-</style>>
+.humanity-section {
+  background: url("/static/img/home/bg-history.png") 100% 100% no-repeat;
+}
+</style>
+>

src/pages/inviteInvestment/index.vue

 <template>
   <div>
-     <view class="tab_bar">
+    <view class="tab_bar">
       <view
         class="tab_item"
         :class="{ active: activeBar === index }"
@@ -12,44 +12,84 @@
         <span class="line" v-if="activeBar === index"></span>
       </view>
     </view>
-    <div style="height: 80rpx;" v-if="activeBar === 0"> </div>
-    <img  v-if="activeBar === 0" style="width: 100vw;" mode="widthFix" src="https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/zsyz_04.jpg" />
-    <div style="padding: 40rpx 23rpx;">
+    <div style="height: 80rpx" v-if="activeBar === 0"></div>
+    <img
+      v-if="activeBar === 0"
+      style="width: 100vw"
+      mode="widthFix"
+      src="https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/zsyz_04.jpg"
+    />
+    <div style="padding: 40rpx 23rpx">
       <!-- 招商亮点 -->
       <div v-if="activeBar === 0">
         <div v-for="light in lights" :key="light.title">
           <section-title :title="light.title"></section-title>
-          <p class="many-content" style="color: #606266;padding-left: 6rpx;">{{light.titleIntroduce}}</p>
+          <p class="many-content" style="color: #606266; padding-left: 6rpx">
+            {{ light.titleIntroduce }}
+          </p>
         </div>
       </div>
       <!-- 重点产业 -->
-      <div v-if="activeBar === 1" style="padding: 40rpx 23rpx;">
+      <div v-if="activeBar === 1" style="padding: 40rpx 23rpx">
         <div class="section-box" @click="toIndustryDetail(1)">
-          <img class="icon-industry" style="width: 226rpx;" src="/static/img/icon-invest-industry_3.png" alt="">
+          <img
+            class="icon-industry"
+            style="width: 226rpx"
+            src="/static/img/icon-invest-industry_3.png"
+            alt=""
+          />
           <p class="industry-name">装备制造业</p>
         </div>
         <div class="section-box" @click="toIndustryDetail(0)">
-          <img class="icon-industry" src="/static/img/icon-invest-industry_2.png" alt="">
+          <img
+            class="icon-industry"
+            src="/static/img/icon-invest-industry_2.png"
+            alt=""
+          />
           <p class="industry-name">电子信息产业</p>
         </div>
         <div class="section-box" @click="toIndustryDetail(2)">
-          <img class="icon-industry" src="/static/img/icon-invest-industry_4.png" alt="">
+          <img
+            class="icon-industry"
+            src="/static/img/icon-invest-industry_4.png"
+            alt=""
+          />
           <p class="industry-name">农副食品加工产业</p>
         </div>
       </div>
       <!-- 招商政策 -->
-      <div v-if="activeBar === 2" style="padding: 60rpx 23rpx;">
-        <div class="section-box policy-section" style="background: #F5FAFF;" @click="toPolicyDetail(0)">
-          <img class="icon-industry" src="/static/img/icon-invest-policy_1.png" alt="">
-          <p class="industry-name" style="color: #0462C1">征地和购买厂房</p>
+      <div v-if="activeBar === 2" style="padding: 60rpx 23rpx">
+        <div class="section-box policy-section" @click="toPolicyDetail(0)">
+          <img
+            class="icon-industry"
+            src="/static/img/icon-invest-policy_1.png"
+            alt=""
+          />
+          <p class="industry-name" style="color: #0462c1">征地和购买厂房</p>
         </div>
-        <div class="section-box policy-section" style="background: #F2FDFC;" @click="toPolicyDetail(1)">
-          <img class="icon-industry" src="/static/img/icon-invest-industry_3.png" alt="">
-          <p class="industry-name" style="color: #01A192">租赁厂房</p>
+        <div class="section-box policy-section" @click="toPolicyDetail(1)">
+          <img
+            class="icon-industry"
+            src="/static/img/icon-invest-policy_3.png"
+            alt=""
+          />
+          <p class="industry-name" style="color: #01a192">租赁厂房</p>
         </div>
-        <div class="section-box policy-section" style="background: #F4F5FF;" @click="toPolicyDetail(2)">
-          <img class="icon-industry" src="/static/img/icon-invest-policy_2.png" alt="">
-          <p class="industry-name" style="color: #8108C0;">其他</p>
+        <div class="section-box policy-section" @click="toPolicyDetail(2)">
+          <img
+            class="icon-industry"
+            src="/static/img/icon-invest-policy_2.png"
+            alt=""
+          />
+          <p class="industry-name" style="color: #8108c0">其他</p>
+        </div>
+        <div class="section-box policy-section" @click="toPolicyDetail(3)">
+          <img
+            class="icon-industry"
+            src="/static/img/icon-invest-industry_4.png"
+            alt=""
+          />
+          <p class="industry-name" style="color: #01a192">资料文件</p>
         </div>
       </div>
       <!-- 要素成本 -->
@@ -57,18 +97,15 @@
         <ElementCost :detail="detail"></ElementCost>
       </div>
     </div>
-    <div>
-
-    </div>
+    <div></div>
   </div>
   <!-- <div>招商引资</div> -->
-  
 </template>
 <script>
-import API from '@/api/url';
-import sectionTitle from '../../components/section-title/section-title.vue';
-import {mapMutations} from 'vuex';
-import ElementCost from '@/components/element-cost/element-cost.vue';
+import API from "@/api/url";
+import sectionTitle from "../../components/section-title/section-title.vue";
+import { mapMutations } from "vuex";
+import ElementCost from "@/components/element-cost/element-cost.vue";
 export default {
   components: { sectionTitle, ElementCost },
   data() {
@@ -77,49 +114,44 @@ export default {
       activeBar: 0,
       lights: [],
       detail: null,
-    }
+    };
   },
   mounted() {
     this.$fetch({
       url: API.investmentLights,
-      methods: 'get',
-      success: res => {
-        console.log(res)
+      methods: "get",
+      success: (res) => {
+        console.log(res);
         this.detail = res;
         this.lights = res.investmentLights;
         this.setPolicyList(res.policys);
         this.setPrimaryIndustryList(res.primaryIndustrys);
-      }
-    })
+      },
+    });
   },
   methods: {
-    ...mapMutations(['setPolicyList', 'setPrimaryIndustryList']),
+    ...mapMutations(["setPolicyList", "setPrimaryIndustryList"]),
     changeTab(index) {
       this.activeBar = index;
     },
     toPolicyDetail(index) {
       uni.navigateTo({
-        url: '/pages/inviteInvestment/policyDetail?id=' + index,
-        success: (result) => {
-          
-        },
+        url: "/pages/inviteInvestment/policyDetail?id=" + index,
+        success: (result) => {},
         fail: () => {},
-        complete: () => {}
+        complete: () => {},
       });
     },
     toIndustryDetail(index) {
       uni.navigateTo({
-        url: '/pages/inviteInvestment/industryDetail?id=' + index,
-        success: (result) => {
-          
-        },
+        url: "/pages/inviteInvestment/industryDetail?id=" + index,
+        success: (result) => {},
         fail: () => {},
-        complete: () => {}
+        complete: () => {},
       });
-         
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .tab_bar {
@@ -133,6 +165,7 @@ export default {
   top: 0;
   width: 100vw;
   box-sizing: border-box;
+  z-index: 9;
 }
 .tab_item {
   display: flex;
@@ -149,7 +182,7 @@ export default {
   height: 10rpx;
   border-radius: 10rpx;
   margin-top: -10rpx;
-  background: linear-gradient(to right, #4374EF 0%, rgba(0,0,0,0) 100%);
+  background: linear-gradient(to right, #4374ef 0%, rgba(0, 0, 0, 0) 100%);
   display: inline-block;
   overflow: hidden;
 }
@@ -161,17 +194,34 @@ export default {
   margin-bottom: 5rpx;
 }
 .policy-section {
-  height: 180rpx;
+  height: 240rpx;
   margin-bottom: 20rpx;
-  border-radius: 8rpx;
+  border-radius: 10rpx;
+  &:nth-child(1) {
+    background: url("/static/img/bg-invest-policy_1.png") 100% 100% no-repeat;
+    background-size: cover;
+  }
+  &:nth-child(2) {
+    background: url("/static/img/bg-invest-policy_2.png") 100% 100% no-repeat;
+    background-size: cover;
+  }
+  &:nth-child(3) {
+    background: url("/static/img/bg-invest-policy_3.png") 100% 100% no-repeat;
+    background-size: cover;
+  }
+  &:nth-child(4) {
+    background: url("/static/img/bg-invest-policy_4.png") 100% 100% no-repeat;
+    background-size: cover;
+  }
   .icon-industry {
-    width: 127rpx;
-    height: 107rpx;
-    left: 100rpx;
-    top: 37rpx;
+    width: 154rpx;
+    height: 154rpx;
+    left: 71rpx;
+    top: 43rpx;
   }
   .industry-name {
-    padding-left: 304rpx;
+    padding-left: 363rpx;
+    padding-top: 100rpx;
   }
 }
 .icon-industry {
@@ -183,9 +233,9 @@ export default {
 }
 .industry-name {
   font-size: 34rpx;
-  color: #003AB9;
+  color: #003ab9;
   font-weight: bold;
   padding-top: 73rpx;
   padding-left: 216rpx;
 }
-</style>
+</style>
\ No newline at end of file

src/pages/inviteInvestment/policyDetail.vue

 <template>
-  <div style="padding: 40rpx 23rpx;">
-    <div v-for="policy in policyList[pageId].info" :key='policy.name'>
-      <section-title :title="policy.name"></section-title>
-      <p class="many-content" style="color: #606266;padding-left: 6rpx;">{{policy.content}}</p>
+  <div style="padding: 40rpx 23rpx">
+    <div>
+      <div class="section-box policy-section">
+        <img
+          class="icon-industry"
+          src="/static/img/icon-invest-industry_4.png"
+          alt=""
+        />
+        <p class="industry-name" style="color: #01a192">资料文件</p>
+      </div>
+    </div>
+    <div v-for="policy in policyList[pageId].info" :key="policy.name">
+      <template v-if="pageId != 3">
+        <section-title :title="policy.name"></section-title>
+        <p class="many-content" style="color: #606266; padding-left: 6rpx">
+          {{ policy.content }}
+        </p>
+      </template>
+      <template v-else>
+        <div
+          class="flex align-center"
+          style="
+            height: 80rpx;
+            margin: 0 auto 20rpx;
+            color: #666;
+            font-size: 30rpx;
+            width: 608rpx;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+          "
+          @click="openFile(policy)"
+        >
+          <img style="width: 48rpx; height: 48rpx" src="" alt="" />
+          <p class="flex1 ell">{{ policy.name }}</p>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 <script>
-import store from '@/store'
-import sectionTitle from '../../components/section-title/section-title.vue'
+import store from "@/store";
+import sectionTitle from "../../components/section-title/section-title.vue";
 
 export default {
   components: { sectionTitle },
   data() {
     return {
-      pageId: 0
-    }
+      pageId: 0,
+    };
   },
   computed: {
     policyList() {
-      return store.state.policyList
-    }
+      return store.state.policyList;
+    },
   },
-  mounted(){
+  mounted() {
     this.pageId = this.$root.$mp.query.id;
     uni.setNavigationBarTitle({
-      title: this.policyList[this.pageId].type
+      title: this.policyList[this.pageId].type,
     });
+  },
+  methods: {
+    openFile(policy) {
+      wx.downloadFile({
+        // 示例 url，并非真实存在
+        url: policy.content,
+        success: function (res) {
+          const filePath = res.tempFilePath;
+          wx.openDocument({
+            filePath: filePath,
+            success: function (res) {
+              console.log("打开文档成功");
+            },
+          });
+        },
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+// .section-box {
+//   background-size: contain;
+//   height: 183rpx;
+//   position: relative;
+//   margin-bottom: 5rpx;
+// }
+.policy-section {
+  height: 240rpx;
+  margin-bottom: 20rpx;
+  border-radius: 10rpx;
+  background: url("/static/img/bg-invest-policy_4.png") 100% 100% no-repeat;
+  background-size: cover;
+  position: relative;
+  .icon-industry {
+    position: absolute;
+    width: 154rpx;
+    height: 154rpx;
+    left: 71rpx;
+    top: 43rpx;
+  }
+  .industry-name {
+    font-size: 34rpx;
+    color: #003ab9;
+    font-weight: bold;
+    padding-top: 100rpx;
+    padding-left: 363rpx;
   }
 }
-</script>
-<style></style>
+</style>
\ No newline at end of file