feat: 调整律所首页信息区布局

- 精简首页头图展示并优化地址卡片样式

- 将专业领域提前到律所简介之前
This commit is contained in:
2026-03-21 22:01:57 +08:00
parent f39fcd05aa
commit 63685f8644
3 changed files with 26 additions and 82 deletions

View File

@@ -4,13 +4,8 @@
.hero-section {
position: relative;
height: 520rpx;
height: 440rpx;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 80rpx;
/* Space for overlap */
}
.hero-bg {
@@ -33,60 +28,10 @@
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 var(--spacing-lg);
display: flex;
flex-direction: column;
margin-bottom: 72rpx;
}
.firm-stats {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 14rpx 22rpx;
border-radius: 20rpx;
border: 1rpx solid rgba(255, 255, 255, 0.32);
background: linear-gradient(120deg, rgba(10, 21, 34, 0.62), rgba(19, 38, 56, 0.36));
box-shadow: 0 10rpx 28rpx rgba(7, 15, 27, 0.35), inset 0 1rpx 0 rgba(255, 255, 255, 0.24);
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
}
.stat-item {
display: flex;
flex-direction: column;
min-width: 120rpx;
}
.stat-num {
font-size: 44rpx;
font-weight: 700;
color: #fff;
line-height: 1.2;
text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.35);
}
.stat-label {
font-size: 24rpx;
color: rgba(242, 247, 252, 0.92);
margin-top: 4rpx;
text-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.28);
}
.stat-divider {
width: 2rpx;
height: 40rpx;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.12));
margin: 0 24rpx;
}
.content-container {
position: relative;
z-index: 3;
margin-top: -60rpx;
margin-top: -32rpx;
background: var(--bg-page);
border-radius: 32rpx 32rpx 0 0;
padding: var(--spacing-lg) var(--spacing-md);
@@ -96,7 +41,7 @@
.address-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
background: #fff;
@@ -105,8 +50,10 @@
.address-info {
display: flex;
flex: 1;
flex-direction: column;
gap: 8rpx;
min-width: 0;
}
.address-label {
@@ -118,11 +65,15 @@
font-size: 28rpx;
color: var(--text-main);
font-weight: 500;
line-height: 1.5;
word-break: break-all;
}
.address-icon {
font-size: 32rpx;
color: var(--text-tertiary);
width: 34rpx;
height: 34rpx;
flex-shrink: 0;
align-self: center;
}
.section {

View File

@@ -3,42 +3,21 @@
<app-header title="{{firm.name}}" back="{{false}}" background="rgba(255,255,255,0.9)"></app-header>
<scroll-view class="page-content" scroll-y="true" type="list">
<!-- Hero Section -->
<view class="hero-section">
<image wx:if="{{firm.heroImage}}" class="hero-bg" mode="aspectFill" src="{{firm.heroImage}}"></image>
<view wx:if="{{!firm.heroImage}}" class="hero-overlay"></view>
<view class="hero-content">
<view class="firm-stats">
<view class="stat-item">
<text class="stat-num">{{firm.officeCount}}</text>
<text class="stat-label">办公机构</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-num">{{firm.lawyerCount}}</text>
<text class="stat-label">专业律师</text>
</view>
</view>
</view>
</view>
<!-- Content Container (Overlapping) -->
<view class="content-container">
<!-- Address Card -->
<view class="card address-card" bindtap="openLocation">
<view class="address-info">
<text class="address-label">总部地址</text>
<text class="address-text">{{firm.hqAddress}}</text>
</view>
<text class="address-icon">></text>
</view>
<!-- Intro Section -->
<view class="section">
<view class="section-title">律所简介</view>
<text class="intro-text">{{firm.intro}}</text>
<image class="address-icon" src="/assets/icons/navigate.svg" mode="aspectFit"></image>
</view>
<!-- Practice Areas -->
@@ -48,6 +27,12 @@
<view class="area-tag" wx:for="{{firm.practiceAreas}}" wx:key="*this">{{item}}</view>
</view>
</view>
<!-- Intro Section -->
<view class="section">
<view class="section-title">律所简介</view>
<text class="intro-text">{{firm.intro}}</text>
</view>
<view class="safe-area-bottom" style="height: 120rpx;"></view>
</view>