升级app 1.首页样式优化 2.客户合同金额展示错误修改

gaoluyang

15 小时以前 fa008901cc964ce4fd3574fcd3ef391fac98c7f4

升级app
1.首页样式优化
2.客户合同金额展示错误修改

 src/manifest.json

@@ -2,7 +2,7 @@
    "name" : "信息管理",
    "appid" : "__UNI__099A590",
    "description" : "",
    "versionName" : "1.0.1",
    "versionName" : "1.1.5",
    "versionCode" : 100,
    "transformPx" : false,
    /* 5+App特有相关 */

 src/pages/index.vue

@@ -5,7 +5,14 @@
      <view class="hero-section">
        <view class="bg-img">
          <view class="hero-content">
            <!-- 预留：如后续需要可在此放 logo 或简短提示 -->
            <view class="hero-ornaments">
              <view class="hero-glow glow-left" />
              <view class="hero-glow glow-right" />
              <view class="hero-mist mist-top" />
              <view class="hero-mist mist-bottom" />
              <view class="hero-curve curve-main" />
              <view class="hero-curve curve-sub" />
            </view>
          </view>
          <view class="hero-wave"></view>
        </view>
@@ -136,60 +143,43 @@
          </view>

          <view class="list-row">
            <swiper
              class="customer-swiper"
              :current="customerSwiperIndex"
              :indicator-dots="false"
              :autoplay="false"
              :circular="false"
              @change="onCustomerSwiperChange"
            >
              <swiper-item v-for="(page, pIdx) in customerPages" :key="pIdx">
                <view class="customer-page">
                  <view v-for="item in page" :key="item.key" class="customer-item">
                    <view class="customer-row">
                      <view class="customer-name">
                        <image
                          v-if="item.rank === 1"
                          class="rank-icon"
                          :src="imgNum1"
                          mode="heightFix"
                        />
                        <image
                          v-else-if="item.rank === 2"
                          class="rank-icon"
                          :src="imgNum2"
                          mode="heightFix"
                        />
                        <image
                          v-else-if="item.rank === 3"
                          class="rank-icon"
                          :src="imgNum3"
                          mode="heightFix"
                        />
                        <text class="name-text">{{ item.name }}</text>
                      </view>
                      <view class="customer-rate">
                        <text class="rate-label">占比</text>
                        <text class="rate-value">{{ item.rateText }}</text>
                      </view>
                      <view class="amount">
                        <text class="amount-num">{{ item.valueText }}</text>
                        <text class="amount-unit">元</text>
                      </view>
            <scroll-view class="customer-scroll" scroll-y :show-scrollbar="false">
              <view class="customer-page">
                <view v-for="item in contractRawList" :key="item.key" class="customer-item">
                  <view class="customer-row">
                    <view class="customer-name">
                      <image
                        v-if="item.rank === 2"
                        class="rank-icon"
                        :src="imgNum1"
                        mode="heightFix"
                      />
                      <image
                        v-else-if="item.rank === 3"
                        class="rank-icon"
                        :src="imgNum2"
                        mode="heightFix"
                      />
                      <image
                        v-else-if="item.rank === 1"
                        class="rank-icon"
                        :src="imgNum3"
                        mode="heightFix"
                      />
                      <text class="name-text">{{ item.name }}</text>
                    </view>
                    <view class="customer-rate">
                      <text class="rate-label">占比</text>
                      <text class="rate-value">{{ item.rateText }}</text>
                    </view>
                    <view class="amount">
                      <text class="amount-num">{{ item.valueText }}</text>
                      <text class="amount-unit">元</text>
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>

            <view v-if="customerPages.length > 1" class="dots">
              <view
                v-for="i in customerPages.length"
                :key="i"
                :class="['dot', customerSwiperIndex === i - 1 ? 'active' : '']"
              />
            </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
@@ -406,19 +396,6 @@
  return { series: [{ data }] };
});

const customerSwiperIndex = ref(0);
function onCustomerSwiperChange(e) {
  customerSwiperIndex.value = e.detail?.current || 0;
}

const customerPages = computed(() => {
  const list = Array.isArray(contractRawList.value) ? contractRawList.value : [];
  const pageSize = 2;
  const pages = [];
  for (let i = 0; i < list.length; i += pageSize) pages.push(list.slice(i, i + pageSize));
  return pages.length ? pages : [[]];
});

function normalizeContractList(raw) {
  const rows = Array.isArray(raw?.item) ? raw.item : [];

@@ -437,7 +414,7 @@
        rateText: `${formatPlain(rate)}%`,
      };
    })
    .sort((a, b) => (b.rate || 0) - (a.rate || 0))
    .sort((a, b) => (b.value || 0) - (a.value || 0))
    .map((it, index) => ({ ...it, rank: index + 1 }));

  return mapped;
@@ -459,7 +436,6 @@
    contractSummary.value = { sum: "0", chain: "0", yny: "0" };
    contractRawList.value = normalizeContractList({ item: [] });
  } finally {
    customerSwiperIndex.value = 0;
    chartReady.value = true;
  }
}
@@ -539,59 +515,139 @@

.bg-img {
    width: 100%;
    height: 9.25rem;
    background-image: url("../static/images/banner/backview.png");
    background-size: cover;
    border-radius: 14px;
    height: 10.25rem;
    background:
        linear-gradient(135deg, rgba(234, 245, 255, 0.98) 0%, rgba(220, 239, 255, 0.94) 42%, rgba(244, 250, 255, 0.96) 100%),
        url("/static/images/banner/backview.png") center/cover no-repeat;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
    box-shadow: 0 12px 30px rgba(118, 154, 186, 0.16);
    
    &::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(
                from 0deg,
                transparent,
                rgba(255, 255, 255, 0.1),
                transparent,
                rgba(255, 255, 255, 0.05),
                transparent
        );
        animation: rotate 20s linear infinite;
        inset: 0;
        background:
            radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 28%),
            radial-gradient(circle at 84% 18%, rgba(191, 226, 255, 0.7) 0, rgba(191, 226, 255, 0) 26%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 42%, rgba(206, 229, 247, 0.22) 100%);
        pointer-events: none;
    }
    
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 7.5rem;
        height: 7.5rem;
        background: radial-gradient(
                circle,
                rgba(255, 255, 255, 0.15) 0%,
                transparent 70%
        );
        left: 18%;
        bottom: -44px;
        width: 64%;
        height: 88px;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 72%);
        border-radius: 50%;
        transform: translate(2.5rem, -2.5rem);
        filter: blur(10px);
        pointer-events: none;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
	
    padding: 14px 14px 18px 14px;
    margin: 0 12px;
    padding: 16px 16px 14px;
    height: 100%;
    backdrop-filter: blur(2px);
}

.hero-ornaments {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 72%);
    opacity: 0.9;
}

.hero-glow.glow-left {
    left: -10px;
    top: 8px;
    width: 120px;
    height: 120px;
}

.hero-glow.glow-right {
    right: -20px;
    top: 4px;
    width: 144px;
    height: 144px;
    background: radial-gradient(circle, rgba(207, 234, 255, 0.92) 0%, rgba(207, 234, 255, 0) 74%);
}

.hero-mist {
    position: absolute;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(154, 190, 219, 0.14);
}

.hero-mist.mist-top {
    left: 18px;
    top: 20px;
    width: 112px;
    height: 18px;
}

.hero-mist.mist-bottom {
    left: 18px;
    top: 48px;
    width: 72px;
    height: 10px;
    opacity: 0.82;
}

.hero-curve {
    position: absolute;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12));
    box-shadow:
        0 10px 26px rgba(154, 190, 219, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.hero-curve.curve-main {
    right: 18px;
    bottom: 22px;
    width: 176px;
    height: 84px;
    transform: rotate(-9deg);
    border-top-left-radius: 90px;
    border-bottom-right-radius: 90px;
    opacity: 1;
}

.hero-curve.curve-sub {
    right: 96px;
    bottom: 60px;
    width: 104px;
    height: 40px;
    transform: rotate(-9deg);
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
    opacity: 0.9;
}

.hero-wave {
    height: 2.75rem;
    height: 1.1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(244, 249, 253, 0.96) 100%);
    margin-top: -1px;
    position: relative;
}

.safe-top {
@@ -853,9 +909,6 @@
  gap: 8px;
}

.list-row {
  width: 100%;
}
.summary-chip {
  flex: 1;
  background: rgba(47, 107, 255, 0.06);
@@ -889,8 +942,13 @@
  width: 100%;
}

.customer-swiper {
  height: 140px;
.list-row {
  width: 100%;
  margin-top: 6px;
}

.customer-scroll {
  height: 220px;
}

.customer-page {
@@ -898,6 +956,7 @@
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
  padding-right: 4px;
}

.customer-item {
@@ -1007,23 +1066,6 @@
  transform: translateY(1px);
}

.dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}
.dot {
  width: 8px;
  height: 4px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.35);
}
.dot.active {
  width: 14px;
  background: #2f6bff;
}

.bottom-space {
  height: 24px;
}
@@ -1088,4 +1130,4 @@
    transform: translateY(0) scale(1);
  }
}
</style>
</style>