完成了方案详情

pages.json

@@ -91,6 +91,13 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/index/compontents/scheme",
+      "style": {
+        "navigationBarTitleText": "方案详情",
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/login/index",
       "style": {

pages/index/compontents/scheme.vue

@@ -0,0 +1,337 @@
+<template>
+  <view
+    :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }"
+    class="index-page"
+  >
+    <view
+      :style="{ paddingTop: safeAreaInsets.top + 'px' }"
+      class="page-navbar"
+    >
+      <view @click="returnnav" style="padding-top: 14rpx">
+        <u-icon name="arrow-left" color="#000" size="26"></u-icon>
+      </view>
+      <view class="nav">方案详情</view>
+    </view>
+  </view>
+  <!-- 红色背景 -->
+  <view
+    style="
+      background-color: red;
+      height: 30vh;
+      padding: 0 3%;
+      display: flow-root;
+    "
+  >
+    <!-- 详情 -->
+    <view class="record">
+      <view class="record-up">
+        <view class="up">
+          <view class="head"><u-avatar :src="src" size="45"></u-avatar></view>
+          <view class="text">法无边</view>
+          <view class="tag">
+            <view class="">关注</view>
+            <view class=""><u-icon name="heart"></u-icon></view>
+          </view>
+        </view>
+        <view class="centre">本月得分:{{ score }}</view>
+        <view class="centre-box">20年程序员工作经验</view>
+        <view class="below">擅长联赛：法国各级联赛</view>
+      </view>
+      <view class="record-centre">
+        <view class="up">高手简介</view>
+        <view class="below">大宗师花甲王五大得以门生之一，专攻法国版块</view>
+      </view>
+      <view class="record-below">
+        <view class="up">近20场战绩</view>
+        <view class="centre">
+          <view v-for="(item, index) in record" style="display: inline-block">
+            <u-tag v-if="item.value === 2" text="走" size="large"></u-tag>
+            <u-tag
+              v-if="item.value === 1"
+              text="错"
+              type="success"
+              size="large"
+            ></u-tag>
+            <u-tag
+              v-if="item.value === 0"
+              text="中"
+              type="error"
+              size="large"
+            ></u-tag>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 购买 -->
+    <view class="purchase">
+      <view class="purchase-one">
+        <view class="span">
+          <u-avatar :src="src"></u-avatar>
+          <span>日本</span>
+        </view>
+        <view>vs</view>
+        <view class="span">
+          <u-avatar :src="src"></u-avatar>
+          <span>韩国</span>
+        </view>
+      </view>
+      <view class="purchase-tow">
+        <view>2024-04-11 20:00:00</view>
+        <view>泰国联赛杯</view>
+      </view>
+      <view class="purchase-three">
+        <view class="purchase-three-up">
+          <view class="purchase-three-up-left">
+            <view class="purchase-three-up-left-atext">方案内容</view>
+            <view class="purchase-three-up-left-btext"
+              >购买成功后可查看方案内容</view
+            >
+          </view>
+          <view class="purchase-three-up-right">
+            <span style="font-size: 32rpx">¥</span>288.00
+          </view>
+        </view>
+        <view class="purchase-three-below">
+          <view v-for="item in 2" class="purchase-three-below-box">
+            <view class="purchase-three-below-box-up">188</view>
+            <view class="purchase-three-below-box-below">基础方案</view>
+          </view>
+        </view>
+      </view>
+      <view class="purchase-four">
+        <u-button color="#ff275e" type="primary" text="立即购买"></u-button>
+      </view>
+    </view>
+    <!-- 已购买 -->
+    <view class="purchased">
+      <view class="purchased-one"> 已购买用户(10) </view>
+      <view class="purchased-tow">
+        <view v-for="item in 10" class="purchased-tow-head">
+          <u-avatar src="src"></u-avatar>
+        </view>
+      </view>
+    </view>
+    <view style="height: 10rpx"></view>
+  </view>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  const { safeAreaInsets } = uni.getSystemInfoSync()
+  const returnnav = () => {
+    uni.navigateBack()
+  }
+  const onswitch = ref(true)
+  const score = ref(25)
+  const record = ref([
+    {
+      laede: '中',
+      value: 0,
+    },
+    {
+      laede: '中',
+      value: 0,
+    },
+    {
+      laede: '错',
+      value: 1,
+    },
+    {
+      laede: '走',
+      value: 2,
+    },
+    {
+      laede: '走',
+      value: 2,
+    },
+  ])
+  const attention = () => {
+    onswitch.value = !onswitch.value
+  }
+  const cancel = () => {
+    onswitch.value = !onswitch.value
+  }
+</script>
+
+<style lang="scss" scoped>
+  .page-navbar {
+    display: flex;
+    .nav {
+      margin-left: 32.5%;
+    }
+  }
+  .record {
+    margin: 20rpx auto 0;
+    height: 1000rpx;
+    width: 90%;
+    border: 1rpx solid #000;
+    background-color: #fff;
+    .record-up {
+      height: 35%;
+      width: 90%;
+      margin: 0 auto;
+      border-bottom: 1rpx solid #000;
+      .up {
+        display: flex;
+        justify-content: flex-start;
+        .head {
+          margin-top: 40rpx;
+          margin-right: 20rpx;
+        }
+        .text {
+          margin-top: 60rpx;
+          font-size: 36rpx;
+          font-weight: 700;
+        }
+        .tag {
+          margin-top: 60rpx;
+          margin-left: 200rpx;
+          display: flex;
+          align-items: baseline;
+        }
+      }
+      .centre {
+        padding: 12rpx 5rpx 10rpx;
+        margin-top: 20rpx;
+        border-radius: 10rpx;
+        font-weight: 700;
+      }
+      .centre-box {
+        display: inline-block;
+        font-size: 24rpx;
+        border: 1rpx solid #e8b596;
+        padding: 5rpx;
+        color: #e8b596;
+      }
+    }
+    .record-centre {
+      height: 20%;
+      width: 90%;
+      margin: 0 auto;
+      border-bottom: 1rpx solid #000;
+      .up {
+        font-size: 32rpx;
+        font-weight: 700;
+        margin-top: 30rpx;
+      }
+      .below {
+        font-size: 26rpx;
+        margin-top: 30rpx;
+      }
+    }
+    .record-below {
+      height: 50%;
+      width: 90%;
+      margin: 0 auto;
+      .centre {
+        margin-top: 20rpx;
+      }
+      .centre ::v-deep .u-tag {
+        margin: 20rpx;
+        height: 80rpx;
+      }
+      .below {
+        margin-top: 200rpx;
+      }
+    }
+  }
+  .purchase {
+    width: 90%;
+    height: 660rpx;
+    border: 1rpx solid #000;
+    border-radius: 15rpx;
+    margin: 20rpx auto 0;
+    .span {
+      display: flex;
+      align-items: center;
+    }
+    .purchase-one {
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      margin-top: 20rpx;
+    }
+    .purchase-tow {
+      display: flex;
+      justify-content: space-evenly;
+      margin-top: 20rpx;
+    }
+    .purchase-three {
+      background-color: #ff275e;
+      height: 300rpx;
+      width: 90%;
+      margin: 20rpx auto 0;
+      border-radius: 15rpx;
+      .purchase-three-up {
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-end;
+        .purchase-three-up-left {
+          .purchase-three-up-left-atext {
+            color: #fff;
+            margin-top: 20rpx;
+          }
+          .purchase-three-up-left-btext {
+            color: #fff;
+            font-size: 24rpx;
+            margin-top: 5rpx;
+          }
+        }
+        .purchase-three-up-right {
+          font-size: 50rpx;
+          margin-top: 20rpx;
+          margin-right: 5rpx;
+          color: #fff;
+        }
+      }
+      .purchase-three-below {
+        display: flex;
+        .purchase-three-below-box {
+          width: 150rpx;
+          height: 150rpx;
+          background-color: #fff;
+          margin-top: 20rpx;
+          margin-left: 20rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          .purchase-three-below-box-up {
+            margin-top: 20rpx;
+            color: #ff275e;
+            font-weight: 700;
+          }
+          .purchase-three-below-box-below {
+            margin-top: 20rpx;
+            color: #ff275e;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+    .purchase-four {
+      width: 90%;
+      margin: 0 auto;
+      margin-top: 30rpx;
+    }
+  }
+  .purchased {
+    width: 90%;
+    margin: 0 auto;
+    .purchased-one {
+      font-weight: 700;
+      margin: 15rpx 0;
+    }
+    .purchased-tow {
+      height: 500rpx;
+      border: 1rpx solid #000;
+      border-radius: 15rpx;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      overflow: hidden;
+      .purchased-tow-head {
+        margin: 10rpx;
+      }
+    }
+  }
+</style>

pages/index/index.vue

@@ -1,8 +1,15 @@
 <template>
   <view>
-    <view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
+    <view
+      :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }"
+      class="index-page"
+    >
       <!-- 自定义导航 -->
-      <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
+      <view
+        :style="{ paddingTop: safeAreaInsets.top + 'px' }"
+        class="page-navbar"
+        >足球状元榜</view
+      >
     </view>
     <view class="color">
       <view class="headPortrait">图片</view>
@@ -14,50 +21,109 @@
       </view>
       <view class="scheme">
         <view style="font-weight: 700">今日方案</view>
-        <view style="display: flex; width: 150rpx; justify-content: space-around">
+        <view
+          style="display: flex; width: 150rpx; justify-content: space-around"
+        >
           <view style="font-size: 20rpx">查看更多</view>
           <u-icon name="arrow-right" size="12" color="#555555"></u-icon>
         </view>
       </view>
-      <view style="height: 900rpx; overflow-y: auto; -webkit-overflow-scrolling: touch">
+      <view
-        <view v-for="item in 3" class="Pitch-card">
+        style="
+          height: 850rpx;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+        "
+      >
+        <view @click="scheme" v-for="item in 3" class="Pitch-card">
           <view class="one">
-            <view style="width: 330rpx; display: flex; justify-content: space-evenly; align-items: center">
+            <view
+              style="
+                width: 330rpx;
+                display: flex;
+                justify-content: space-evenly;
+                align-items: center;
+              "
+            >
               <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>
+              <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>
+              <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">
+            <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 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>
+            <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="left" style="font-weight: 700; font-size: 34rpx"
+              >推荐高手</view
+            >
             <view class="right">
-              <view @click="ViewGuru" style="font-size: 24rpx; margin-right: 15rpx">查看更多</view>
+              <view
+                @click="ViewGuru"
+                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
-          <view @click="masterHand(item)" v-for="(item, index) in 5" class="Master-card-buttom">
+          style="
+            height: 900rpx;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+          "
+        >
+          <view
+            @click="masterHand(item)"
+            v-for="(item, index) in 5"
+            class="Master-card-buttom"
+          >
             <view class="left">
               <u-avatar src=""></u-avatar>
               <view class="">人名</view>
@@ -65,7 +131,9 @@
             <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>
+                <span style="color: red; margin-left: 15rpx; font-weight: 700"
+                  >近20中15</span
+                >
               </view>
               <view class="texta">行走江湖多年关系网遍布全球</view>
               <view class="textb">全球，周易，五行，术数</view>
@@ -78,61 +146,70 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue'
-// 获取安全区域的边界
+  // 获取安全区域的边界
-const { safeAreaInsets } = uni.getSystemInfoSync();
+  const { safeAreaInsets } = uni.getSystemInfoSync()
-
+  const text = ref([
-const text = ref([
     {
-    txt: '学院'
+      txt: '学院',
     },
     {
-    txt: '方法'
+      txt: '方法',
     },
     {
-    txt: '高玩区'
+      txt: '高玩区',
-  }
+    },
-]);
+  ])
-const src = ref({
+  const src = ref({
     src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
-  text: '无头像'
+    text: '无头像',
-});
+  })
-const ViewGuru = () => {
+  const ViewGuru = () => {
     uni.navigateTo({
       url: '/pages/index/compontents/bigMaster',
-    animationDuration: '300'
+      animationDuration: '300',
-  });
+    })
-};
+  }
-const masterHand = (item) => {
+  const masterHand = (item) => {
     uni.navigateTo({
       url: '/pages/index/compontents/masterHand',
-    animationDuration: '300'
+      animationDuration: '300',
-  });
+    })
-};
+  }
-// #ifdef H5 || APP
+  const scheme = () => {
-console.log('运行在 App');
+    uni.navigateTo({
-// #endif
+      url: '/pages/index/compontents/scheme',
+      animationDuration: '300',
+    })
+  }
+  // #ifdef H5 || APP
+  console.log('运行在 App')
+  // #endif
 
-// #ifndef MP-WEIXIN
+  // #ifndef MP-WEIXIN
-console.log('不是运行在微信小程序');
+  console.log('不是运行在微信小程序')
-// #endif
+  // #endif
 </script>
 
 <style lang="scss" scoped>
-.color {
+  .color {
-  background-image: linear-gradient(to bottom, rgba(246, 233, 224), rgba(255, 255, 255));
+    background-image: linear-gradient(
+      to bottom,
+      rgba(246, 233, 224),
+      rgba(255, 255, 255)
+    );
     height: 100%;
     display: flow-root;
-}
+  }
-.index-page {
+  .index-page {
     background-size: contain;
     background-repeat: no-repeat;
     /* #ifdef H5 */
     padding-top: 20rpx;
     /* #endif */
-}
+  }
 
-.page-navbar {
+  .page-navbar {
     height: 88rpx;
     line-height: 88rpx;
     padding: 0 30rpx;
@@ -140,8 +217,8 @@ console.log('不是运行在微信小程序');
     font-weight: 700;
     color: #000;
     text-align: center;
-}
+  }
-.headPortrait {
+  .headPortrait {
     width: 650rpx;
     height: 250rpx;
     border-radius: 20rpx;
@@ -149,13 +226,13 @@ console.log('不是运行在微信小程序');
     margin-top: 100rpx;
     background-color: #fff;
     border: 1rpx solid #b6b5b3;
-}
+  }
-.Off-card {
+  .Off-card {
     display: flex;
     justify-content: space-evenly;
     margin-top: 15rpx;
-}
+  }
-.card {
+  .card {
     width: 200rpx;
     height: 200rpx;
     background-color: #fff;
@@ -164,22 +241,22 @@ console.log('不是运行在微信小程序');
     align-items: center;
     border-radius: 20rpx;
     border: 1rpx solid #b6b5b3;
-}
+  }
-.Long-card {
+  .Long-card {
     background-color: #fff;
     width: 300rpx;
     height: 120rpx;
     margin-top: 15rpx;
     border-radius: 15rpx;
     border: 1rpx solid #b6b5b3;
-}
+  }
-.scheme {
+  .scheme {
     display: flex;
     justify-content: space-between;
     margin: 35rpx;
     line-height: 40rpx;
-}
+  }
-.Pitch-card {
+  .Pitch-card {
     width: 650rpx;
     height: 400rpx;
     border-radius: 15rpx;
@@ -204,8 +281,8 @@ console.log('不是运行在微信小程序');
     .four {
       margin: 45rpx;
     }
-}
+  }
-.Master-card {
+  .Master-card {
     width: 650rpx;
     margin: auto;
     .top {
@@ -217,8 +294,8 @@ console.log('不是运行在微信小程序');
     .right {
       display: flex;
     }
-}
+  }
-.Master-card-buttom {
+  .Master-card-buttom {
     width: 650rpx;
     height: 250rpx;
     margin: auto;
@@ -246,5 +323,5 @@ console.log('不是运行在微信小程序');
       width: 300rpx;
       font-size: 16rpx;
     }
-}
+  }
 </style>