完成搜政策前端首页

pages/policy/index.vue

@@ -1,49 +1,217 @@
 <template>
-	<view class="content">
-		{{message}}
-	</view>
+  <view class="content">
+    <div class="swiper-box" style="width: 100%">
+      <swiper
+        class="swiper"
+        indicator-dots="true"
+        autoplay="true"
+        duration="500"
+        style="height: 300rpx"
+      >
+        <swiper-item v-for="(item, index) in swiperList" :key="index">
+          <image
+            :src="item.img"
+            mode="aspectFill"
+            style="width: 100%; height: 100%"
+          ></image>
+        </swiper-item>
+      </swiper>
+    </div>
+    <div 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
+          v-for="(item, idx) in policyList"
+          :key="idx"
+          :class="{ active: active === idx }"
+          class="policy-item-name"
+          @click="active = idx"
+        >
+          {{ item }}
+        </div>
+      </div>
+      <div class="policy-content">
+        <div
+          class="policy-content-item"
+          v-for="(item, idx) in policyData"
+          :key="idx"
+        >
+          <div class="policy-content-item-left">
+            <p class="policy-content-item-left-title">{{ item.title }}</p>
+            <div 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">
+            <image :src="item.img" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				message:'搜政策'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-			
-       }
-	}
+export default {
+  data() {
+    return {
+      swiperList: [
+        {
+          img: "/static/swiper/swiper1.jpg",
+        },
+        {
+          img: "/static/swiper/swiper2.jpg",
+        },
+      ],
+      policyList: ["省级政策", "市级政策", "区级政策", "新城政策"],
+      active: 0,
+      policyData: new Array(5).fill({
+        title:
+          "工业金额信息化部办公厅 组织开2021念工业互联网平台创新互联网工业文化产业项目征集工作。",
+        moment: "2021-07-12",
+        maxMony: "最高500.00万",
+        leftDay: "剩5天",
+        img: "/static/policy/u388.jpg",
+      }),
+    };
+  },
+  onLoad() {},
+  methods: {},
+};
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
+<style lang="scss">
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  .input-box {
+    width: 100%;
+    height: 100rpx;
+    background-color: #6ea0ec;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    image {
+      position: absolute;
+      left: 72rpx;
+      width: 40rpx;
+      height: 40rpx;
+    }
+    input {
+      background-color: #ffffff;
+      width: 90%;
+      height: 70%;
+      border-radius: 50rpx;
+      padding: 3rpx;
+      font-size: 26rpx;
+      padding-left: 80rpx;
+      box-sizing: border-box;
+    }
+  }
+  .policy-box {
+    margin-top: 50rpx;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .policy-title {
+      width: 100%;
+      p {
+        background-color: #02a7f0;
+        width: 190rpx;
+        height: 70rpx;
+        color: #ffffff;
+        border-radius: 0 40rpx 40rpx 0rpx;
+        font-size: 30rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    .policy-item-box {
+      display: flex;
+      justify-content: space-between;
+      margin: 0 20rpx;
+      margin-top: 10rpx;
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
+      .policy-item-name {
+        padding-bottom: 10rpx;
+      }
+      .active {
+        font-weight: 600;
+        border-bottom: 7rpx solid #02a7f0;
+      }
+    }
+    .policy-content {
+      width: 100%;
+      display: flex;
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+      box-sizing: border-box;
+      flex-direction: column;
+      .policy-content-item {
+        margin: 0 20rpx;
+        display: flex;
+        border-bottom: 1px solid #c1c1c1;
+        padding-bottom: 10rpx;
+        margin-top: 20rpx;
+        justify-content: space-between;
+        .policy-content-item-left {
+          display: flex;
+          flex-direction: column;
+          width: 70%;
+          .policy-content-item-left-title {
+            text-overflow: -o-ellipsis-lastline;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            line-clamp: 2;
+            -webkit-box-orient: vertical;
+            font-size: 28rpx;
+            margin-bottom: 10rpx;
+          }
+          .policy-content-item-left-time {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            .moment {
+              color: #c1c1c1;
+              font-size: 20rpx;
+              margin-right: 20rpx;
+            }
+            .maxMony {
+              font-size: 20rpx;
+              color: #00bfbf;
+              border: 1px solid #00bfbf;
+              padding: 10rpx;
+              margin-right: 20rpx;
+            }
+            .leftDay {
+              font-size: 20rpx;
+              background: #f7bbc3;
+              color: #e32579;
+              padding: 10rpx;
+              border: 1px solid #f7bbc3;
+            }
+          }
+        }
+        .policy-content-item-img {
+          image {
+            width: 180rpx;
+            height: 120rpx;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

project.config.json

@@ -0,0 +1,68 @@
+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": []
+  },
+  "setting": {
+    "bundle": false,
+    "userConfirmedBundleSwitch": false,
+    "urlCheck": true,
+    "scopeDataCheck": false,
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "autoAudits": false,
+    "newFeature": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "useIsolateContext": true,
+    "nodeModules": false,
+    "enhance": true,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmManually": false,
+    "enableEngineNative": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "showES6CompileOption": false
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.18.0",
+  "appid": "wx889d7d76e7aa3cd3",
+  "projectname": "miniprogram-1",
+  "debugOptions": {
+    "hidedInDevtools": []
+  },
+  "scripts": {},
+  "staticServerOptions": {
+    "baseURL": "",
+    "servePath": ""
+  },
+  "isGameTourist": false,
+  "condition": {
+    "search": {
+      "list": []
+    },
+    "conversation": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "plugin": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": []
+    }
+  }
+}