强势池小程序代码初始化

dist/dev/mp-weixin/common/vendor.js

@@ -6747,6 +6747,7 @@ const createHook = (lifecycle) => (hook, target = getCurrentInstance()) => {
 const onShow = /* @__PURE__ */ createHook(ON_SHOW);
 const onLoad = /* @__PURE__ */ createHook(ON_LOAD);
 exports._export_sfc = _export_sfc;
+exports.computed = computed;
 exports.createSSRApp = createSSRApp;
 exports.e = e;
 exports.f = f;
@@ -6757,3 +6758,4 @@ exports.onLoad = onLoad;
 exports.onShow = onShow;
 exports.ref = ref;
 exports.t = t;
+exports.unref = unref;

dist/dev/mp-weixin/pages/strong/strong.js

@@ -3,8 +3,193 @@ const common_vendor = require("../../common/vendor.js");
 const _sfc_main = {
   __name: "strong",
   setup(__props) {
+    const stockList = common_vendor.ref([
+      {
+        name: "美的集团",
+        code: "000333",
+        price: "68.00",
+        score: "88.5"
+      },
+      {
+        name: "贵州茅台",
+        code: "600519",
+        price: "1700.00",
+        score: "85.1"
+      }
+    ]);
+    const selectedDate = common_vendor.ref("2025年11月20日");
+    const showBuyModalFlag = common_vendor.ref(false);
+    const showSellModalFlag = common_vendor.ref(false);
+    const currentStock = common_vendor.ref({});
+    const buyQuantity = common_vendor.ref("100");
+    const sellQuantity = common_vendor.ref("100");
+    const buyTotalAmount = common_vendor.computed(() => {
+      const qty = parseInt(buyQuantity.value) || 0;
+      const price = parseFloat(currentStock.value.price) || 0;
+      return qty * price;
+    });
+    const sellTotalAmount = common_vendor.computed(() => {
+      const qty = parseInt(sellQuantity.value) || 0;
+      const price = parseFloat(currentStock.value.price) || 0;
+      return qty * price;
+    });
+    const showBuyModal = (stock) => {
+      currentStock.value = { ...stock };
+      buyQuantity.value = "100";
+      showBuyModalFlag.value = true;
+    };
+    const closeBuyModal = () => {
+      showBuyModalFlag.value = false;
+    };
+    const showSellModal = (stock) => {
+      currentStock.value = { ...stock };
+      sellQuantity.value = "100";
+      showSellModalFlag.value = true;
+    };
+    const closeSellModal = () => {
+      showSellModalFlag.value = false;
+    };
+    const onBuyQuantityChange = (e) => {
+      const value = e.detail.value;
+      if (value && parseInt(value) % 100 !== 0) {
+        common_vendor.index.showToast({
+          title: "股数必须是100的倍数",
+          icon: "none"
+        });
+      }
+    };
+    const onSellQuantityChange = (e) => {
+      const value = e.detail.value;
+      if (value && parseInt(value) % 100 !== 0) {
+        common_vendor.index.showToast({
+          title: "股数必须是100的倍数",
+          icon: "none"
+        });
+      }
+    };
+    const handleBuy = () => {
+      const qty = parseInt(buyQuantity.value);
+      if (!qty || qty <= 0) {
+        common_vendor.index.showToast({
+          title: "请输入有效的股数",
+          icon: "none"
+        });
+        return;
+      }
+      if (qty % 100 !== 0) {
+        common_vendor.index.showToast({
+          title: "股数必须是100的倍数",
+          icon: "none"
+        });
+        return;
+      }
+      const transaction = {
+        type: "buy",
+        stockName: currentStock.value.name,
+        stockCode: currentStock.value.code,
+        price: parseFloat(currentStock.value.price),
+        quantity: qty,
+        totalAmount: buyTotalAmount.value,
+        timestamp: Date.now()
+      };
+      const transactions = common_vendor.index.getStorageSync("simulated_transactions") || [];
+      transactions.push(transaction);
+      common_vendor.index.setStorageSync("simulated_transactions", transactions);
+      closeBuyModal();
+      common_vendor.index.showToast({
+        title: "买入成功",
+        icon: "success"
+      });
+    };
+    const handleSell = () => {
+      const qty = parseInt(sellQuantity.value);
+      if (!qty || qty <= 0) {
+        common_vendor.index.showToast({
+          title: "请输入有效的股数",
+          icon: "none"
+        });
+        return;
+      }
+      if (qty % 100 !== 0) {
+        common_vendor.index.showToast({
+          title: "股数必须是100的倍数",
+          icon: "none"
+        });
+        return;
+      }
+      const transaction = {
+        type: "sell",
+        stockName: currentStock.value.name,
+        stockCode: currentStock.value.code,
+        price: parseFloat(currentStock.value.price),
+        quantity: qty,
+        totalAmount: sellTotalAmount.value,
+        timestamp: Date.now()
+      };
+      const transactions = common_vendor.index.getStorageSync("simulated_transactions") || [];
+      transactions.push(transaction);
+      common_vendor.index.setStorageSync("simulated_transactions", transactions);
+      closeSellModal();
+      common_vendor.index.showToast({
+        title: "卖出成功",
+        icon: "success"
+      });
+    };
+    const onHistorySearch = () => {
+      common_vendor.index.showToast({
+        title: "历史查询功能开发中",
+        icon: "none"
+      });
+    };
+    common_vendor.onLoad(() => {
+    });
+    common_vendor.onShow(() => {
+    });
     return (_ctx, _cache) => {
-      return {};
+      return common_vendor.e({
+        a: common_vendor.t(stockList.value.length),
+        b: common_vendor.f(stockList.value, (stock, index, i0) => {
+          return {
+            a: common_vendor.t(stock.name),
+            b: common_vendor.t(stock.code),
+            c: common_vendor.t(stock.price),
+            d: common_vendor.t(stock.score),
+            e: common_vendor.o(($event) => showBuyModal(stock), index),
+            f: common_vendor.o(($event) => showSellModal(stock), index),
+            g: index
+          };
+        }),
+        c: selectedDate.value,
+        d: common_vendor.o(($event) => selectedDate.value = $event.detail.value),
+        e: common_vendor.o(onHistorySearch),
+        f: showBuyModalFlag.value
+      }, showBuyModalFlag.value ? {
+        g: common_vendor.o(closeBuyModal),
+        h: common_vendor.t(currentStock.value.name),
+        i: common_vendor.t(currentStock.value.code),
+        j: common_vendor.t(currentStock.value.price),
+        k: common_vendor.o([($event) => buyQuantity.value = $event.detail.value, onBuyQuantityChange]),
+        l: buyQuantity.value,
+        m: common_vendor.t(common_vendor.unref(buyTotalAmount).toFixed(2)),
+        n: common_vendor.o(handleBuy),
+        o: common_vendor.o(() => {
+        }),
+        p: common_vendor.o(closeBuyModal)
+      } : {}, {
+        q: showSellModalFlag.value
+      }, showSellModalFlag.value ? {
+        r: common_vendor.o(closeSellModal),
+        s: common_vendor.t(currentStock.value.name),
+        t: common_vendor.t(currentStock.value.code),
+        v: common_vendor.t(currentStock.value.price),
+        w: common_vendor.o([($event) => sellQuantity.value = $event.detail.value, onSellQuantityChange]),
+        x: sellQuantity.value,
+        y: common_vendor.t(common_vendor.unref(sellTotalAmount).toFixed(2)),
+        z: common_vendor.o(handleSell),
+        A: common_vendor.o(() => {
+        }),
+        B: common_vendor.o(closeSellModal)
+      } : {});
     };
   }
 };

dist/dev/mp-weixin/pages/strong/strong.wxss

@@ -1,9 +1,18 @@
 
-.page-strong {
+.page-container {
+  height: 100vh;
   display: flex;
   flex-direction: column;
   background: #f5f6fb;
-  min-height: 100vh;
+}
+.scroll-view {
+  flex: 1;
+  height: 0;
+}
+.content-wrapper {
+  padding: 32rpx;
+  background: #f5f6fb;
+  min-height: 100%;
 }
 .page-title-card {
   background: #ffffff;
@@ -12,21 +21,358 @@
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
   border-radius: 0;
 }
-.content-area {
-  padding: 32rpx;
-}
 .page-title-text {
   font-size: 36rpx;
   font-weight: 800;
   color: #3F51F7;
   letter-spacing: 2rpx;
 }
-.title {
-  font-size: 36rpx;
-  font-weight: bold;
-  margin-bottom: 20rpx;
+.card {
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
+  margin-bottom: 32rpx;
+}
+
+/* 强势趋势池标题区域 */
+.pool-header-section {
+  margin-bottom: 24rpx;
+}
+.pool-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+.pool-icon {
+  font-size: 32rpx;
+  margin-right: 12rpx;
+}
+.pool-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #222222;
+}
+.pool-desc {
+  font-size: 26rpx;
+  color: #666a7f;
+}
+
+/* 性能指标卡片 */
+.performance-card {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: #f7f8fc;
+  padding: 32rpx 24rpx;
+}
+.performance-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.performance-label {
+  font-size: 24rpx;
+  color: #666a7f;
+  margin-bottom: 12rpx;
+}
+.performance-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #222222;
+}
+.performance-value.success {
+  color: #3abf81;
+}
+.performance-value.profit {
+  color: #f16565;
+}
+
+/* 股票列表卡片 */
+.stock-list-card {
+  padding: 32rpx;
+}
+.stock-list-header {
+  margin-bottom: 24rpx;
+}
+.stock-list-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #222222;
+}
+.stock-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid #f1f2f6;
+}
+.stock-item:last-child {
+  border-bottom: none;
+}
+.stock-info {
+  flex: 1;
+}
+.stock-name-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+.stock-name {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #222222;
+  margin-right: 16rpx;
+}
+.stock-code {
+  font-size: 24rpx;
+  color: #9ca2b5;
+}
+.stock-price-row {
+  display: flex;
+  align-items: center;
+}
+.stock-price-label {
+  font-size: 24rpx;
+  color: #9ca2b5;
+  margin-right: 8rpx;
+}
+.stock-price {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #222222;
+}
+.stock-right {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+.stock-score-badge {
+  background: #e7f7ef;
+  border-radius: 20rpx;
+  padding: 8rpx 16rpx;
+  min-width: 80rpx;
+  text-align: center;
+}
+.stock-score {
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #3abf81;
+}
+.stock-actions {
+  display: flex;
+  gap: 12rpx;
+}
+.action-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+}
+.buy-btn {
+  background: #3abf81;
+}
+.sell-btn {
+  background: #f16565;
 }
-.sub {
+.action-icon {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #ffffff;
+}
+.risk-tip {
+  display: block;
+  margin-top: 24rpx;
+  font-size: 22rpx;
+  color: #9ca2b5;
+  text-align: center;
+}
+
+/* 历史股票池回顾 */
+.history-card {
+  padding: 32rpx;
+}
+.history-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+.history-icon {
   font-size: 28rpx;
-  color: #888;
+  margin-right: 12rpx;
+}
+.history-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #222222;
+}
+.history-search-row {
+  display: flex;
+  align-items: center;
+}
+.history-date-input {
+  flex: 1;
+  background: #f7f8fc;
+  border-radius: 12rpx;
+  padding: 24rpx 24rpx;
+  font-size: 26rpx;
+  color: #222222;
+}
+.history-search-button {
+  width: 80rpx;
+  height: 80rpx;
+  background: #5d55e8;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 16rpx;
+}
+.search-icon {
+  font-size: 32rpx;
+  color: #ffffff;
+}
+
+/* 弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.modal-content {
+  width: 640rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 40rpx 32rpx 32rpx;
+  box-sizing: border-box;
+}
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32rpx;
+}
+.modal-title {
+  font-size: 32rpx;
+  font-weight: 600;
+}
+.buy-title {
+  color: #3abf81;
+}
+.sell-title {
+  color: #f16565;
+}
+.modal-close {
+  font-size: 48rpx;
+  color: #9ca2b5;
+  line-height: 1;
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modal-body {
+  margin-bottom: 32rpx;
+}
+.modal-stock-name {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #222222;
+  margin-bottom: 24rpx;
+}
+.modal-price-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 32rpx;
+}
+.modal-price-label {
+  font-size: 26rpx;
+  color: #666a7f;
+  margin-right: 12rpx;
+}
+.modal-price-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #222222;
+}
+.modal-input-row {
+  margin-bottom: 32rpx;
+}
+.modal-input-label {
+  display: block;
+  font-size: 24rpx;
+  color: #9ca2b5;
+  margin-bottom: 16rpx;
+}
+.modal-input {
+  width: 100%;
+  background: #f7f8fc;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  font-size: 28rpx;
+  color: #222222;
+  box-sizing: border-box;
+}
+.modal-total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 24rpx;
+  border-top: 1rpx solid #f1f2f6;
+}
+.modal-total-label {
+  font-size: 26rpx;
+  color: #666a7f;
+}
+.modal-total-value {
+  font-size: 36rpx;
+  font-weight: 700;
+}
+.buy-total {
+  color: #3abf81;
+}
+.sell-total {
+  color: #f16565;
+}
+.modal-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.modal-button {
+  width: 100%;
+  border-radius: 16rpx;
+  padding: 28rpx 0;
+  text-align: center;
+  margin-bottom: 24rpx;
+}
+.buy-button {
+  background: #3abf81;
+}
+.sell-button {
+  background: #f16565;
+}
+.modal-button-text {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #ffffff;
+}
+.modal-tip {
+  font-size: 22rpx;
+  color: #9ca2b5;
+}
+.bottom-safe-area {
+  height: 80rpx;
 }

src/pages/strong/strong.vue

@@ -1,26 +1,393 @@
 <template>
-  <view class="page-strong">
+  <view class="page-container">
     <!-- 顶部标题卡片 -->
     <view class="page-title-card">
       <text class="page-title-text">量化选股大师</text>
     </view>
-    <view class="content-area">
-      <text class="title">强势池</text>
-      <text class="sub">这里后续可以展示强势股票列表</text>
+    <scroll-view class="scroll-view" scroll-y>
+      <view class="content-wrapper">
+        <!-- 强势趋势池标题 -->
+        <view class="pool-header-section">
+          <view class="pool-header">
+            <text class="pool-icon">📈</text>
+            <text class="pool-title">强势趋势池</text>
+          </view>
+          <text class="pool-desc">本月精选,专注于中长期趋势跟踪</text>
+        </view>
+
+        <!-- 性能指标卡片 -->
+        <view class="card performance-card">
+          <view class="performance-item">
+            <text class="performance-label">历史成功率</text>
+            <text class="performance-value success">88%</text>
+          </view>
+          <view class="performance-item">
+            <text class="performance-label">平均收益率</text>
+            <text class="performance-value profit">+12.5%</text>
+          </view>
+          <view class="performance-item">
+            <text class="performance-label">总交易次数</text>
+            <text class="performance-value">45</text>
+          </view>
+        </view>
+
+        <!-- 今日精选高分股 -->
+        <view class="card stock-list-card">
+          <view class="stock-list-header">
+            <text class="stock-list-title">今日精选高分股 ({{ stockList.length }}只)</text>
+          </view>
+          
+          <view class="stock-item" v-for="(stock, index) in stockList" :key="index">
+            <view class="stock-info">
+              <view class="stock-name-row">
+                <text class="stock-name">{{ stock.name }}</text>
+                <text class="stock-code">{{ stock.code }}</text>
+              </view>
+              <view class="stock-price-row">
+                <text class="stock-price-label">价格:</text>
+                <text class="stock-price">¥{{ stock.price }}</text>
+              </view>
+            </view>
+            <view class="stock-right">
+              <view class="stock-score-badge">
+                <text class="stock-score">{{ stock.score }}</text>
+              </view>
+              <view class="stock-actions">
+                <view class="action-btn buy-btn" @click="showBuyModal(stock)">
+                  <text class="action-icon">+</text>
+                </view>
+                <view class="action-btn sell-btn" @click="showSellModal(stock)">
+                  <text class="action-icon">-</text>
+                </view>
+              </view>
+            </view>
+          </view>
+
+          <text class="risk-tip">风险提示:买卖为模拟交易,不涉及真实资金。</text>
+        </view>
+
+        <!-- 历史趋势池回顾 -->
+        <view class="card history-card">
+          <view class="history-header">
+            <text class="history-icon">📅</text>
+            <text class="history-title">历史趋势池回顾</text>
+          </view>
+          <view class="history-search-row">
+            <input 
+              class="history-date-input" 
+              type="text" 
+              placeholder="2025年11月20日"
+              v-model="selectedDate"
+              disabled
+            />
+            <view class="history-search-button" @click="onHistorySearch">
+              <text class="search-icon">🔍</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 预留底部空间 -->
+        <view class="bottom-safe-area"></view>
+      </view>
+    </scroll-view>
+
+    <!-- 买入弹窗 -->
+    <view v-if="showBuyModalFlag" class="modal-overlay" @click="closeBuyModal">
+      <view class="modal-content" @click.stop>
+        <view class="modal-header">
+          <text class="modal-title buy-title">模拟买入</text>
+          <text class="modal-close" @click="closeBuyModal">×</text>
+        </view>
+        
+        <view class="modal-body">
+          <text class="modal-stock-name">{{ currentStock.name }} ({{ currentStock.code }})</text>
+          <view class="modal-price-row">
+            <text class="modal-price-label">当前价:</text>
+            <text class="modal-price-value">¥ {{ currentStock.price }}</text>
+          </view>
+          
+          <view class="modal-input-row">
+            <text class="modal-input-label">股数 (100的倍数)</text>
+            <input 
+              class="modal-input" 
+              type="number" 
+              v-model="buyQuantity"
+              placeholder="100"
+              @input="onBuyQuantityChange"
+            />
+          </view>
+          
+          <view class="modal-total-row">
+            <text class="modal-total-label">需支付金额:</text>
+            <text class="modal-total-value buy-total">¥ {{ buyTotalAmount.toFixed(2) }}</text>
+          </view>
+        </view>
+
+        <view class="modal-footer">
+          <view class="modal-button buy-button" @click="handleBuy">
+            <text class="modal-button-text">确认买入</text>
+          </view>
+          <text class="modal-tip">交易已记录在您的模拟账户中。</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 卖出弹窗 -->
+    <view v-if="showSellModalFlag" class="modal-overlay" @click="closeSellModal">
+      <view class="modal-content" @click.stop>
+        <view class="modal-header">
+          <text class="modal-title sell-title">模拟卖出</text>
+          <text class="modal-close" @click="closeSellModal">×</text>
+        </view>
+        
+        <view class="modal-body">
+          <text class="modal-stock-name">{{ currentStock.name }} ({{ currentStock.code }})</text>
+          <view class="modal-price-row">
+            <text class="modal-price-label">当前价:</text>
+            <text class="modal-price-value">¥ {{ currentStock.price }}</text>
+          </view>
+          
+          <view class="modal-input-row">
+            <text class="modal-input-label">股数 (100的倍数)</text>
+            <input 
+              class="modal-input" 
+              type="number" 
+              v-model="sellQuantity"
+              placeholder="100"
+              @input="onSellQuantityChange"
+            />
+          </view>
+          
+          <view class="modal-total-row">
+            <text class="modal-total-label">总市值估算:</text>
+            <text class="modal-total-value sell-total">¥ {{ sellTotalAmount.toFixed(2) }}</text>
+          </view>
+        </view>
+
+        <view class="modal-footer">
+          <view class="modal-button sell-button" @click="handleSell">
+            <text class="modal-button-text">确认卖出</text>
+          </view>
+          <text class="modal-tip">交易已记录在您的模拟账户中。</text>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
-// Logic for strong pool
+import { ref, computed } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+
+// 股票列表数据
+const stockList = ref([
+  {
+    name: '美的集团',
+    code: '000333',
+    price: '68.00',
+    score: '88.5'
+  },
+  {
+    name: '贵州茅台',
+    code: '600519',
+    price: '1700.00',
+    score: '85.1'
+  }
+])
+
+const selectedDate = ref('2025年11月20日')
+const showBuyModalFlag = ref(false)
+const showSellModalFlag = ref(false)
+const currentStock = ref({})
+const buyQuantity = ref('100')
+const sellQuantity = ref('100')
+
+// 计算买入总金额
+const buyTotalAmount = computed(() => {
+  const qty = parseInt(buyQuantity.value) || 0
+  const price = parseFloat(currentStock.value.price) || 0
+  return qty * price
+})
+
+// 计算卖出总金额
+const sellTotalAmount = computed(() => {
+  const qty = parseInt(sellQuantity.value) || 0
+  const price = parseFloat(currentStock.value.price) || 0
+  return qty * price
+})
+
+// 显示买入弹窗
+const showBuyModal = (stock) => {
+  currentStock.value = { ...stock }
+  buyQuantity.value = '100'
+  showBuyModalFlag.value = true
+}
+
+// 关闭买入弹窗
+const closeBuyModal = () => {
+  showBuyModalFlag.value = false
+}
+
+// 显示卖出弹窗
+const showSellModal = (stock) => {
+  currentStock.value = { ...stock }
+  sellQuantity.value = '100'
+  showSellModalFlag.value = true
+}
+
+// 关闭卖出弹窗
+const closeSellModal = () => {
+  showSellModalFlag.value = false
+}
+
+// 买入股数变化
+const onBuyQuantityChange = (e) => {
+  const value = e.detail.value
+  // 确保是100的倍数
+  if (value && parseInt(value) % 100 !== 0) {
+    uni.showToast({
+      title: '股数必须是100的倍数',
+      icon: 'none'
+    })
+  }
+}
+
+// 卖出股数变化
+const onSellQuantityChange = (e) => {
+  const value = e.detail.value
+  // 确保是100的倍数
+  if (value && parseInt(value) % 100 !== 0) {
+    uni.showToast({
+      title: '股数必须是100的倍数',
+      icon: 'none'
+    })
+  }
+}
+
+// 处理买入
+const handleBuy = () => {
+  const qty = parseInt(buyQuantity.value)
+  if (!qty || qty <= 0) {
+    uni.showToast({
+      title: '请输入有效的股数',
+      icon: 'none'
+    })
+    return
+  }
+  
+  if (qty % 100 !== 0) {
+    uni.showToast({
+      title: '股数必须是100的倍数',
+      icon: 'none'
+    })
+    return
+  }
+
+  // 保存交易记录
+  const transaction = {
+    type: 'buy',
+    stockName: currentStock.value.name,
+    stockCode: currentStock.value.code,
+    price: parseFloat(currentStock.value.price),
+    quantity: qty,
+    totalAmount: buyTotalAmount.value,
+    timestamp: Date.now()
+  }
+
+  // 获取现有交易记录
+  const transactions = uni.getStorageSync('simulated_transactions') || []
+  transactions.push(transaction)
+  uni.setStorageSync('simulated_transactions', transactions)
+
+  // 关闭弹窗
+  closeBuyModal()
+
+  // 显示成功提示
+  uni.showToast({
+    title: '买入成功',
+    icon: 'success'
+  })
+}
+
+// 处理卖出
+const handleSell = () => {
+  const qty = parseInt(sellQuantity.value)
+  if (!qty || qty <= 0) {
+    uni.showToast({
+      title: '请输入有效的股数',
+      icon: 'none'
+    })
+    return
+  }
+  
+  if (qty % 100 !== 0) {
+    uni.showToast({
+      title: '股数必须是100的倍数',
+      icon: 'none'
+    })
+    return
+  }
+
+  // 保存交易记录
+  const transaction = {
+    type: 'sell',
+    stockName: currentStock.value.name,
+    stockCode: currentStock.value.code,
+    price: parseFloat(currentStock.value.price),
+    quantity: qty,
+    totalAmount: sellTotalAmount.value,
+    timestamp: Date.now()
+  }
+
+  // 获取现有交易记录
+  const transactions = uni.getStorageSync('simulated_transactions') || []
+  transactions.push(transaction)
+  uni.setStorageSync('simulated_transactions', transactions)
+
+  // 关闭弹窗
+  closeSellModal()
+
+  // 显示成功提示
+  uni.showToast({
+    title: '卖出成功',
+    icon: 'success'
+  })
+}
+
+// 历史查询
+const onHistorySearch = () => {
+  uni.showToast({
+    title: '历史查询功能开发中',
+    icon: 'none'
+  })
+}
+
+onLoad(() => {
+  // 页面加载
+})
+
+onShow(() => {
+  // 页面显示
+})
 </script>
 
 <style>
-.page-strong {
+.page-container {
+  height: 100vh;
   display: flex;
   flex-direction: column;
   background: #f5f6fb;
-  min-height: 100vh;
+}
+
+.scroll-view {
+  flex: 1;
+  height: 0;
+}
+
+.content-wrapper {
+  padding: 32rpx;
+  background: #f5f6fb;
+  min-height: 100%;
 }
 
 .page-title-card {
@@ -31,10 +398,6 @@
   border-radius: 0;
 }
 
-.content-area {
-  padding: 32rpx;
-}
-
 .page-title-text {
   font-size: 36rpx;
   font-weight: 800;
@@ -42,13 +405,415 @@
   letter-spacing: 2rpx;
 }
 
-.title {
-  font-size: 36rpx;
-  font-weight: bold;
-  margin-bottom: 20rpx;
+.card {
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
+  margin-bottom: 32rpx;
 }
-.sub {
+
+/* 强势趋势池标题区域 */
+.pool-header-section {
+  margin-bottom: 24rpx;
+}
+
+.pool-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.pool-icon {
+  font-size: 32rpx;
+  margin-right: 12rpx;
+}
+
+.pool-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #222222;
+}
+
+.pool-desc {
+  font-size: 26rpx;
+  color: #666a7f;
+}
+
+/* 性能指标卡片 */
+.performance-card {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: #f7f8fc;
+  padding: 32rpx 24rpx;
+}
+
+.performance-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.performance-label {
+  font-size: 24rpx;
+  color: #666a7f;
+  margin-bottom: 12rpx;
+}
+
+.performance-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #222222;
+}
+
+.performance-value.success {
+  color: #3abf81;
+}
+
+.performance-value.profit {
+  color: #f16565;
+}
+
+/* 股票列表卡片 */
+.stock-list-card {
+  padding: 32rpx;
+}
+
+.stock-list-header {
+  margin-bottom: 24rpx;
+}
+
+.stock-list-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #222222;
+}
+
+.stock-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 0;
+  border-bottom: 1rpx solid #f1f2f6;
+}
+
+.stock-item:last-child {
+  border-bottom: none;
+}
+
+.stock-info {
+  flex: 1;
+}
+
+.stock-name-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+
+.stock-name {
   font-size: 28rpx;
-  color: #888;
+  font-weight: 600;
+  color: #222222;
+  margin-right: 16rpx;
+}
+
+.stock-code {
+  font-size: 24rpx;
+  color: #9ca2b5;
+}
+
+.stock-price-row {
+  display: flex;
+  align-items: center;
+}
+
+.stock-price-label {
+  font-size: 24rpx;
+  color: #9ca2b5;
+  margin-right: 8rpx;
+}
+
+.stock-price {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #222222;
+}
+
+.stock-right {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.stock-score-badge {
+  background: #e7f7ef;
+  border-radius: 20rpx;
+  padding: 8rpx 16rpx;
+  min-width: 80rpx;
+  text-align: center;
+}
+
+.stock-score {
+  font-size: 26rpx;
+  font-weight: 700;
+  color: #3abf81;
+}
+
+.stock-actions {
+  display: flex;
+  gap: 12rpx;
+}
+
+.action-btn {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+}
+
+.buy-btn {
+  background: #3abf81;
+}
+
+.sell-btn {
+  background: #f16565;
+}
+
+.action-icon {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.risk-tip {
+  display: block;
+  margin-top: 24rpx;
+  font-size: 22rpx;
+  color: #9ca2b5;
+  text-align: center;
+}
+
+/* 历史股票池回顾 */
+.history-card {
+  padding: 32rpx;
+}
+
+.history-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.history-icon {
+  font-size: 28rpx;
+  margin-right: 12rpx;
+}
+
+.history-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #222222;
+}
+
+.history-search-row {
+  display: flex;
+  align-items: center;
+}
+
+.history-date-input {
+  flex: 1;
+  background: #f7f8fc;
+  border-radius: 12rpx;
+  padding: 24rpx 24rpx;
+  font-size: 26rpx;
+  color: #222222;
+}
+
+.history-search-button {
+  width: 80rpx;
+  height: 80rpx;
+  background: #5d55e8;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 16rpx;
+}
+
+.search-icon {
+  font-size: 32rpx;
+  color: #ffffff;
+}
+
+/* 弹窗样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  width: 640rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
+  padding: 40rpx 32rpx 32rpx;
+  box-sizing: border-box;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32rpx;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: 600;
+}
+
+.buy-title {
+  color: #3abf81;
+}
+
+.sell-title {
+  color: #f16565;
+}
+
+.modal-close {
+  font-size: 48rpx;
+  color: #9ca2b5;
+  line-height: 1;
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-body {
+  margin-bottom: 32rpx;
+}
+
+.modal-stock-name {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #222222;
+  margin-bottom: 24rpx;
+}
+
+.modal-price-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 32rpx;
+}
+
+.modal-price-label {
+  font-size: 26rpx;
+  color: #666a7f;
+  margin-right: 12rpx;
+}
+
+.modal-price-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #222222;
+}
+
+.modal-input-row {
+  margin-bottom: 32rpx;
+}
+
+.modal-input-label {
+  display: block;
+  font-size: 24rpx;
+  color: #9ca2b5;
+  margin-bottom: 16rpx;
+}
+
+.modal-input {
+  width: 100%;
+  background: #f7f8fc;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  font-size: 28rpx;
+  color: #222222;
+  box-sizing: border-box;
+}
+
+.modal-total-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 24rpx;
+  border-top: 1rpx solid #f1f2f6;
+}
+
+.modal-total-label {
+  font-size: 26rpx;
+  color: #666a7f;
+}
+
+.modal-total-value {
+  font-size: 36rpx;
+  font-weight: 700;
+}
+
+.buy-total {
+  color: #3abf81;
+}
+
+.sell-total {
+  color: #f16565;
+}
+
+.modal-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.modal-button {
+  width: 100%;
+  border-radius: 16rpx;
+  padding: 28rpx 0;
+  text-align: center;
+  margin-bottom: 24rpx;
+}
+
+.buy-button {
+  background: #3abf81;
+}
+
+.sell-button {
+  background: #f16565;
+}
+
+.modal-button-text {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.modal-tip {
+  font-size: 22rpx;
+  color: #9ca2b5;
+}
+
+.bottom-safe-area {
+  height: 80rpx;
 }
 </style>