deepChartVueApp/pages/deepExploration/deepExploration.vue

<template>
  <view class="main">
    <!-- 顶部状态栏占位 -->
    <view class="top" :style="{ height: iSMT + 'px' }"></view>
    <!-- 标题图标部分 -->
    <deepExploration_header></deepExploration_header>
    <view class="search">
      <input
        v-model="stockName"
        class="searchInput"
        type="text"
        placeholder="请输入股票名称、股票代码"
        placeholder-style="color: #A6A6A6; font-size: 22rpx;"
      />
      <image
        @click="searchStock"
        class="seachIcon"
        src="/static/deepExploration-images/search.png"
        mode="aspectFill"
      ></image>
    </view>

    <!-- 四大功能模块 -->
    <view class="select">
      <view class="selectItem" @click="toMain('主力追踪')">
        <image
          class="img"
          src="/static/deepExploration-images/icon3.png"
          mode="aspectFill"
        ></image>
        <view class="txt">主力追踪</view>
      </view>
      <view class="selectItem" @click="toMain('主力雷达')">
        <image
          class="img"
          src="/static/deepExploration-images/icon2.png"
          mode="aspectFill"
        ></image>
        <view class="txt">主力雷达</view>
      </view>
      <view class="selectItem" @click="toMain('主力解码')">
        <image
          class="img"
          src="/static/deepExploration-images/icon1.png"
          mode="aspectFill"
        ></image>
        <view class="txt">主力解码</view>
      </view>
      <view class="selectItem" @click="toMain('主力资金流')">
        <image
          class="img"
          src="/static/deepExploration-images/icon4.png"
          mode="aspectFill"
        ></image>
        <view class="txt">主力资金流</view>
      </view>
    </view>

    <!-- 灰色间隔 -->
    <view class="gap"></view>
    <!-- 选股策略 -->
    <view class="stockSelection">
      <view class="stockSelection_top">
        <view class="txt">
          <text>选股策略</text>
        </view>
        <view class="viewAll" @click="viewAll">
          <text>查看全部</text>
        </view>
      </view>

      <view class="stockSelection_content">
        <view class="selectionItem">
          <view class="header">
            <view class="left">
              <image
                src="/static/deepExploration-images/plus.png"
                mode="aspectFill"
              ></image>
              <text>抄底卖顶</text>
            </view>
            <view class="right">
              <image
                src="/static/deepExploration-images/Americle.png"
                mode="aspectFill"
              ></image>
              <text>美股</text>
            </view>
          </view>
          <view class="content">
            <view class="contentTitle">
              <view class="contentTitle_name">股票名称</view>
              <view class="contentTitle_close">最新收盘价</view>
              <view class="contentTitle_price">选股价格</view>
            </view>
            <view class="contentItem">
              <view class="row" v-for="(item, index) in stockData" :key="index">
                <view class="nameItem">{{ item.name }}</view>
                <view class="closeItem">{{ item.close }}</view>
                <view class="priceItem">{{ item.select }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="stockSelection_content">
        <view class="selectionItem">
          <view class="header">
            <view class="left">
              <image
                src="/static/deepExploration-images/plus.png"
                mode="aspectFill"
              ></image>
              <text>抄底卖顶</text>
            </view>
            <view class="right">
              <image
                src="/static/deepExploration-images/Americle.png"
                mode="aspectFill"
              ></image>
              <text>美股</text>
            </view>
          </view>
          <view class="content">
            <view class="contentTitle">
              <view class="contentTitle_name">股票名称</view>
              <view class="contentTitle_close">最新收盘价</view>
              <view class="contentTitle_price">选股价格</view>
            </view>
            <view class="contentItem">
              <view class="row" v-for="(item, index) in stockData" :key="index">
                <view class="nameItem">{{ item.name }}</view>
                <view class="closeItem">{{ item.close }}</view>
                <view class="priceItem">{{ item.select }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <footerBar class="static-footer" :type="type"></footerBar>
    <LoginPrompt ref="loginPrompt"></LoginPrompt>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import footerBar from "@/components/footerBar.vue";
import deepExploration_header from "@/components/deepExploration_header.vue";

const type = ref("deepExploration");
const iSMT = ref(0);

//查看全部选股策略
const toMain = (val) => {
  if (val == "主力追踪") {
    uni.navigateTo({
      url: "/pages/deepExploration/MainForceActions?index=1",
    });
  } else if (val == "主力雷达") {
    uni.navigateTo({
      url: "/pages/deepExploration/MainForceActions?index=2",
    });
  } else if (val == "主力解码") {
    uni.navigateTo({
      url: "/pages/deepExploration/MainForceActions?index=3",
    });
  } else if (val == "主力资金流") {
    uni.navigateTo({
      url: "/pages/deepExploration/MainForceActions?index=4",
    });
  }
};

const stockName = ref("");
//搜索股票
const searchStock = () => {
  console.log("搜索参数：", stockName.value);
  uni.navigateTo({
    url: `/pages/deepExploration/MainForceActions?stockName=${stockName.value}`,
  });
};

//查看全部选股策略
const viewAll = () => {
  uni.navigateTo({
    url: "/pages/deepExploration/stockSelectDetail",
  });
};
//选股策略数据
const stockData = [
  {
    name: "(MKTW)MarketWise Inc",
    close: "$14.190",
    select: "$13.180",
  },
  {
    name: "(MTCH)Match Group Inc",
    close: "$32.120",
    select: "$28.120",
  },
  {
    name: "(MKTW)MarketWise Inc",
    close: "$14.190",
    select: "$13.180",
  },
];
onMounted(() => {
  // 状态栏高度
  iSMT.value = uni.getSystemInfoSync().statusBarHeight;
});
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100vh;
  background-color: #fff;

  .search {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f3f3f3;
    width: calc(100% - 60rpx);
    height: 80rpx;
    border-radius: 50rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    padding: 0 40rpx;
    margin: 15rpx 30rpx 0 30rpx;

    .seachIcon {
      position: absolute;
      right: 50rpx;
      width: 32rpx;
      height: 32rpx;
    }

    .searchInput {
      color: #111;
    }
  }

  .select {
    display: flex;
    padding: 60rpx 10rpx 30rpx 30rpx;
    gap: 70rpx;
    align-items: center;
    justify-content: center;

    .selectItem {
      .img {
        width: 80rpx;
        height: 80rpx;
        display: block;
        margin: 0 auto;
      }

      .txt {
        color: #6a6a6a;
        font-family: "PingFang SC";
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 14.5px;
        margin-top: 13rpx;
        white-space: nowrap;
      }
    }
  }

  .gap {
    width: 100%;
    height: 15rpx;
    background-color: #f3f3f3;
  }

  .stockSelection {
    width: 100%;
    padding: 32rpx 15rpx;

    .stockSelection_top {
      display: flex;
      justify-content: space-between;

      .txt {
        color: #000000;
        font-family: "PingFang SC";
        font-size: 38rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 50rpx;
      }

      .viewAll {
        background-color: #000000;
        border-radius: 10rpx;
        padding: 6rpx 20rpx;
        color: #ffffff;
        font-family: "PingFang SC";
        font-size: 10rpx;
        font-style: normal;
        font-weight: 100;
        line-height: 29rpx;
        height: 40rpx;
      }
    }

    .stockSelection_content {
      .selectionItem {
        background-color: #f3f3f3;
        padding: 30rpx 15rpx 17rpx 30rpx;
        border-radius: 30rpx;
        margin-top: 30rpx;

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            display: flex;
            justify-content: space-between;
            align-items: center;

            image {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 15rpx;
              height: 15rpx;
            }

            text {
              margin-left: 15rpx;
              color: #000000;
              font-family: "PingFang SC";
              font-size: 28rpx;
              font-style: normal;
              font-weight: 400;
              line-height: 18.5px;
            }
          }

          .right {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 15rpx;
            background-color: #ffffff;
            padding: 6rpx 20rpx;

            image {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 40rpx;
              height: 26.5rpx;
            }

            text {
              margin-left: 10rpx;
              color: #6a6a6a;
              font-family: "PingFang SC";
              font-size: 18rpx;
              font-style: normal;
              font-weight: 400;
              line-height: 24rpx;
            }
          }
        }

        .content {
          .contentTitle {
            display: flex;
            color: #6a6a6a;
            font-family: "PingFang SC";
            font-size: 11px;
            font-style: normal;
            font-weight: 400;
            line-height: 14.5px;
            margin-top: 24rpx;
            margin-bottom: 20rpx;

            .contentTitle_name {
              width: 100rpx;
            }

            .contentTitle_close {
              width: 130rpx;
              margin-left: 260rpx;
            }

            .contentTitle_price {
              width: 120rpx;
              margin-left: 60rpx;
            }
          }

          .contentItem {
            .row {
              display: flex;
              box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, 0.05);
              padding: 10rpx 0;
              margin-bottom: 10rpx;

              .nameItem {
                width: 260rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #000000;
                font-family: "PingFang SC";
                font-size: 13px;
                font-style: normal;
                font-weight: 400;
                line-height: 17.5px;
              }

              .closeItem {
                width: 120rpx;
                margin-left: 100rpx;
                color: #25ba5d;
                font-family: "PingFang SC";
                font-size: 13px;
                font-style: normal;
                font-weight: 400;
                line-height: 17.5px;
              }

              .priceItem {
                width: 120rpx;
                margin-left: 73rpx;
                color: #25ba5d;
                font-family: "PingFang SC";
                font-size: 13px;
                font-style: normal;
                font-weight: 400;
                line-height: 17.5px;
              }
            }
          }
        }
      }
    }
  }

  .static-footer {
    position: fixed;
    bottom: 0;
  }
}

* {
  box-sizing: border-box;
}
</style>