gemer zhang 1 рік тому
батько
коміт
9259d07d20

+ 3 - 3
miniprogram/pages/index/index.wxml

@@ -1,21 +1,21 @@
 <view class="page">
   <view class="top">
     <view class="section">
-      <view class="cover1"></view>
+      <view class="cover cover1"></view>
       <view class="text">
         <text> “敦敦”带您游览敦煌千年</text>
       </view>
 
     </view>
     <view class="section">
-      <view class="cover1"></view>
+      <view class="cover cover2"></view>
       <view class="text">
         <text> 3D巨制动画|聆听中国千年神话故事</text>
       </view>
 
     </view>
     <view class="section">
-      <view class="cover1"></view>
+      <view class="cover cover3"></view>
       <view class="text">
         <text> “牧童归家”|3D数字重现古代文化</text>
       </view>

+ 23 - 6
miniprogram/pages/index/index.wxss

@@ -7,6 +7,7 @@
   background-position: center top;
   background-repeat: no-repeat;
   background-size: contain;
+  justify-content: space-between;
 }
 
 .top {
@@ -26,25 +27,38 @@
   justify-content: flex-start;
   margin-bottom: 25px;
   position: relative;
+
+
 }
 
-.section .cover1 {
-  background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic1.png');
+.section .cover {
   background-repeat: no-repeat;
   background-position: top top;
   background-size: cover;
   width: 100%;
-  height: 104px;
+  height: 114px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
 }
 
+.section .cover1 {
+  background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic1.png');
+}
+
+.section .cover2 {
+  background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic2.png');
+}
+
+.section .cover3 {
+  background-image: url('https://houseoss.4dkankan.com/mini-ar-test/assets/pic3.png');
+}
+
 .section .text {
   background-color: #ffffff;
-  width: calc(100% - 8px);
-  height: 39px;
+  width: calc(100% - 28px);
+  height: 38px;
   border-radius: 10px;
   position: absolute;
   z-index: 0;
@@ -52,7 +66,10 @@
   left: 50%;
   transform: translateX(-50%);
   display: flex;
-  align-items: center;
+  align-items: flex-end;
+  padding: 0 10px;
+  padding-bottom: 5px;
+  box-shadow: 2px 6px 14px 3px rgb(0 0 0 / 20%);
 }