开发春节详情页

pages/activityDet/index.less

@@ -1 +1,77 @@
-/* pages/activityDet/index.wxss */
+.aDet {
+    width: 100%;
+    min-height: 100vh;
+    background-color: #FBEBC8;
+
+    .headImg {
+        width: 750rpx;
+        height: 510rpx;
+    }
+
+    .body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 150rpx;
+
+        .template {
+            position: relative;
+            width: 100%;
+            height: 780rpx;
+            background: url(http://reader-wx.ai160.com/images/reader/card/template.png) no-repeat;
+            background-size: 100% 100%;
+
+            .content {
+                position: absolute;
+                top: 106rpx;
+                left: 0px;
+                right: 0px;
+                margin: auto;
+                width: 650rpx;
+                height: 520rpx;
+                background-color: #D8D8D8;
+                border-radius: 20rpx;
+            }
+
+            .btns {
+                position: absolute;
+                bottom: 52rpx;
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .changeBtn {
+                    margin-left: 60rpx;
+                    width: 226rpx;
+                    height: 82rpx;
+                }
+
+                .recording {
+                    margin-right: 60rpx;
+                    width: 298rpx;
+                    height: 82rpx;
+                }
+            }
+        }
+    }
+
+    .footerBox {
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 130rpx;
+        background-color: white;
+        box-shadow: 0 2rpx 44rpx 0 rgba(0, 0, 0, 0.50);
+        font-size: 0rpx;
+
+        .goGreeting {
+            width: 313rpx;
+            height: 88rpx;
+        }
+    }
+}

pages/activityDet/index.wxml

@@ -1,3 +1,22 @@
-<view>
-    
+<view class="aDet">
+    <image src="http://reader-wx.ai160.com/images/reader/card/bitmap.png" class="headImg" />
+    <view class="body">
+        <view class="template">
+            <image src="" class="content" />
+            <view class="btns">
+                <image src="http://reader-wx.ai160.com/images/reader/card/change.png" class="changeBtn" />
+                <image src="http://reader-wx.ai160.com/images/reader/card/record_blessings2.png" class="recording" />
+            </view>
+        </view>
+        <view class="template">
+            <image src="" class="content" />
+            <view class="btns">
+                <image src="http://reader-wx.ai160.com/images/reader/card/change.png" class="changeBtn" />
+                <image src="http://reader-wx.ai160.com/images/reader/card/record_blessings2.png" class="recording" />
+            </view>
+        </view>
+    </view>
+    <view class="footerBox">
+        <image src="http://reader-wx.ai160.com/images/reader/card/my_card.png" class="goGreeting" />
+    </view>
 </view>

pages/activityDet/index.wxss

@@ -1 +1,68 @@
-/* pages/activityDet/index.wxss */
+.aDet {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #FBEBC8;
+}
+.aDet .headImg {
+  width: 750rpx;
+  height: 510rpx;
+}
+.aDet .body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 150rpx;
+}
+.aDet .body .template {
+  position: relative;
+  width: 100%;
+  height: 780rpx;
+  background: url(http://reader-wx.ai160.com/images/reader/card/template.png) no-repeat;
+  background-size: 100% 100%;
+}
+.aDet .body .template .content {
+  position: absolute;
+  top: 106rpx;
+  left: 0px;
+  right: 0px;
+  margin: auto;
+  width: 650rpx;
+  height: 520rpx;
+  background-color: #D8D8D8;
+  border-radius: 20rpx;
+}
+.aDet .body .template .btns {
+  position: absolute;
+  bottom: 52rpx;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.aDet .body .template .btns .changeBtn {
+  margin-left: 60rpx;
+  width: 226rpx;
+  height: 82rpx;
+}
+.aDet .body .template .btns .recording {
+  margin-right: 60rpx;
+  width: 298rpx;
+  height: 82rpx;
+}
+.aDet .footerBox {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 130rpx;
+  background-color: white;
+  box-shadow: 0 2rpx 44rpx 0 rgba(0, 0, 0, 0.5);
+  font-size: 0rpx;
+}
+.aDet .footerBox .goGreeting {
+  width: 313rpx;
+  height: 88rpx;
+}