静态页面

src/project/tianfuxing/AppHome/AppHome.vue

@@ -1,16 +1,162 @@
 <template>
-  <div class="Activity">
+  <div class="home">
-
+    <image class="banner" src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
+    <div class="nav">
+      <div class="nav-item">
+        <span>随手拍</span>
+      </div>
+      <div class="nav-item">
+        <span>文明倡导</span>
+        <image src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
+      </div>
+    </div>
+    <div class="activity-wrapper">
+      <h2>线下活动</h2>
+      <div class="activity-list">
+        <div class="activity-item" @click="$linkTo('./Activity')" hover-class="bg-hover" v-for="(item, index) in 10" :key="index">
+          <div class="top">
+            <h2>10月31日线下公益宣传</h2>
+            <p>百年征程波澜壮阔，百年初心历久弥坚。7月1日上午，庆祝中国共产党成立100周年大会在北百年征程波澜壮阔，百年初心历久弥坚。7月1日上午，庆祝中国共产党成立100周年大会在北…</p>
+          </div>
+          <div class="bottom">
+            <div class="item">
+              <h3>进场时间：</h3>
+              <span>2022-10-14  09:25:25  至
+2022-10-28  12:00:00</span>
+            </div>
+            <div class="item">
+              <h3>进场时间：</h3>
+              <span>2022-10-14  09:25:25  至
+2022-10-28  12:00:00</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
   export default {
-    appName: '首页',
+    appName: '天府星小程序',
     name: 'AppHome'
   }
 </script>
 
 <style lang="scss" scoped>
+  .home {
+    padding: 32px 0 40px;
 
+    .banner {
+      display: block;
+      width: 686px;
+      height: 240px;
+      margin: 0 auto 32rpx;
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 32rpx 58rpx;
+
+      .nav-item {
+        position: relative;
+        width: 328px;
+        height: 128px;
+        line-height: 128px;
+        text-align: center;
+        font-size: 30rpx;
+        overflow: hidden;
+        background: rgba($color: #fff, $alpha: 0.8);
+        border-radius: 16px;
+
+        span {
+          position: relative;
+          z-index: 1;
+          color: #333;
+          font-weight: 600;
+        }
+
+        &:last-child {
+          span {
+            color: #fff;
+            font-weight: 600;
+          }
+        }
+
+        image {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .activity-wrapper {
+      padding: 0 32px;
+
+      & > h2 {
+        margin-bottom: 26px;
+        color: #1D2229;
+        font-size: 34px;
+        font-weight: 600;
+      }
+
+      .activity-item {
+        margin-bottom: 24px;
+        padding: 24px;
+        background: #FCFCFC;
+        box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+        border-radius: 16px;
+
+        .bottom {
+          padding-top: 24px;
+
+          .item {
+            display: flex;
+            line-height: 1.3;
+            margin-bottom: 8px;
+
+            h3 {
+              font-size: 28px;
+              color: #999999;
+            }
+
+            span {
+              flex: 1;
+              text-align: justify;
+              font-size: 28px;
+              color: #333333;
+            }
+          }
+        }
+
+        .top {
+          padding-bottom: 24px;
+          border-bottom: 1px solid #eee;
+
+          h2 {
+            margin-bottom: 14px;
+            font-weight: 500;
+            font-size: 34px;
+            color: #333333;
+          }
+
+          p {
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            line-height: 1.3;
+            font-size: 30px;
+            color: #999999;
+            text-align: justify;
+          }
+        }
+      }
+    }
+  }
 </style>