完成首页

main.js

@@ -1,18 +1,6 @@
 import App from './App';
 import uviewPlus from '@/uni_modules/uview-plus';
 
-// #ifndef VUE3
-import Vue from 'vue';
-import './uni.promisify.adaptor';
-Vue.config.productionTip = false;
-App.mpType = 'app';
-const app = new Vue({
-  ...App
-});
-app.$mount();
-// #endif
-
-// #ifdef VUE3
 import { createSSRApp } from 'vue';
 export function createApp() {
   const app = createSSRApp(App);
@@ -21,4 +9,3 @@ export function createApp() {
     app
   };
 }
-// #endif

pages/index/index.vue

@@ -19,11 +19,59 @@
           <u-icon name="arrow-right" size="12" color="#555555"></u-icon>
         </view>
       </view>
-      <view class="Pitch-card">
+      <view style="height: 900rpx; overflow-y: auto; -webkit-overflow-scrolling: touch">
-        <view class="">1</view>
+        <view v-for="item in 3" class="Pitch-card">
-        <view class="">2</view>
+          <view class="one">
-        <view class="">3</view>
+            <view style="width: 330rpx; display: flex; justify-content: space-evenly; align-items: center">
-        <view class="">4</view>
+              <span style="color: #e4b895">¥</span>
+              <span style="color: #e4b895; font-size: 45rpx">888.00</span>
+              <u-tag text="未购买" type="warning" size="mini" bgColor="#fef3ef" color="#e4b895" borderColor="#fef3ef"></u-tag>
+            </view>
+            <view style="margin-right: 35rpx; margin-top: 10rpx">
+              <u-tag text="泰国联赛杯" size="mini" type="warning" plain color="#e4b895" borderColor="#e4b895"></u-tag>
+            </view>
+          </view>
+          <view class="two">
+            <view>刚开球，来得及!</view>
+          </view>
+          <view class="three">
+            <view style="display: flex; width: 200rpx; align-items: center; justify-content: space-evenly">
+              <u-avatar src=""></u-avatar>
+              <view class="">人名</view>
+            </view>
+            <view style="font-size: 26rpx; margin-right: 35rpx">2024-04-11 18:59:52</view>
+          </view>
+          <view class="four">
+            <u-button style="color: #e5b29f; font-weight: 700" type="primary" text="立即购买" color="#fef3ef"></u-button>
+          </view>
+        </view>
+      </view>
+      <view>
+        <view class="Master-card">
+          <view class="top">
+            <view class="left" style="font-weight: 700; font-size: 34rpx">推荐高手</view>
+            <view class="right">
+              <view style="font-size: 24rpx; margin-right: 15rpx">查看更多</view>
+              <u-icon name="arrow-right" size="12" color="#555555"></u-icon>
+            </view>
+          </view>
+        </view>
+        <view style="height: 900rpx; overflow-y: auto; -webkit-overflow-scrolling: touch">
+          <view v-for="(item, index) in 5" class="Master-card-buttom">
+            <view class="left">
+              <u-avatar src=""></u-avatar>
+              <view class="">人名</view>
+            </view>
+            <view class="right">
+              <view>
+                <span style="color: red; font-weight: 700">9连红</span>
+                <span style="color: red; margin-left: 15rpx; font-weight: 700">近20中15</span>
+              </view>
+              <view class="texta">行走江湖多年关系网遍布全球</view>
+              <view class="textb">全球，周易，五行，术数</view>
+            </view>
+          </view>
+        </view>
       </view>
     </view>
   </view>
@@ -45,7 +93,10 @@ const text = ref([
     txt: '高玩区'
   }
 ]);
-
+const src = ref({
+  src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
+  text: '无头像'
+});
 // #ifdef H5 || APP
 console.log('运行在 App');
 // #endif
@@ -58,13 +109,12 @@ console.log('不是运行在微信小程序');
 <style lang="scss" scoped>
 .color {
   background-image: linear-gradient(to bottom, rgba(246, 233, 224), rgba(255, 255, 255));
-  height: 750rpx;
+  height: 100%;
   display: flow-root;
 }
 .index-page {
   background-size: contain;
   background-repeat: no-repeat;
-
   /* #ifdef H5 */
   padding-top: 20rpx;
   /* #endif */
@@ -119,10 +169,70 @@ console.log('不是运行在微信小程序');
 }
 .Pitch-card {
   width: 650rpx;
-  height: 250rpx;
+  height: 400rpx;
   border-radius: 15rpx;
-  margin: auto;
+  margin: 20rpx auto;
   background-color: #fff;
   border: 1rpx solid #b6b5b3;
+  .one {
+    display: flex;
+    margin-top: 20rpx;
+    justify-content: space-between;
+  }
+  .two {
+    font-size: 35rpx;
+    font-weight: 700;
+    margin: 10rpx 0 10rpx 20rpx;
+  }
+  .three {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .four {
+    margin: 45rpx;
+  }
+}
+.Master-card {
+  width: 650rpx;
+  margin: auto;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+  }
+  .right {
+    display: flex;
+  }
+}
+.Master-card-buttom {
+  width: 650rpx;
+  height: 250rpx;
+  margin: auto;
+  border: 1rpx solid #b6b5b3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  .left {
+    display: flex;
+    align-items: center;
+  }
+  .texta {
+    width: 300rpx;
+    height: 80rpx;
+    border: 1rpx solid #e4b895;
+    color: #e4b895;
+    font-size: 16rpx;
+    margin-top: 16rpx;
+    margin-bottom: 16rpx;
+  }
+  .textb {
+    border: 1rpx solid #e4b895;
+    color: #e4b895;
+    width: 300rpx;
+    font-size: 16rpx;
+  }
 }
 </style>