Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/java/Hugray

liujie

23 小时以前 384bce80449b17651937429038c4370dbce60e7b

 hugray-user-miniapp/pages/index/index.vue

@@ -1,52 +1,242 @@
<template>
   <view class="content">
      <image class="logo" src="/static/logo.png"></image>
      <view class="text-area">
         <text class="title">{{title}}</text>
      </view>
   </view>
    <view class="page">
        <!-- 内容区：设计稿内容高度与视口一致，矮屏可滚动 -->
        <scroll-view class="scroll" scroll-y>
            <!-- ==================== 明星产品展位：G&METS-II ==================== -->
            <view class="hero">
                <!-- 产品大图视口（沉浸加高，顶部延伸到状态栏下方） -->
                <view class="hero-visual">
                    <!-- 顶部品牌区（沉浸式导航：状态栏占位 + 品牌 Logo） -->
                    <view class="brand-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
                        <image class="brand-logo" src="/static/metabolism-300-logo.png" mode="aspectFit" />
                    </view>

                    <!-- 产品大图占位：设计稿素材未入仓，暂以同色系渐变块占位，素材就绪后替换为 image -->
                    <view class="hero-visual-placeholder"></view>

                    <!-- 轮播指示器：毛玻璃微胶囊 -->
                    <view class="hero-indicator">
                        <view class="indicator-dot"></view>
                        <view class="indicator-dot indicator-dot--active"></view>
                        <view class="indicator-dot"></view>
                    </view>
                </view>

                <!-- 产品信息与行动区 -->
                <view class="hero-info">
                    <view class="hero-info-text">
                        <text class="hero-code">G&METS-II</text>
                        <text class="hero-name">超分子基团复合肽</text>
                    </view>
                    <view class="hero-explore" @tap="_handleExploreMore">
                        <text class="hero-explore-text">探索更多</text>
                        <view class="hero-explore-arrow-wrap">
                            <view class="hero-explore-arrow"></view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- ==================== 次席展位：HBBLF-2 与 代谢300 ==================== -->
            <view class="sub-visual">
                <!-- 展位图占位：素材未入仓，暂以渐变块占位 -->
                <view class="sub-visual-placeholder"></view>
            </view>
        </scroll-view>

        <!-- 全局缺货订单提示（存在缺货订单时所有页面均弹出） -->
        <stock-order-toast />
    </view>
</template>

<script>
   export default {
      data() {
         return {
            title: 'Hello'
         }
      },
      onLoad() {
<script setup>
import StockOrderToast from '@/components/stock-order-toast/stock-order-toast.vue'

      },
      methods: {
/** 状态栏高度（px）：沉浸式布局下品牌区需下移避让系统状态栏 */
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0

      }
   }
/** 探索更多：产品详情页尚未开发，先给出占位反馈 */
const _handleExploreMore = () => {
    uni.showToast({ title: '敬请期待', icon: 'none' })
}
</script>

<style>
   .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
<style scoped lang="scss">
.page {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #f8fafc;
}

   .logo {
      height: 200rpx;
      width: 200rpx;
      margin-top: 200rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 50rpx;
   }
.scroll {
    width: 100%;
    height: 100vh;
}

   .text-area {
      display: flex;
      justify-content: center;
   }
/* ==================== 明星产品展位 ==================== */

   .title {
      font-size: 36rpx;
      color: #8f8f94;
   }
.hero {
    width: 100%;
}

/* 产品大图视口：375×406pt */
.hero-visual {
    position: relative;
    width: 100%;
    height: 812rpx;
    overflow: hidden;
    /* 素材占位渐变：上部浅蓝（品牌区底色）向下过渡到白色 */
    background: linear-gradient(180deg, #d9e7f7 0%, #e9f1fb 26%, #ffffff 54%, #f4f7fb 100%);
}

/* 品牌区：状态栏占位 + 导航行，叠加在大图之上 */
.brand-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-left: 24rpx;
    padding-right: 24rpx;
    box-sizing: border-box;
}

.brand-logo {
    width: 168rpx;
    height: 88rpx;
}

/* 产品大图占位块（保留文案提示，便于后续替换真实素材） */
.hero-visual-placeholder {
    width: 100%;
    height: 100%;
}

/* 轮播指示器：毛玻璃微胶囊，水平居中，底部 376pt 处 */
.hero-indicator {
    position: absolute;
    left: 50%;
    top: 752rpx;
    transform: translateX(-50%);
    height: 32rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    padding: 0 14rpx;
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 0.7);
    border: 1rpx solid #ffffff;
    box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.07);
}

.indicator-dot {
    width: 8rpx;
    height: 8rpx;
    border-radius: 4rpx;
    background: rgba(0, 62, 126, 0.19);
}

.indicator-dot--active {
    width: 28rpx;
    background: linear-gradient(90deg, #003e7e 0%, #1e5ebc 100%);
}

/* 产品信息与行动区：375×58pt */
.hero-info {
    height: 116rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36rpx;
    background: #ffffff;
    border-top: 1rpx solid #f1f5f9;
    border-bottom: 1rpx solid #f1f5f9;
    box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.024);
}

.hero-info-text {
    display: flex;
    flex-direction: column;
    gap: 4rpx;
}

.hero-code {
    font-size: 22rpx;
    font-weight: 700;
    letter-spacing: 2.4rpx;
    line-height: 1;
    color: #003e7e;
}

.hero-name {
    font-size: 35rpx;
    font-weight: 800;
    letter-spacing: -0.4rpx;
    line-height: 1.15;
    color: #0f172a;
}

/* 探索更多：绿色渐变胶囊按钮 */
.hero-explore {
    flex-shrink: 0;
    height: 68rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 0 16rpx 0 28rpx;
    border-radius: 34rpx;
    background: linear-gradient(90deg, #82c236 0%, #639c1f 100%);
    box-shadow: 0 6rpx 16rpx rgba(106, 160, 39, 0.21);
}

.hero-explore-text {
    font-size: 25rpx;
    font-weight: 600;
    letter-spacing: 0.4rpx;
    line-height: 1;
    color: #ffffff;
}

.hero-explore-arrow-wrap {
    width: 40rpx;
    height: 40rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
}

/* 箭头：lucide chevron-right 12×12pt */
.hero-explore-arrow {
    width: 24rpx;
    height: 24rpx;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJtOSAxOCA2LTYtNi02Ii8+PC9zdmc+');
}

/* ==================== 次席展位 ==================== */

.sub-visual {
    position: relative;
    width: 100%;
    height: 530rpx;
    overflow: hidden;
    /* 素材占位渐变：紫调过渡，素材就绪后替换为 image */
    background: linear-gradient(160deg, #4e3d94 0%, #6a5ac1 45%, #a99be0 100%);
}

.sub-visual-placeholder {
    width: 100%;
    height: 100%;
}
</style>